5

I have a table with rowspan in first cells of row. I want to select first cells. When I select first child, in some rows after rowspan, first child going to be cells that are not in first row.

How to select just first column of table?

Here is my JSFIDDLE http://jsfiddle.net/qw78pcud/

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
table{
    font-size: 18px;
    color: black;
}
table tr td:first-child{
    color: red;
    text-align: center;
}
<table>
    <thead>
        <tr>
            <th>Country</th>
            <th>Bank Name</th>
            <th>SWIFT BIG</th>
            <th>Currency</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>USA</td>
            <td>Deutsche Bank Trust Company Americas, New Your</td>
            <td>BKTRUS33</td>
            <td>USD</td>
        </tr>
        <tr>
            <td>Germany</td>
            <td>Deutsche Bank AG</td>
            <td>DEUTDEFF</td>
            <td>EUR</td>
        </tr>
        <tr>
            <td rowspan="2">Austria</td>
            <td rowspan="2">Raiffeisen Bank International AG</td>
            <td rowspan="2">RZBAATWW</td>
            <td>EUR</td>
        </tr>
        <tr><td>USD</td></tr>
        
        
        <tr>
            <td rowspan="5">Netherlands</td>
            <td rowspan="5">Demir - Halk Bank (Nederland) N.V.</td>
            <td rowspan="5">DHBNNL2R</td>
            <td >EUR</td>
        </tr>
        <tr><td>USD</td></tr>
        <tr><td>GBP</td></tr>
        <tr><td>CHF</td></tr>
        <tr><td>JPY</td></tr>
    </tbody>
</table>

I used following selector but it selects last childs after rowspan as jsfiddle shows

table tr td:first-child{
    color: red;
    text-align: center;
}

Note: I can't set class or id to table elements. I need to access with css.

Edit: What can we do in This case? http://jsfiddle.net/qw78pcud/6 

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
table{
  font-size: 18px;
  color: black;
}
table tr td:first-child:not(:only-child) {
  color: red;
  text-align: center;
}
<table>
    <thead>
        <tr>
            <th>Country</th>
            <th>Bank Name</th>
            <th>SWIFT BIG</th>
            <th>Currency</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>USA</td>
            <td>Deutsche Bank Trust Company Americas, New Your</td>
            <td>BKTRUS33</td>
            <td>USD</td>
        </tr>
        
        <tr>
            <td>Germany</td>
            <td>Deutsche Bank AG</td>
            <td>DEUTDEFF</td>
            <td>EUR</td>
        </tr>
        
        <tr>
            <td rowspan="2">Austria</td>
            <td rowspan="2">Raiffeisen Bank International AG</td>
            <td rowspan="2">RZBAATWW</td>
            <td>EUR</td>
        </tr>
        <tr><td>USD</td></tr>
        
        <tr>
            <td rowspan="5">Netherlands</td>
            <td rowspan="5">Demir - Halk Bank (Nederland) N.V.</td>
            <td rowspan="5">DHBNNL2R</td>
            <td >EUR</td>
        </tr>
        <tr><td>USD</td></tr>
        <tr><td>GBP</td></tr>
        <tr><td>CHF</td></tr>
        <tr><td>JPY</td></tr>
        
        <tr>
            <td rowspan="10">Russia</td>
            <td rowspan="3">CB “Garanti Bank – Moscow” (ZAO)</td>
            <td rowspan="3">GABMRUMM</td>
            <td >EUR</td>
        </tr>
        <tr><td>USD</td></tr>
        <tr><td>RUB</td></tr>
        <tr>
            <td rowspan="2">Sberbank of Russia </td>
            <td rowspan="2">SABRRUMM</td>
            <td>USD</td>
        </tr>
        <tr><td>RUB</td></tr>
        <tr>
            <td rowspan="3">JSCB “Yapi Kredi Bank Moscow" (CJSC)</td>
            <td rowspan="3">YKBMRUMM</td>
            <td>EUR</td>
        </tr>
        <tr><td>USD</td></tr>
        <tr><td>RUB</td></tr>
        <tr>
            <td rowspan="2">ZAO Raiffeisenbank </td>
            <td rowspan="2">RZBMRUMM</td>
            <td>USD</td>
        </tr>
        <tr><td>RUB</td></tr>
    </tbody>
</table>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Erlan
  • 2,010
  • 1
  • 22
  • 31

1 Answers1

7

You could achieve that by using a combination of :not() and :only-child pseudo-classes as follows:

Example Here

table tr td:first-child:not(:only-child) {
    color: red;
    text-align: center;
}

This would exclude the cells that are the only child of their parents - the rows.

Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
  • Thank you very much, it worked. Couldn't think of nested selectors and didn't know about :not(). – Erlan Oct 16 '14 at 10:54
  • 1
    what we can do if there are more than one child in rows that shouldn't be selected? jsfiddle http://jsfiddle.net/qw78pcud/6/. Could we select row that has four childs instead only-child(something like :four-childed) – Erlan Oct 16 '14 at 11:16
  • 1
    @Erlan Unfortunately there is **no general** way to select only the first **visual** cells (which are not necessarily the first child `` in the markup logically). In this complex situations, you could use [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup) element to apply some styles to the first column. But [there are some restrictions](http://www.w3.org/wiki/HTML/Elements/colgroup).You [can only control](http://stackoverflow.com/a/159848/1725764) `background-color, border, width, visibility` properties **[Example](http://jsfiddle.net/hashem/qw78pcud/7/)**. – Hashem Qolami Oct 16 '14 at 11:56