CreateaFreeWebsite

 with Responsive Tables

Using Color in Responsive Tables

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

 

Free Tools and Resources

ThingsThingsHave you found Thiings yet?.
Over 6000 Free 3D images that you can download (individually or the complete set) and use for personal or commercial projects. You have got to SEE this!!

 

Free Bullet Images, WingDings and WebDings
🔵 🔶 😀 🎈 🐝 🏀 👉 👲 💡 🍅

Have you tried our NEWEST template kit with scrolling columns?
Download Template Kit #601 - 4 Page Kit or Test Drive It!

 

Top