有关<table>的几个问题

1）实现任意一行下边框的颜色设置：

单元格边距(表格填充)(cellpadding) -- 代表单元格外面的一个距离,用于隔开单元格与单元格空间
单元格间距(表格间距)(cellspacing) -- 代表表格边框与单元格补白的距离,也是单元格补白之间的距离

实现的效果为：

html代码：

<!DOCTYPE html>
<html>
<head lang="zh">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8" />
    <title>商品管理后台首页</title>
    <link rel="stylesheet" href="./css/index.css" />
</head>

<body>
    <table cellpadding="5px" cellspacing="0">
        <tr>
            <th>1</th><th>2</th><th>3</th>
        </tr>
        <tr class="first-row">
            <td>ws</td><td>ws</td><td>ws</td>
        </tr>
        <tr>
            <td>ws</td><td>ws</td><td>ws</td>
        </tr>
    </table>
</body>

</html>

对应的less为：

table{
    th{
        border-bottom: 1px solid grey;
    }
    .first-row{    /*设置该tr中td的边框颜色，要注意的是在html中设置cellspacing="0"*/
        td{
        border-bottom: 1px solid red;
        }
    }
    
}

由于cellspacing设置的是td与td之间的距离，如果将cellspacing=10px;cellpadding=0px；则效果为：

2）当给<tr>标签设置为display:block;时，可以设置<tr>的高度和宽度以及边框，以及上下边距。且此时每行的<td>可以设置不同的百分比宽度，如

<table cellpadding="0px" cellspacing="0px">
        <tr>
            <th width="20%">1</th><th width="40%">2</th><th width="60%">3</th>
        </tr>
        <tr class="first-row">
            <td width="20%">ws</td><td width="60%">ws</td><td width="20%">ws</td>
        </tr>
        <tr>
            <td width="40%">ws</td><td width="40%">ws</td><td width="20%">ws</td>
        </tr>
    </table>

此外，由于设置<td>边框时，会导致左右边框重合，边框变粗，所以应该只设置一侧边框border-left：

3）几个使用的特性：

border-collapse:collapse;//属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示（separate）。
empty-cells: show;//属性设置是否显示表格中的空单元格（仅用于“分离边框”模式，即border-collapse:separate）。

有关<table>的几个问题

推荐阅读