How to center vertically and horizontally table using css flexbox? - html

I'm trying to center table vertically and horizontally via flexbox.
One "screen" - one table in the middle, scrolling, - yet another table in the middle.
But via this code doesn't work:
* {
margin : 0;
padding : 0;
}
table {
text-align : center;
}
thead {
font-weight : bold;
background : forestgreen;
}
tfoot {
font-weight : bold;
background : tomato;
}
th, td {
width : 5vw;
}
body {
min-height : 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper {
min-height : 100vh;
}
<body>
<div class="wrapper">
<table>
<thead>
<tj>
<th>1</th>
<th>1</th>
<th>1</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</tfoot>
</table>
</div><!-- wrapper end -->
<div class="wrapper">
<table>
<thead>
<tj>
<th>1</th>
<th>1</th>
<th>1</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</tfoot>
</table>
<div><!-- wrapper end -->
</body>
Where I'm wrong?


If to have the table's each centered per full screen/viewport, to scroll between the 2 tables, check sample 1 below, where I moved all properties from the body rule to the .wrapper rule.
If you intended to have the 2 table's on top of each other, check sample 2 below, which have flex-direction: column set.
To center the table's side-by-side, remove min-height: 100vh from the wrapper rule, sample 3.
Sample 1 - one per full screen/viewport
* {
margin : 0;
padding : 0;
}
table {
text-align : center;
}
thead {
font-weight : bold;
background : forestgreen;
}
tfoot {
font-weight : bold;
background : tomato;
}
th, td {
width : 5vw;
}
.wrapper {
min-height : 100vh;
display: flex;
align-items: center;
justify-content: center;
}
<div class="wrapper">
<table>
<thead>
<tr>
<th>1</th>
<th>1</th>
<th>1</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</tfoot>
</table>
</div><!-- wrapper end -->
<div class="wrapper">
<table>
<thead>
<tr>
<th>1</th>
<th>1</th>
<th>1</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</tfoot>
</table>
<div><!-- wrapper end -->
Sample 2 - on top of each other
* {
margin : 0;
padding : 0;
}
table {
text-align : center;
}
thead {
font-weight : bold;
background : forestgreen;
}
tfoot {
font-weight : bold;
background : tomato;
}
th, td {
width : 5vw;
}
body {
min-height : 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
<div class="wrapper">
<table>
<thead>
<tr>
<th>1</th>
<th>1</th>
<th>1</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</tfoot>
</table>
</div><!-- wrapper end -->
<div class="wrapper">
<table>
<thead>
<tr>
<th>1</th>
<th>1</th>
<th>1</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</tfoot>
</table>
<div><!-- wrapper end -->
Sample 3 - side-by-side
* {
margin : 0;
padding : 0;
}
table {
text-align : center;
}
thead {
font-weight : bold;
background : forestgreen;
}
tfoot {
font-weight : bold;
background : tomato;
}
th, td {
width : 5vw;
}
body {
min-height : 100vh;
display: flex;
align-items: center;
justify-content: center;
}
<div class="wrapper">
<table>
<thead>
<tj>
<th>1</th>
<th>1</th>
<th>1</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</tfoot>
</table>
</div><!-- wrapper end -->
<div class="wrapper">
<table>
<thead>
<tj>
<th>1</th>
<th>1</th>
<th>1</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</tfoot>
</table>
<div><!-- wrapper end -->


You can also use place-content: center with display: grid to achieve this.
What's place-content ?
From css-tricks.com
The place-content property in CSS is shorthand for the align-content
and justify-content properties, combining them into a single
declaration in CSS Grid and Flexbox layouts, where align-content and
justify-content are values that align an individual item in the block
and inline directions.
body{
margin:0;
text-align:center;
}
.wrapper {
min-height:100vh;
display:grid;
place-content:center;
}
th, td {
width: 30px;
}
<body>
<div class="wrapper">
<table>
<thead style="background:forestgreen">
<tj>
<th>1</th>
<th>1</th>
<th>1</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</tbody>
<tfoot style="background:tomato">
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
</tfoot>
</table>
</div>
</body>

Related

Change font-size for table column

I am working on a table that is optimized with Bootstrap and I encounter the following problem I want column 1 both header and body to have font size 12px then column number 2 both header and body to have font size 21px.
In other words, I want to customize the font as I want for each column.
Code:
<table class="table">
<thead>
<tr>
<th style="font-size: 12px;">1</th>
<th style="font-size: 21px;">2</th>
<th style="font-size: 12px;">3</th>
<th style="font-size: 21px;">4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>

You need to use nth-child/nth-of-type and if you want a zebra style (column-based) you can use odd and even
/*one approach */
.table th:first-child,
.table td:first-child {
font-size: 21px
}
.table th:nth-child(2),
.table td:nth-child(2) {
font-size: 12px
}
/*second approach */
/* odd */
.table th:nth-child(2n+1),
.table td:nth-child(2n+1) {
background: red
}
/* even */
.table th:nth-child(2n),
.table td:nth-child(2n) {
background: lightblue
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<table class="table">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>

you can also use odd and even keywords with nth-child:
th:nth-child(odd),
td:nth-child(odd){
font-size: 12px;
}
th:nth-child(even),
td:nth-child(even){
font-size: 21px;
}
<table class="table">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>

Easily with CSS nth-child you can target what ever child you want, see below:
td:nth-child(1),
td:nth-child(3),
th:nth-child(1),
th:nth-child(3){
font-size: 12px
}
td:nth-child(2),
td:nth-child(4),
th:nth-child(2),
th:nth-child(4){
font-size: 21px
}
<table class="table">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
Check MDN Web Docs for more about nth-child

Table rows is not stretching full-length in 1st Table, in 2nd it does fine

In the following code, my 1st table rows are not stretching to full which is frustrating. While 2nd table is fine and stretches as expected. Can someone cite me the reason and help fix it?
body {padding: 20px;}
table {border:1px solid gray;}
.orange {background:#ffa566!important;}
.aqua {background: #aaffff!important;}
table {display:inline-block;float:left;}
tbody, thead {width:100%;}
<html>
<head>
<link rel="stylesheet" src="<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" />
</head>
<body>
<h1>Lok Sabha</h1>
<h3>2019</h1>
<table class="table table-striped" style="width:500px">
<thead>
<tr><th>#</th><th>Party</th><th>Seats</th></tr>
</thead>
<tbody>
<tr class="orange"><td>1</td><td>BJP</td><td>303</td></tr>
<tr class="orange"><td>2</td><td>Shiv-Sena</td><td>18</td></tr>
<tr class="orange"><td>3</td><td>JD(U)</td><td>14</td></tr>
<tr class="orange"><td>4</td><td>LJP</td><td>6</td></tr>
<tr><td>5</td><td>Akali-Dal</td><td>2</td></tr>
<tr><td>6</td><td>Apna-Dal</td><td>2</td></tr>
<tr><td>7</td><td>Jharkhand Student Union</td><td>2</td></tr>
<tr><td>8</td><td>AIDMK</td><td>1</td></tr>
<tr><td>9</td><td>Loktantrik-Party (Hanuman Beniwal)</td><td>1</td></tr>
<tr><td>10</td><td>Democratic-Progressive-Party (Nagaland)</td><td>1</td></tr>
<tr><td>11</td><td>People-Party (Meghalay-Manipur)</td><td>1</td></tr>
</tbody>
</table>
<table class="table table-striped" style="width:500px">
<tr><th>#</th><th>Party</th><th>Seats</th></tr>
<tr class="aqua"><td>1</td><td>Congress</td><td>52</td></tr>
<tr class="aqua"><td>2</td><td>DMK (Karunanidhi)</td><td>23</td></tr>
<tr class="aqua"><td>3</td><td>NCP (Sharad-Pawar)</td><td>5</td></tr>
<tr><td>4</td><td>National-Conference (farooq-abdulla)</td><td>3</td></tr>
<tr><td>5</td><td>Indian Union Muslim League - Kerela</td><td>3</td></tr>
<tr><td>6</td><td>Janata-Dal(Secular) - Dewegowda/Karnataka</td><td>1</td></tr>
<tr><td>7</td><td>Jharkhand Mukti Morcha</td><td>1</td></tr>
<tr><td>8</td><td>Revolutionary Socialist Party - left-winged/ socialist/ W.Bengal</td><td>1</td></tr>
<tr><td>9</td><td>Kerela-Congress[M] - Chrisitan/Kerela/5mla-seats</td><td>1</td></tr>
<tr><td>10</td><td>VCK (Tamil Panther Party) -Supports LTTE/dalit-tamil-support/tamil-nationalism</td><td>1</td></tr>
</table>
</body>
</html>

Remove display: inline-block; in table should solve the issue.
body {
padding: 20px;
}
table {
border: 1px solid gray;
}
.orange {
background: #ffa566 !important;
}
.aqua {
background: #aaffff !important;
}
table {
float: left;
}
tbody,
thead {
width: 100%;
}
<h1>Lok Sabha</h1>
<h3>2019</h1>
<table class="table table-striped" style="width:500px">
<thead>
<tr>
<th>#</th>
<th>Party</th>
<th>Seats</th>
</tr>
</thead>
<tbody>
<tr class="orange">
<td>1</td>
<td>BJP</td>
<td>303</td>
</tr>
<tr class="orange">
<td>2</td>
<td>Shiv-Sena</td>
<td>18</td>
</tr>
<tr class="orange">
<td>3</td>
<td>JD(U)</td>
<td>14</td>
</tr>
<tr class="orange">
<td>4</td>
<td>LJP</td>
<td>6</td>
</tr>
<tr>
<td>5</td>
<td>Akali-Dal</td>
<td>2</td>
</tr>
<tr>
<td>6</td>
<td>Apna-Dal</td>
<td>2</td>
</tr>
<tr>
<td>7</td>
<td>Jharkhand Student Union</td>
<td>2</td>
</tr>
<tr>
<td>8</td>
<td>AIDMK</td>
<td>1</td>
</tr>
<tr>
<td>9</td>
<td>Loktantrik-Party (Hanuman Beniwal)</td>
<td>1</td>
</tr>
<tr>
<td>10</td>
<td>Democratic-Progressive-Party (Nagaland)</td>
<td>1</td>
</tr>
<tr>
<td>11</td>
<td>People-Party (Meghalay-Manipur)</td>
<td>1</td>
</tr>
</tbody>
</table>
<table class="table table-striped" style="width:500px">
<tr>
<th>#</th>
<th>Party</th>
<th>Seats</th>
</tr>
<tr class="aqua">
<td>1</td>
<td>Congress</td>
<td>52</td>
</tr>
<tr class="aqua">
<td>2</td>
<td>DMK (Karunanidhi)</td>
<td>23</td>
</tr>
<tr class="aqua">
<td>3</td>
<td>NCP (Sharad-Pawar)</td>
<td>5</td>
</tr>
<tr>
<td>4</td>
<td>National-Conference (farooq-abdulla)</td>
<td>3</td>
</tr>
<tr>
<td>5</td>
<td>Indian Union Muslim League - Kerela</td>
<td>3</td>
</tr>
<tr>
<td>6</td>
<td>Janata-Dal(Secular) - Dewegowda/Karnataka</td>
<td>1</td>
</tr>
<tr>
<td>7</td>
<td>Jharkhand Mukti Morcha</td>
<td>1</td>
</tr>
<tr>
<td>8</td>
<td>Revolutionary Socialist Party - left-winged/ socialist/ W.Bengal</td>
<td>1</td>
</tr>
<tr>
<td>9</td>
<td>Kerela-Congress[M] - Chrisitan/Kerela/5mla-seats</td>
<td>1</td>
</tr>
<tr>
<td>10</td>
<td>VCK (Tamil Panther Party) -Supports LTTE/dalit-tamil-support/tamil-nationalism</td>
<td>1</td>
</tr>
</table>

vertical scrollable table in flexbox

I have trying to make scrollable tbody in flexbox.
I got two flexbox and each flexbox has table in it.
When items in table are overflow I want to use vertical scrollbar in tbody.
But tables are in flexbox that has no fixed height.
What should I do to show vertical scrollbar in tbody?
.root {
background-color:green;
width: 200px;
height: 200px;
display: flex;
flex-flow:column nowrap;
}
.container1 {
display: flex;
flex-grow:4;
background-color:yellow;
}
.container1 tbody {
overflow: auto;
}
.container2 {
display: flex;
flex-grow:3;
background-color:blue;
}
<div class="root">
<div class="container1">
<table>
<thead>
<tr>
<td>name</td>
<td>age</td>
</tr>
</thead>
<tbody>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
<div class="container2">
<table>
<thead>
<tr>
<td>name</td>
<td>age</td>
</tr>
</thead>
<tbody>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
</div>
Let me know if you need more info. thanks.

you should use overflow auto
css
.container1 {
display: flex;
flex-grow:4;
background-color:yellow;
overflow:auto;
}

I have made some changes please check !
.root {
background-color:green;
width: 60vw;
height: 30vh;
display: flex;
flex-flow:column nowrap;
}
.container1 {
display: flex;
flex-grow:4;
background-color:yellow;
overflow-y: auto;
}
/* this flexbox is not appears!! */
.container2 {
display: flex;
flex-grow:3;
background-color:blue;
}
<div class="root">
<div class="container1">
<table width="100%">
<thead>
<tr>
<td>name</td>
<td>age</td>
</tr>
</thead>
<tbody>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
<div class="container2">
</div>
</div>

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

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/

Removing border from nested tr

I was hoping I could get some help with removing a table border from an "nested" (not sure if that is the proper terminology).
Here is what I have so far:
<table>
<thead>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
<th>Four</th>
<th>Five</th>
<th>Six</th>
<th>Seven</th>
<th>Eight</th>
<th>nine</th>
<th>ten</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr class="schedule-header">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
</tr>
</tbody>
</table>
Here is the CSS:
.schedule-header {
background: #0062a1;
color: white;
border: none;
font-weight: bold;
}
Now I am getting all the styling I want except for the border: none; style.
Basically my plan is to use jquery to pop in this nested table when a dropdown arrow is clicked on the table row above, revealing relevant data.
Ok so I fixed the code and added the collapse to my css and it doesnt seem to be fixing it.

I wrote you a small function that will attach a display function to each sibling row that has a button, but I think you should do some more tutorials first, as you have many mistakes that just create more confusion.
Try doing some of the Tutorials on W3Schools to improve your CSS, HTML and eventually JQuery.
Good Luck ;)
<html>
<head>
<style>
.more_info {
background-color: #0062a1;
color: white;
font-weight: bold;
display:none;
}
table {
border-collapse: collapse;
}
button {
border-radius: 50%;
background-color: #0062a1;
color: white;
font-weight: bold;
}
</style>
<script src="jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function (){
var info_row = $(this).parent().parent().next();
info_row.toggle("slow");
});
});
</script>
</head>
<body>
<table>
<thead>
<tr>
<th></th>
<th>One</th>
<th>Two</th>
<th>Three</th>
</tr>
</thead>
<tbody>
<tr id="1">
<td><button>i</button></td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr class="more_info">
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr id="2">
<td><button>i</button></td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr class="more_info">
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</body>
</html>

Add border-collapse: collapse; to the CSS of your table:
table {
border-collapse: collapse;
}
JSFiddle