How to Color Table Columns Using CSS Without Coloring Individual Cells

Can I color table columns using CSS without coloring individual cells?

Yes, you can... using the <col> element:

.grey {  background-color: rgba(128,128,128,.25);}.red {  background-color: rgba(255,0,0,.25);}.blue {  background-color: rgba(0,0,255,.25);}

<table>  <colgroup>    <col class="grey" />    <col class="red" span="3" />    <col class="blue" />  </colgroup>  <thead>    <tr>      <th>#</th>      <th colspan="3">color 1</th>      <th>color 2</th>    </tr>  </thead>  <tbody>    <tr>      <th>1</th>      <td>red</td>      <td>red</td>      <td>red</td>      <td>blue</td>    </tr>    <tr>      <th>2</th>      <td>red</td>      <td>red</td>      <td>red</td>            <td>blue</td>    </tr>  </tbody></table>

How to Change the Background colour of a table-column in html and css?

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>

Apply text color to HTML column

th is inside tr, hence its not taking the font color.

Here is my solution, Its Not a perfect solution, but will not have to add individual classes .

th:first-child {  color: green;}
th:nth-child(2) {  color: yellow;}

<table>  <colgroup>    <col style="color: green" />    <col style="background-color:green" />    <col class="char" />  </colgroup>  <tr>    <th>      Decimal    </th>    <th>      Hex    </th>    <th>      Char    </th>  </tr></table>

Change background color for certain cells in the appending row to a table using JQuery

You can try this way :

/* added this loop to append tr you can ignore this loop as this only for demo */for(i=0; i<=10; i++){  var row = $('<tr></tr>');  for(j=0; j<=25; j++){    row.append('<td>'+j+'</td>');  }  $("#table1 tbody#body1").append(row);}// demo code ends here
// actual logic starts here
var startIndex = $('#table1 thead th').index($('#table1 thead th[id=17]')) // get the index of id 17
var endingIndex = $('#table1 thead th').index($('#table1 thead th[id=22]')) // get the index of id 22
// iterates through all rows.$.each($('#table1 #body1 tr'), function(i, item) {   // update background-color of td between the index values 17 and 22     $(item).children('td:lt('+(endingIndex + 1)+'):gt('+(startIndex - 1)+')').addClass('highlight') });

.highlight{background-color: yellow;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table class="table table-striped" id="table1">  <thead>    <tr>      <th class="" id="profilepic">Image</th>      <th id="empName">Employee</th>      <th id="0">00:00</th>      <th id="1">01:00</th>      <th id="2">02:00</th>      <th id="3">03:00</th>      <th id="4">04:00</th>      <th id="5">05:00</th>      <th id="6">06:00</th>      <th id="7">07:00</th>      <th id="8">08:00</th>      <th id="9">09:00</th>      <th id="10">10:00</th>      <th id="11">11:00</th>      <th id="12">12:00</th>      <th id="13">13:00</th>      <th id="14">14:00</th>      <th id="15">15:00</th>      <th id="16">16:00</th>      <th id="17">17:00</th>      <th id="18">18:00</th>      <th id="19">19:00</th>      <th id="20">20:00</th>      <th id="21">21:00</th>      <th id="22">22:00</th>      <th id="23">23:00</th>    </tr>  </thead>  <tbody id="body1">
  </tbody></table>

CSS Changing background colour of specific cell in table when hovering over it

I think this is what you are after.

td:hover:nth-child(1) {background-color: #f5f5f5;}td:hover:nth-child(2) {background-color: #ff0000;}td:hover:nth-child(3) {background-color: #ddd;}

<table width="100%" border="0" cellspacing="0" cellpadding="0">  <tbody>    <tr>      <td> </td>      <td> </td>      <td> </td>    </tr>  </tbody></table>

Color the row of a HTML table from a cell value (from an SQL server)

First, place data in the <tbody> of the table. Second, dates can be formatted as Strings using toLocaleDateString. This function uses the Intl.DateTimeFormat formatting options.

Now, you can get the value of the seventh column of each row and set a data attribute i.e. data-has-link. You can declare styles for rows i.e. <td> with a particular data attribute. This is much easier to work with than abusing classes.

$(function() {
  var $table = $('table');
  $table.find('#current_date').text(getCurrentDate());
  colorRows($table); // Color the rows!
});

function getCurrentDate () {
  return new Date().toLocaleDateString('en-GB', {
    year: 'numeric',
    month: 'numeric',
    day: 'numeric'
  });
}

function colorRows($table) {
  var hasLink;
  $table.find('tbody > tr').each(function(rowIndex) {
    const $row = $(this);
    $row.find('td').each(function(colIndex) {
      const $cell = $(this).removeAttr('data-has-link');
      const cellValue = $cell.text().trim();
      if (isFinite(cellValue)) {
        // Color cell based on individual data
        const hasLink = cellHasLink(parseInt(cellValue, 10));
        if (hasLink !== 'maybe') {
          $cell.attr('data-has-link', hasLink);
        }
      }
    });
    // Color row based on 7th column
    var i = parseInt($row.find('td:nth-child(7)').text(), 10);
    $row.attr('data-has-link', cellHasLink(i));
  });
}

function cellHasLink(value) {
  switch (value) {
    case 0  : return 'no';
    case 1  : return 'yes';
    default : return 'maybe';
  }
}

table { width: 20em; border-collapse: collapse; }

th {
  border-bottom: 2px solid #000;
  padding: 0.5em 0 0.1em 0;
  font-size: 1.2em;
}

td {
  border-bottom: 2px solid #ccc;
  padding: 0.5em 0 0.1em 0;
}

th:nth-child(n + 2),
td:nth-child(n + 2) {
  text-align: center;
}

[data-has-link="no"]    { background-color: #F77; }
[data-has-link="yes"]   { background-color: #7F7; }
[data-has-link="maybe"] { background-color: #FD7; }

#score, #name {  width: 50%; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table style="width: 100%; height:50%" border="1" cellpadding="3">
  <caption>AV.31.U</caption>
  <thead>
    <tr>
      <td><div id="current_date"></div></td>
      <td colspan="6">Home</td>
      <td> </td>
    </tr>
    <tr>
      <th>Project</th>
      <th>Machine</th>
      <th>te</th>
      <th>Video Link</th>
      <th>te</th>
      <th>File Link</th>
      <th>te</th>
      <th>Draw Link</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>22005</td>
      <td>22003652</td>
      <td><a href="#">Link</a></td>
      <td><a href="#">Open</a></td>
      <td><a href="#">Open</a></td>
      <td>0</td>
      <td>0</td>
      <td>1</td>
    </tr>
    <tr>
      <td>22012</td>
      <td>22003652</td>
      <td><a href="#">Link</a></td>
      <td><a href="#">Open</a></td>
      <td><a href="#">Open</a></td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>22012</td>
      <td>22003652</td>
      <td><a href="#">Link</a></td>
      <td><a href="#">Open</a></td>
      <td><a href="#">Open</a></td>
      <td>1</td>
      <td>3</td>
      <td>1</td>
    </tr>
  </tbody>
</table>

---

Related Topics