Using Color in Responsive Tables

Table #1 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.

Example Table

Heading
Column 1	Column 2

The CSS

table.demo4 {
width: 50%; 
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
}

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>

Top