table边框改为细线

天天代码码天天

已于 2023-11-21 21:38:31 修改

阅读量1.6k

点赞数

分类专栏： web 文章标签： html

于 2021-07-23 15:19:12 首次发布

本文链接：https://blog.csdn.net/lw112190/article/details/119036192

版权

web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了一种利用CSS实现细线表格边框的方法，通过设置`border-collapse: collapse;`合并边框，并对`table`、`th`和`td`元素分别设置边框，确保在所有浏览器中兼容。示例代码展示了如何创建具有细线边框的表格，包括头部和数据单元格的样式定义。

摘要由CSDN通过智能技术生成

说明

代码

说明

默认的TABLE边线设置即使是1px 是很粗的，会使用其他一些方法来制作出细线边框。

利用CSS来实现细线的方法，很有效，而且兼容所有浏览器。

细线表格如果单纯设置边框，很难保证浏览器兼容。常见的做法是利用 CSS2 的 "border-collapse:collapse;" 属性合并表格边框；并对 table 元素设置左边框和上边框，对 th 和 td 元素设置右边框和下边框。

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
table
{
border-collapse: collapse;
border-spacing: 0;
border-left: 1px solid #888;
border-top: 1px solid #888;
background: #efefef;
}
th, td
{
border-right: 1px solid #888;
border-bottom: 1px solid #888;
padding: 5px 15px;
}
th
{
font-weight: bold;
background: #ccc;
}
</style>
</head>
<body>
<table>
<tr>
<th>
table head (row1, col1)
</th>
<th>
table head (row1, col2)
</th>
<th>
table head (row1, col3)
</th>
</tr>
<tr>
<td>
table data (row1, col1)
</td>
<td>
table data (row1, col2)
</td>
<td>
table data (row1, col3)
</td>
</tr>
<tr>
<td>
table data (row2, col1)
</td>
<td>
table data (row2, col2)
</td>
<td>
table data (row2, col3)
</td>
</tr>
</table>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        table
        {
            border-collapse: collapse;
            border-spacing: 0;
            border-left: 1px solid #888;
            border-top: 1px solid #888;
            background: #efefef;
        }
        th, td
        {
            border-right: 1px solid #888;
            border-bottom: 1px solid #888;
            padding: 5px 15px;
        }
        th
        {
            font-weight: bold;
            background: #ccc;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>
                table head (row1, col1)
            </th>
            <th>
                table head (row1, col2)
            </th>
            <th>
                table head (row1, col3)
            </th>
        </tr>
        <tr>
            <td>
                table data (row1, col1)
            </td>
            <td>
                table data (row1, col2)
            </td>
            <td>
                table data (row1, col3)
            </td>
        </tr>
        <tr>
            <td>
                table data (row2, col1)
            </td>
            <td>
                table data (row2, col2)
            </td>
            <td>
                table data (row2, col3)
            </td>
        </tr>
    </table>
</body>
</html>