-2

How to Change the Background colour of a table-column in html and css? I know how to change row colour. But I just can't seem to do this.

  • You could also style a [colgroup](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup). – BSMP Apr 18 '21 at 08:08

2 Answers2

2

Use the :nth-child pseudo selector or with :first-child (in your specific case of first column)

td:nth-child(1) {
  background: red;
}
<table>
  <tr><td>a</td><td>1</td></tr>
  <tr><td>b</td><td>2</td></tr>
</table>

In your specific case it's also doable with:

td:first-child {
   background: red;
}
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
0

You can target the first cell (td element) in each row and set the background to red:

* {
  margin: 0;
  padding: 0;
}
table {
  border-collapse: collapse;
}
table tr td:first-child {
  background-color: red;
}
<table>
  <tr><td>cell col1</td><td>cell col2</td></tr>
  <tr><td>cell col1</td><td>cell col2</td></tr>
  <tr><td>cell col1</td><td>cell col2</td></tr>
</table>
A Haworth
  • 30,908
  • 4
  • 11
  • 14