Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Select first column of table having rowspan

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>
like image 623
Erlan Avatar asked Oct 16 '14 10:10

Erlan


1 Answers

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.

like image 160
Hashem Qolami Avatar answered Oct 07 '22 05:10

Hashem Qolami