使用 border-collapse:separate 时如何删除第一个 html 表格行上方的空间？

问题描述 投票：0回答：1

我正在使用 

border-collapse: separate
属性来添加表格行之间的间距，并且我想删除第一个表格行上方的间距。最好的方法是什么？

这就是我的桌子现在的样子。

enter image description here

下面是我的代码

<!DOCTYPE html>
<html>
<head>
    <title>Table</title>
    <style>
        .table-container {
            width: 400px;
            background-color: grey;
            padding: 0px 10px 10px 10px;
        }

        table { 
            border-collapse: separate;
            border-spacing: 0px 7px; 
            width: 100%;
        } 
                
        tr { 
            background-color: #dc2626; 
            color: white; 
        } 

        td {
            padding: 5px;
        }

        tbody tr td:first-child {
            border-top-left-radius: 6px;
            border-bottom-left-radius: 6px;
        }

        tbody tr td:last-child {
            border-top-right-radius: 6px; 
            border-bottom-right-radius: 6px;
        }
    </style>
</head>
<body>
    <div class="table-container">
        <table>
            <tbody>   
                <tr><td>value 1</td><td>value2</td></tr> 
                <tr><td>value3</td><td>value4</td></tr> 
            </table></tbody>
        </table>
    </div>
    <script>
    </script>
</body>
</html>

我尝试使用 

border-collapse: collapse
属性并设置 
border-bottom
，这成功地删除了第一行上方的间距，但是，圆角不起作用。下面是代码示例。

<!DOCTYPE html>
<html>
<head>
    <title>Table</title>
    <style>
        .table-container {
            width: 400px;
            background-color: grey;
            padding: 0px 10px 10px 10px;
        }

        table { 
            border-collapse: collapse;
            width: 100%;
        } 
                
        tr { 
            background-color: #dc2626; 
            color: white; 
            border-bottom: 7px solid grey;
        } 

        td {
            padding: 5px;
        }

        tbody tr td:first-child {
            border-top-left-radius: 6px;
            border-bottom-left-radius: 6px;
        }

        tbody tr td:last-child {
            border-top-right-radius: 6px; 
            border-bottom-right-radius: 6px;
        }
    </style>
</head>
<body>
    <div class="table-container">
        <table>
            <tbody>   
                <tr><td>value 1</td><td>value2</td></tr> 
                <tr><td>value3</td><td>value4</td></tr> 
            </table></tbody>
        </table>
    </div>
    <script>
    </script>
</body>
</html>

有没有办法同时实现这两个目标 - 删除第一行上方的间距并在所有表格行上设置圆角？

html css html-table
1个回答
0
投票

属性 

border-spacing: 0px 7px;
负责行之间的空间以及第一行上方的空间。

根据我尝试的几种方法，您可以尝试通过以下方式消除第一行上方的空格：

  1. 删除
    border-spacing: 0px 7px;
    样式
  2. 将 
    margin-top: -7px
    添加到表或表容器中。

*解决方案1请参见下面的示例；

<!DOCTYPE html>
<html>
<head>
    <title>Table</title>
    <style>
        .table-container {
            width: 400px;
            background-color: grey;
            padding: 0px 10px 10px 10px;
        }

        table { 
            border-collapse: separate;
            width: 100%;
        } 
                
        tr { 
            background-color: #dc2626; 
            color: white; 
        } 

        td {
            padding: 5px;
        }

        tbody tr td:first-child {
            border-top-left-radius: 6px;
            border-bottom-left-radius: 6px;
        }

        tbody tr td:last-child {
            border-top-right-radius: 6px; 
            border-bottom-right-radius: 6px;
        }
    </style>
</head>
<body>
    <div class="table-container">
        <table>
            <tbody>   
                <tr><td>value 1</td><td>value2</td></tr> 
                <tr><td>value3</td><td>value4</td></tr> 
            </table></tbody>
        </table>
    </div>
    <script>
    </script>
</body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.