样式一
<table class="table">
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
<th>列4</th>
</tr>
<tr>
<td>123123</td>
<td>123123</td>
<td>123123</td>
<td>123123</td>
</tr>
<tr>
<td>123123</td>
<td>123123</td>
<td>123123</td>
<td>123123</td>
</tr>
<tr>
<td>123123</td>
<td>123123</td>
<td>123123</td>
<td>123123</td>
</tr>
</table>
.table {
width: 50%;
/* 两条边框重合 */
border-collapse: collapse;
border: 2px black solid;
/* 文字居中 */
text-align: center;
/* 鼠标样式 */
cursor: pointer;
}
.table td, .table th {
font-size: 15px;
border: 1px solid #000000;
padding: 5px 7px;
}
.table th {
font-size: 17px;
/* 文字居中 */
text-align: center;
padding: 7px;
background-color: #555;
color: white;
}
/* 设置奇数元素颜色 */
.table tr:nth-child(even) {
background-color: #ffffff;
}
/* 设置偶数元素颜色 */
.table tr:nth-child(odd) {
background-color: #f6f4f0;
}
.table tr:hover {
background-color: #f5f5f5;
}
样式二