CSS Table Style Reset

table {
border-collapse: collapse; /* Merge borders into a single border */
width: 100%; /* 100% width */
}

th, td {
padding: 8px; /* Cell padding */
}

th {
background-color: #f2f2f2; /* Table header background color */
}

tr:nth-child(even) {
background-color: #f2f2f2; /* Even-numbered row background color */
}

td {
text-align: center; /* Center cell text */
border: 1px solid #ddd; /* Cell border */
}

In the above code, we set border-collapse: The <code>collapse property collapses the table borders into a single border. The padding property controls the padding of cells. The background-color property sets the background color of the header and even-numbered rows. text-align: center centers the cell text. The border property defines the cell border.

2. Table Style Customization

Beyond basic table style resetting, we can further customize table styles based on design requirements. Here are some common table style customization methods:

2.1. Zebra Stripes

To make a table easier to read, we can add a background color to the even-numbered rows of the table, creating a clearer zebra stripe effect. This is achieved using the following CSS code:

tr:nth-child(even) {
background-color: #f2f2f2; /* Background color for even-numbered rows */
}

2.2. Header Style

To highlight the table header, we can set individual styles for the header, such as background color and text color. Below is some sample code for customizing table header styles:

th {
background-color: #333; /* Header background color */
color: white; /* Header text color */
font-weight: bold; /* Bold font */
}

2.3. Responsive Tables

On mobile devices, the width of a table may exceed the screen. To ensure that the table can display properly on small screens, we can use responsive table technology. Here’s a simple responsive table example:

table {
overflow-x: auto; /* horizontal scrollbar */ 
} 

<div style="overflow-x:auto;"> 
<table> 
<tr> 
<th>Item</th> 
<th>Quantity</th> 
</tr> 
<tr> 
<td>Apple</td> 
<td>10</td> 
</tr> 
<tr> 
<td>Orange</td> 
<td>20</td> 
</tr> 
</table> 
</div> 

By setting overflow-x: auto attribute, a horizontal scroll bar will appear when the width of the table exceeds the container, so that the table contents can be displayed normally on small screens.

3. Practical Table Styling Techniques

In addition to the basic styles and customization methods described above, there are some practical table styling techniques that can help us better customize the appearance of a table.

3.1. Hiding Cell Borders

Sometimes we want to hide the borders of certain cells in a table. This can be achieved using the following CSS code:

td.no-border {
border: none; /* Hide cell borders */ 
} 

<table> 
<tr> 
<td>Apple</td> 
<td class="no-border">10</td> 
</tr> 
<tr> 
<td>Orange</td> 
<td>20</td> 
</tr> 
</table> 

By adding the .no-border class to cells whose borders need to be hidden, you can hide the cell borders.

3.2. Table Rounded Borders

To make a table look more attractive, we can add rounded borders. The following is a simple table rounded border example:

table {
border-radius: 5px; /* Table rounded corners */ 
} 

By setting the border-radius property to 5px, you can add a rounded border effect to the table.

Conclusion

Through this article, we learned how to use CSS to reset and customize table styles, including basic table style resets, table style customization methods, and some practical table style techniques.