html基础1：前端表格有间隔怎么删除掉

最新推荐文章于 2024-05-30 11:27:58 发布

m0_57490250

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量480

点赞数 9

文章标签：前端

本文链接：https://blog.csdn.net/m0_57490250/article/details/136353569

版权

原始的表格如下：

<table >
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>电话</th>
                <th>学校</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>18</td>
                <td>132428888</td>
                <td>广州学院</td>
        
            </tr>
            <tr>
                <td>张三</td>
                <td>18</td>
                <td>132428888</td>
                <td>广州学院</td>
        
            </tr>
        </tbody>
        
    </table>

那么如何实现这样的表格：

则需要先给表格设置边框 border="1"

将边框间隙进行合并 border-collapse: collapse;

让边框内容居中以及设置固定宽度：table-layout: fixed; width: 400px;

以下是修改后的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>电话</th>
                <th>学校</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>18</td>
                <td>132428888</td>
                <td>广州学院</td>
        
            </tr>
            <tr>
                <td>张三</td>
                <td>18</td>
                <td>132428888</td>
                <td>广州学院</td>
        
            </tr>
        </tbody>
        
    </table>
    <style>
        table {
            margin: 100px auto;
            border-collapse: collapse;
            table-layout: fixed;
            width: 400px;
        }
        th,td {
            text-align: center;
        }
    </style>
</body>
</html>

m0_57490250

关注

9
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
html基础1：前端表格有间隔怎么删除掉

让边框内容居中以及设置固定宽度：table-layout: fixed;将边框间隙进行合并 border-collapse: collapse;则需要先给表格设置边框 border="1"
复制链接

扫一扫