table 表格 td 间隙

最新推荐文章于 2024-09-04 17:00:08 发布

马卫斌

最新推荐文章于 2024-09-04 17:00:08 发布

阅读量822

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_35350009/article/details/125041565

css 专栏收录该内容

9 篇文章

订阅专栏

博客介绍了使用 CSS 去掉表格间隙的方法，包含相应的 HTML 代码和 CSS 代码，聚焦于前端开发中表格样式的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用 css 去掉表格间隙

html 代码

<!DOCTYPE html>
<html lang="en">
<head>
<title>加边框的表格(Bordered Table)</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>
    <table>
        <thead>
            <tr>
                <th>#</th>
                <th>Make</th>
                <th>Model</th>
                <th>Year</th>
            </tr>
        </thead>
    
        <tbody>
            <tr>
                <td>1</td>
                <td>Honda</td>
                <td>Accord</td>
                <td>2009</td>
            </tr>
    
            <tr>
                <td>2</td>
                <td>Toyota</td>
                <td>Camry</td>
                <td>2012</td>
            </tr>
    
            <tr>
                <td>3</td>
                <td>Hyundai</td>
                <td>Elantra</td>
                <td>2010</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

css 代码

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
td,th {
    padding: 5px;
    border:solid 1px #cccccc;
}

table{
  width: 100%;
  border: 1px solid #DCDFE6;
  border-collapse: collapse;
  border-spacing: 0;
}

table tr td{
  pading:15px;
  border: 1px solid #DCDFE6;
}