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>
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With