I want to make a scrolling table using css but I have some trouble, when I using overflow-y : auto and then the <td> is overload in <tr>, for example code I put HTML and CSS code in here :
HTML CODE :
<table id="check" class="table table-fixed">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
</tbody>
CSS CODE :
#check {
width: 70%;
margin-top : 5%;
margin-left: 45%;
border-collapse: collapse;
width: 100%;
}
#check td, #check th {
border: 1px solid #ddd;
padding: 8px;
}
#check tr:nth-child(even){background-color: #f2f2f2;}
#check tr:hover {background-color: #ddd;}
#check th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
.table-fixed tbody {
height: 250px;
overflow-y: auto;
margin-top: 1px;
table-layout: fixed;
display: block;
overflow: auto;
}
.table-fixed thead tr {
display: block;
}
I also put the link for code editor online in codepen : My Code
Inspired by following link with use of JQuery.
https://medium.com/#vembarrajan/html-css-tricks-scroll-able-table-body-tbody-d23182ae0fbc
$( document ).ready(function() {
$('#header_row').width(
$('#header_row').width() - ($('#table_1').width() - $('#tbody').width()))
});
.fixed_header {
width: 400px;
table-layout: fixed;
border-collapse: collapse;
margin: 0 auto;
}
.fixed_header tr:nth-child(even) {
background-color: #f2f2f2;
}
.fixed_header tr:hover {
background-color: #ddd;
}
.fixed_header tbody {
display: block;
width: 100%;
overflow: auto;
height: 100px;
}
.fixed_header thead tr {
display: block;
background-color: #4CAF50;
}
.fixed_header thead {
color: #fff;
}
.fixed_header thead th {
border: 1px solid white
}
.fixed_header tbody td {
border: 1px solid gray
}
.fixed_header th,
.fixed_header td {
padding: 5px;
text-align: left;
width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<div style="width: 100%">
<table id="table_1" class="fixed_header">
<thead>
<tr id="header_row">
<th>No</th>
<th>Name</th>
<th>Gender</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
<tr>
<td>1</td>
<td>Jax</td>
<td>Male</td>
</tr>
</tbody>
</table>
</div>
</html>
Related
I am having trouble to properly space the header cells and aligning the 2nd footer cell with the 3rd data cell. I would like to properly space the header cells and align the 2nd footer cell exactly under the 3rd column!
Just a beginner trying to practice. Help would be really appreciated!
HTML:
<table>
<tr class="headings_row">
<th>Country</th>
<th>Order ID</th>
<th>Order Amount</th>
</tr>
<tr>
<td>USA</td>
<td>1000</td>
<td>$1,300</td>
</tr>
<tr>
<td>USA</td>
<td>1001</td>
<td>$700</td>
</tr>
<tr>
<td>CA</td>
<td>1002</td>
<td>$2,000</td>
</tr>
<tr>
<td>CA</td>
<td>1003</td>
<td>$1,000</td>
</tr>
<tfoot>
<tr>
<th>Total</th>
<th colspan="2">$5,000</th>
</tr>
</tfoot>
</table>
CSS:
th:nth-child(even) {
background-color: #427fef;
}
th:nth-child(odd) {
background-color: #427fef;
}
tr:nth-child(odd) {
background-color: #eef7ff;
}
table {
border: #c4dcf3;
border-collapse: collapse;
}
.headings_row {
border-spacing: 10px;
}
Here:
tfoot th {
text-align: left;
}
th:nth-child(even) {
background-color: #427fef;
}
th:nth-child(odd) {
background-color: #427fef;
}
tr:nth-child(odd) {
background-color: #eef7ff;
}
table {
border: #c4dcf3;
border-collapse: collapse;
}
.headings_row {
border-spacing: 10px;
}
<table>
<tr class="headings_row">
<th>Country</th>
<th>Order ID</th>
<th>Order Amount</th>
</tr>
<tr>
<td>USA</td>
<td>1000</td>
<td>$1,300</td>
</tr>
<tr>
<td>USA</td>
<td>1001</td>
<td>$700</td>
</tr>
<tr>
<td>CA</td>
<td>1002</td>
<td>$2,000</td>
</tr>
<tr>
<td>CA</td>
<td>1003</td>
<td>$1,000</td>
</tr>
<tfoot>
<tr>
<th colspan="2">Total</th>
<th>$5,000</th>
</tr>
</tfoot>
</table>
I get confused when I want set two cells (x, y) in one cell CoordLamberts?
.techniques {
width: 70%;
border: 1px solid;
}
.techniques,
.techniques th,
.techniques td {
border-collapse: collapse;
border: 1px solid;
}
<table class="techniques">
<tr>
<th rowspan="2">Foret</th>
<th rowspan="2">Canton</th>
<th rowspan="2">Secteur</th>
<th rowspan="2">Parcelles</th>
<th>CoordLamberts</th>
<th rowspan="2">Superficie(ha)</th>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th>x</th>
<th>y</th>
<th></th>
</tr>
<tr>
<td>City</td>
<td>BV</td>
<td>region</td>
<td>3</td>
<td>443</td>
<td>634</td>
<td>13</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>7</td>
<td>786</td>
<td>564</td>
<td>35</td>
</tr>
<tr>
<td colspan="4">superficie(ha)</td>
<td>786</td>
<td>564</td>
<td>35</td>
</tr>
</table>
What I expect:
What I get:
.techniques {
width: 70%;
border: 1px solid;
}
.techniques,
.techniques th,
.techniques td {
border-collapse: collapse;
border: 1px solid;
}
<table class="techniques">
<tr>
<th rowspan="2">Foret</th>
<th rowspan="2">Canton</th>
<th rowspan="2">Secteur</th>
<th rowspan="2">Parcelles</th>
<th colspan="2">CoordLamberts</th>
<th rowspan="2">Superficie(ha)</th>
</tr>
<tr>
<th>x</th>
<th>y</th>
</tr>
<tr>
<td>City</td>
<td>BV</td>
<td>region</td>
<td>3</td>
<td>443</td>
<td>634</td>
<td>13</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>7</td>
<td>786</td>
<td>564</td>
<td>35</td>
</tr>
<tr>
<td colspan="4">superficie(ha)</td>
<td>786</td>
<td>564</td>
<td>35</td>
</tr>
</table>
This should work what you were missing was that you needed colspan instead of rowspan CoordLamberts should use 2 columns,
.techniques{
width: 70%;
border: 1px solid;
}
.techniques,.techniques th, .techniques td{
border-collapse: collapse;
border: 1px solid;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table class="techniques">
<tr>
<th rowspan="2">Foret </th>
<th rowspan="2">Canton</th>
<th rowspan="2">Secteur</th>
<th rowspan="2">Parcelles</th>
<th colspan="2">CoordLamberts</th>
<th rowspan="2">Superficie(ha)</th>
</tr>
<tr>
<td>x</td>
<td>y</td>
</tr>
<tr>
<td rowspan="4">City</td>
<td rowspan="4">BV</td>
<td rowspan="4">region</td>
<td>3</td>
<td>395 055</td>
<td>391 386</td>
<td>13</td>
</tr>
<tr>
<td>7</td>
<td>398 981</td>
<td>398 981</td>
<td>12</td>
</tr>
<tr>
<td>7</td>
<td>398 981</td>
<td>398 981</td>
<td>12</td>
</tr>
<tr>
<td>7</td>
<td>398 981</td>
<td>398 981</td>
<td>12</td>
</tr>
<tr>
<td colspan="6">Superficie</td>
<td>102</td>
</tr>
</table>
</body>
this way.
HTLM table use <thead>, <tbody> and <tfoot> ( + <caption> )
.techniques {
width : 70%;
border : 1px solid;
}
.techniques,
.techniques th,
.techniques td {
border-collapse : collapse;
border : 1px solid;
}
.techniques td {
vertical-align : text-top;
text-align : center;
}
.techniques thead {
background-color: lightgrey;
}
.techniques thead th[rowspan="2"]:nth-child(-n+4) {
min-width: 6em;
}
.techniques thead th[colspan="2"] {
min-width: 10em;
}
.techniques thead th[rowspan="2"]:last-of-type {
min-width: 10em;
}
.techniques tfoot {
background-color: whitesmoke;
}
<table class="techniques">
<thead>
<tr>
<th rowspan="2">Foret</th>
<th rowspan="2">Canton</th>
<th rowspan="2">Secteur</th>
<th rowspan="2">Parcelles</th>
<th colspan="2">CoordLamberts</th>
<th rowspan="2">Superficie(ha)</th>
</tr>
<tr>
<th>X</th>
<th>Y</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4">City</td>
<td rowspan="4">BV</td>
<td rowspan="4">region</td>
<td>3</td><td>443</td><td>634</td><td>13</td>
</tr>
<tr>
<td>7</td><td>443</td><td>634</td><td>26</td>
</tr>
<tr>
<td>8</td><td>443</td><td>634</td><td>54</td>
</tr>
<tr>
<td>13</td><td>443</td><td>634</td><td>9</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">superficie(ha)</td>
<td colspan="2"></td>
<td>102</td>
</tr>
</tfoot>
</table>
I want a table like below, only the outline_border (?) and column border to be in the table, but when I try there is a dark fade border in my rows:
How I achieve so far:
How can I get a table with outline border and column border, but not in a row. I used bootstrap CSS.
If i used table class table-borderless the rows line and all lines were gone except the outline-border, but I want column border to be in the table
I try like this questions
Please play it below here:
table {
border:1px solid black;
border-collapse: collapse;
}
table tr {
border-left: 1px solid #000;
border-right: 1px solid #000;
}
table td {
border-left: 1px solid #000;
border-right: 1px solid #000;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
<table class="table table-small">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Col1</th>
<th>Col2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>name</td>
<td>123</td>
<td>456</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
<td>xyz</td>
<td>abc</td>
</tr>
<tr>
<td>1</td>
<td>name</td>
<td>123</td>
<td>456</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
<td>xyz</td>
<td>abc</td>
</tr>
<tr>
<td>1</td>
<td>name</td>
<td>123</td>
<td>456</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
<td>xyz</td>
<td>abc</td>
</tr>
<tr>
<td>1</td>
<td>name</td>
<td>123</td>
<td>456</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
<td>xyz</td>
<td>abc</td>
</tr>
</tbody>
</table>
The problem is that bootstrap overwrites part of your definitions. To avoid this, you can make certain CSS !important.
EDIT: Horizontal lines between table cells removed.
.table {
border: 1px solid black;
}
.table thead th {
border-top: 1px solid #000!important;
border-bottom: 1px solid #000!important;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
.table td {
border-left: 1px solid #000;
border-right: 1px solid #000;
border-top: none!important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<table class="table table-small">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Col1</th>
<th>Col2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>name</td>
<td>123</td>
<td>456</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
<td>xyz</td>
<td>abc</td>
</tr>
<tr>
<td>1</td>
<td>name</td>
<td>123</td>
<td>456</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
<td>xyz</td>
<td>abc</td>
</tr>
<tr>
<td>1</td>
<td>name</td>
<td>123</td>
<td>456</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
<td>xyz</td>
<td>abc</td>
</tr>
<tr>
<td>1</td>
<td>name</td>
<td>123</td>
<td>456</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
<td>xyz</td>
<td>abc</td>
</tr>
</tbody>
</table>
My question for the above comment is, I can achieve what I want like below, but I have to use inline CSS everywhere. Is there any better approach to work with, not just inline CSS
.table {
border: 1px solid black;
}
.table thead th {
border-top: 1px solid #000!important;
border-bottom: 1px solid #000!important;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
.table td {
border-left: 1px solid #000;
border-right: 1px solid #000;
border-top: none!important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<table class="table table-small">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Col1</th>
<th>Col2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>name</td>
<td>123</td>
<td>456</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
<td>xyz</td>
<td>abc</td>
</tr>
<tr>
<td>1</td>
<td>sub-total</td>
<td style="border-bottom: 1px solid #000;border-top: 1px solid #000!important;">123</td>
<td style="border-bottom: 1px solid #000;border-top: 1px solid #000!important">456</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
<td>xyz</td>
<td>abc</td>
</tr>
<tr>
<td>1</td>
<td>name</td>
<td>123</td>
<td>456</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
<td>xyz</td>
<td>abc</td>
</tr>
<tr>
<td>1</td>
<td>name</td>
<td>123</td>
<td>456</td>
</tr>
<tr style="border-top: 1px solid #000!important">
<td>##</td>
<td>Total</td>
<td>xyz</td>
<td>abc</td>
</tr>
</tbody>
</table>
Only this can done by adding these styles in our head tag
.invoice-table {
border: 1px solid black;
}
.invoice-table thead th {
border: 1px solid #000!important;
}
.invoice-table td {
border: 1px solid #000;
}
Import: to have line for each tr we can simple add to
<tr style="border-top: 1px solid #000!important">
I am able to change the border styling of the top bar in the table, but I can't it to change the background color no matter what I do. Can anyone tell me where I am going wrong? My code is below:
<table>
<thead>
<tr >
<th>strong>Colour</strong></th>
<th><strong>Red</strong></th>
<th><strong>Green</strong></th>
<th><strong>White</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">Length (m)</td>
<td>1</td>
<td>0.5</td>
<td>0.5</td>
</tr>
<tr>
<td align="left">Weight (kg)</td>
<td>4</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td align="left">Burn Time (sec)</td>
<td>60</td>
<td>22</td>
<td>15</td>
</tr>
<tr>
<td align="left">Light Output (cd)</td>
<td>200 000</td>
<td>100 000</td>
<td>850 000</td>
</tr>
<tr>
<td align="left">Visibility at sea level (km)</td>
<td>20</td>
<td>15</td>
<td>26</td>
</tr>
</tbody>
CSS:
table th, table td {
border: 1px solid gray;
}
table thead td, table thead tr {
background-color: pink;
border: 4px solid pink;
}
Your html code has some syntax erros:
Corrected here and working well:
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<table>
<thead>
<tr >
<th><strong>Colour</strong></th>
<th><strong>Red</strong></th>
<th><strong>Green</strong></th>
<th><strong>White</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">Length (m)</td>
<td>1</td>
<td>0.5</td>
<td>0.5</td>
</tr>
<tr>
<td align="left">Weight (kg)</td>
<td>4</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td align="left">Burn Time (sec)</td>
<td>60</td>
<td>22</td>
<td>15</td>
</tr>
<tr>
<td align="left">Light Output (cd)</td>
<td>200 000</td>
<td>100 000</td>
<td>850 000</td>
</tr>
<tr>
<td align="left">Visibility at sea level (km)</td>
<td>20</td>
<td>15</td>
<td>26</td>
</tr>
</tbody>
</table>
</html>
http://plnkr.co/edit/XnLr3Fw9MO7jwvJrfjgB?p=preview
It's working for me! Take care with the tags... <strong>
table th, table td {
border: 1px solid gray;
}
table thead td, table thead tr {
background-color: pink;
border: 4px solid pink;
}
<table>
<thead>
<tr >
<th><strong>Colour</strong></th>
<th><strong>Red</strong></th>
<th><strong>Green</strong></th>
<th><strong>White</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">Length (m)</td>
<td>1</td>
<td>0.5</td>
<td>0.5</td>
</tr>
<tr>
<td align="left">Weight (kg)</td>
<td>4</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td align="left">Burn Time (sec)</td>
<td>60</td>
<td>22</td>
<td>15</td>
</tr>
<tr>
<td align="left">Light Output (cd)</td>
<td>200 000</td>
<td>100 000</td>
<td>850 000</td>
</tr>
<tr>
<td align="left">Visibility at sea level (km)</td>
<td>20</td>
<td>15</td>
<td>26</td>
</tr>
</table>
Your CSS should include one more rule, for the <th> tag:
table th, table td {
border: 1px solid gray;
}
table thead td, table thead tr, table thead th {
background-color: pink;
border: 4px solid pink;
}
Also, you have error in the HTML code - missing starting bracket in <strong> tag on line <th>strong>Colour</strong></th>.
Check out the working fiddle.
Try like this: Demo
Instead of giving border for tr you can give for td and th
table thead td, table thead tr th { /* added th after tr */
background-color: pink;
border: 4px solid pink;
}
And try to open and close tags properly to get expected output :)
No need to add so many styles. Apply this.
table th, table thead tr td {
border: 1px solid red;
}
table thead tr {
background-color: red;
border: 4px solid pink;
}
<table>
<thead>
<tr >
<th><strong>Colour</strong></th>
<th><strong>Red</strong></th>
<th><strong>Green</strong></th>
<th><strong>White</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">Length (m)</td>
<td>1</td>
<td>0.5</td>
<td>0.5</td>
</tr>
<tr>
<td align="left">Weight (kg)</td>
<td>4</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td align="left">Burn Time (sec)</td>
<td>60</td>
<td>22</td>
<td>15</td>
</tr>
<tr>
<td align="left">Light Output (cd)</td>
<td>200 000</td>
<td>100 000</td>
<td>850 000</td>
</tr>
<tr>
<td align="left">Visibility at sea level (km)</td>
<td>20</td>
<td>15</td>
<td>26</td>
</tr>
</tbody>
Is there a way to color spans of columns all the way down. See, starting example below:
<table border="1">
<tr>
<th>Motor</th>
<th colspan="3">Engine</th>
<th>Car</th>
<th colspan="2">Body</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>7</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
And I am looking for a better way (less code, non-individual coloring) to color, for example, "Engine" and "Body" spans, including all the cells underneath them in #DDD
<style>
.color {
background-color: #DDD
}
</style>
<table border="1">
<tr>
<th>Motor</th>
<th colspan="3" class="color">Engine</th>
<th>Car</th>
<th colspan="2" class="color">Body</th>
</tr>
<tr>
<td>1</td>
<td class="color">2</td>
<td class="color">3</td>
<td class="color">4</td>
<td>5</td>
<td class="color">6</td>
<td class="color">7</td>
</tr>
<tr>
<td>7</td>
<td class="color">1</td>
<td class="color">2</td>
<td class="color">3</td>
<td>4</td>
<td class="color">5</td>
<td class="color">6</td>
</tr>
</table>
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>
Note: You can use the span attribute to make the col definition apply to more than one column.
See also: <colgroup>
You can use the nth-child selector for that:
tr td:nth-child(2),
tr td:nth-child(3) {
background: #ccc;
}
<table>
<tr>
<th colspan="2">headline 1</th>
<th>headline 2</th>
</tr>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
</tr>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
</tr>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
</tr>
</table>
It is generally simplest to style cells (by column if desired), but columns can be styled, in different ways. One simple way is to wrap columns in a colgroup element and set styles on it. Example:
<style>
.x {
background-color: #DDD
}
</style>
<table border="1">
<col>
<colgroup class=x>
<col>
<col>
<col>
</colgroup>
<col>
<colgroup class=x>
<col>
<col>
</colgroup>
<tr>
<th>Motor</th>
<th colspan="3" class="color">Engine</th>
<th>Car</th>
<th colspan="2" class="color">Body</th>
</tr>
<tr>
<td>1</td>
<td class="color">2</td>
<td class="color">3</td>
<td class="color">4</td>
<td>5</td>
<td class="color">6</td>
<td class="color">7</td>
</tr>
<tr>
<td>7</td>
<td class="color">1</td>
<td class="color">2</td>
<td class="color">3</td>
<td>4</td>
<td class="color">5</td>
<td class="color">6</td>
</tr>
</table>
I would use the nth-child css pseudo-class for this:
tr td:nth-child(2), tr th:nth-child(2), tr td:nth-child(3), tr td:nth-child(4), tr th:nth-child(4), tr td:nth-child(6), tr td:nth-child(7){
background-color: #DDD;
}
tr td:nth-child(2),
tr th:nth-child(2),
tr td:nth-child(3),
tr td:nth-child(4),
tr th:nth-child(4),
tr td:nth-child(6),
tr td:nth-child(7) {
background-color: #DDD;
}
<table border="1">
<tr>
<th>Motor</th>
<th colspan="3">Engine</th>
<th>Car</th>
<th colspan="2">Body</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>7</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
You can use CSS3:
http://jsfiddle.net/snuggles08/bm98g8v8/
<style>
.table td:nth-of-type(1) {
background: red;
}
.table td:nth-of-type(5) {
background: blue;
}
.table td:nth-of-type(3) {
background: green;
}
.table td:nth-of-type(7) {
background: lime;
}
.table td:nth-of-type(2) {
background: skyblue;
}
.table td:nth-of-type(4) {
background: darkred;
}
.table td:nth-of-type(6) {
background: navy;
}
</style>
Styled table:
<table border="1" class="table">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>7</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
<hr>Unstyled table:
<table border="1" class="table2">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>7</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
The following implement's the nth-child selector and should work...
<style type="text/css">
th:nth-child(2),
th:nth-child(4)
{
background-color: rgba(255, 0, 0, 1.0);
}
td:nth-child(2),
td:nth-child(3),
td:nth-child(4),
td:nth-child(6),
td:nth-child(7)
{
background-color: rgba(255, 0, 0, 0.5);
}
</style>
My version using nth-child expressions:
Using the CSS concept of cascade rules to first coloring the cells and then to uncolor the ones i want to be transparent. The first selector selects all the cells after the first one, and the second one selects the fifth cell to be transparent.
<style type="text/css">
/* colored */
td:nth-child(n+2) { background-color: #ddd }
/* uncolored */
td:nth-child(5) { background-color: transparent }
</style>
<table border="1">
<tr>
<th>Motor</th>
<th colspan="3">Engine</th>
<th>Car</th>
<th colspan="2">Body</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>7</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
Check this interesting reference:
http://learn.shayhowe.com/advanced-html-css/complex-selectors/
This is an old question with a lot of great answers. Just wanted to add the -n and nth-last-child selectors that haven't yet been mentioned. They're helpful when applying CSS to multiple columns but may not know the number of columns prior to styling, or have multiple tables with varying widths.
/* Select the first two */
table tr td:nth-child(-n + 2) {
background-color: lightblue;
}
/* Select all but the first two */
table tr td:not(:nth-child(-n + 2)) {
background-color:lightgreen;
}
/* Select last two only */
table tr td:nth-last-child(-n + 2) {
background-color:mistyrose;
}
/* Select all but the last two */
table tr td:not(:nth-last-child(-n + 2)) {
background-color:yellow;
}
jsFiddle: https://jsfiddle.net/3rpf5oht/2/