Using Color in Responsive Tables

The method shown here for making tables responsive should only be used for very small tables. For large data tables check out our beginners solution.

The CSS

table.demo4 {
width: 100%; 
margin: 0 auto; 
background-color :#7F7F7F; 
border: solid 2px #000; 
border-radius: 10px; 
box-shadow: 5px 5px 10px #0e0e0e
}
 table.demo4 th {
  background-color :#E4B552;
  padding: 5px 5px


}
.yellow-column {
  background-color: #ffff00;
	padding: 5px 5px;
text-align:center
}

.red-column {
  background: #ff8080;
  padding: 5px 5px;
text-align:center
}

Example Table

Heading
Column 1	Column 2

The html Code

The code shows the different methods of setting background colors.

<table class="demo4">
<tr><th colspan="2">Heading</th></tr>
<tr>
<td  class="yellow-column">Column 1</td>
<td  class="red-column">Column 2</td>
</tr></table>

Note: Some authorities will tell you to use relative values for padding. For us absolutes have always worked best. You choose.

Free Tools and Resources

Have you tried our FREE RWD template kit? Download Template #402 - 6 Page Kit