CODEWITHSUNDEEP
htmlcss
ontherocks
ontherocks

Reputation: 1959

Color first column when there is rowspan in HTML table

Below is a small simple table as an example. I want the header row to be of one color (grey). The alternate rows below header to be of another color (yellow). And the first column of another color (orange). I am not able to achieve the desired results with the CSS. How do I go about it without individually coloring the cells.

Code in JSFiddle

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
  text-align: center;
  padding: 5px;
}
table {
  width: 100%;
}
th {
  background-color: grey;
  color: white;
}
tr:nth-child(odd) {
  background-color: yellow;
}
<table>
  <col style="background-color: orange;" />

  <tr>
    <th>&nbsp;</th>
    <th>Bank</th>
    <th>Amount</th>
  </tr>
  <tr>
    <td>John</td>
    <td>ABC</td>
    <td>12345</td>
  </tr>
  <tr>
    <td rowspan="2">David</td>
    <td>DEF</td>
    <td>456789</td>
  </tr>
  <tr>
    <td>GHI</td>
    <td>147258</td>
  </tr>
  <tr>
    <td>Kevin</td>
    <td>JKL</td>
    <td>258369</td>
  </tr>
  <tr>
    <td>Mike</td>
    <td>MNO</td>
    <td>369258</td>
  </tr>
</table>

Upvotes: 0

Views: 5240

Answers (2)

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

demo - http://jsfiddle.net/victor_007/sthmw0dk/3/

The only thing i have changed is styling td instead of tr with background-color

Using td:not(:first-child) the first-child of tr will not get any styling

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
  text-align: center;
  padding: 5px;
}
table {
  width: 100%;
}
th {
  background-color: grey;
  color: white;
}
.first-col {
  background-color: orange;
}
tr:nth-child(odd) td:not(:first-child) {
  background-color: yellow;
}
<table>
  <colgroup>
    <col class="first-col" />
  </colgroup>
  <tr>
    <th>&nbsp;</th>
    <th>Bank</th>
    <th>Amount</th>
  </tr>
  <tr>
    <td>John</td>
    <td>ABC</td>
    <td>12345</td>
  </tr>
  <tr>
    <td rowspan="2">David</td>
    <td>DEF</td>
    <td>456789</td>
  </tr>
  <tr>
    <td>GHI</td>
    <td>147258</td>
  </tr>
  <tr>
    <td>Kevin</td>
    <td>JKL</td>
    <td>258369</td>
  </tr>
  <tr>
    <td>Mike</td>
    <td>MNO</td>
    <td>369258</td>
  </tr>
</table>

Upvotes: 0

Thomas Bormans
Thomas Bormans

Reputation: 5354

It's not a very good solution but here is a fix: http://jsfiddle.net/sthmw0dk/2/

I have added the following lines:

tr td:first-child
{
    background-color: orange;
}
tr:nth-child(even) td:nth-last-child(2)
{
    background-color: white;
}
tr:nth-child(odd) td:nth-last-child(2)
{
    background-color: yellow;
}

The last selector is necessary when you change your rowspan to 3 or more.

I would however suggest using classes for your first column. It will be a lot easier a better when you want to use more columns in the future.

Upvotes: 4

Related Questions