General
9 Step Tutor
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.