Geek Answers Handbook

Select the first column of the table containing rowspan

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

How to select only the first column of the 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>
Run codeHide result

I used the following selector, but it selects the last children after rowspan as jsfiddle shows

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

Note. I cannot set the class or id to table elements. I need to access using 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>
Run codeHide result
+4
1

, :not() :only-child :

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

, - .

+7

More articles:


All Articles