Html+CSS | 1段CSS让表格更漂亮 建议收藏

html-css020

Html+CSS | 1段CSS让表格更漂亮 建议收藏,第1张

使用border-collapse: collapse去掉表格线间的空白。

使用:nth-child(even)选择表格中的偶数行，进行修改背景色，如果选择奇数行，使用odd选择奇数。

使用:last-of-type选择最后一个元素进行画表格底线

使用colspan进行行合并

使用rowspan进行列合并

table自带的border属行显得很生硬。建议请将table的cellspacing设置为1，然后给table设置一个背景，给所有的td设置白色背景，这样td和td之间空出来的一像素就会显示为table背景的颜色形成一种边框效果，宽度和颜色可以随意控制，甚至能使用图片。满意请采纳，谢谢！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>无标题文档</title>

<style type="text/css">

.tab{ margin:0padding:0/*合并边线*/border-collapse:collapse/*宽高自定*/ width:200pxheight:200px}

.tab td{ border:solid 1px #000}

</style>

</head>

<body>

<table class="tab">

<tr>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

</tr>

</table>

</body>

</html>

属性都写在CSS里就可以了