Question

我想在表格的每一列之间添加空格，但无法这样做， - 就像每个下划线之间的差距一样。

我看过这些帖子https://www.bootply.com/PN8edIkglD，但无法修复

这是我试过的代码

.rbcrosstab #CR > tbody > tr > td:nth-child(1) {
    border-bottom: 4px solid #005691 !important;
    height: 10px;
    padding-top: 5px;
} 
.rbcrosstab #CR > tbody > tr > td:nth-child(2) {
    border-bottom: 4px solid #24A3CC !important;
    height: 10px;
    padding-top: 5px;
} 
.rbcrosstab #CR > tbody > tr > td:nth-child(3) {
    border-bottom: 4px solid #88BB6C !important;
    height: 10px;
    padding-top: 5px;
}

Answer 1

使用伪元素：after后创建一个单独的元素。边界底部难以做到这一点。然后使用calc（）获取宽度。希望有所帮助，祝你好运！

<html>
    <head>
        <style>
            thead td:after {
                background: red;
                content: '';
                width: calc(100% - 5px);
                height: 3px;
                display: block;
            }
        </style>
    </head>
    <body> 
        <table>
            <thead>
                <tr>
                    <td>Volcano Name</td>
                    <td>Location</td>
                    <td>Last Major Eruption</td>
                    <td>Type of Eruption</td>
                </tr>
            </thead>
            <tr>
                <td>Mt. Lassen</td>
                <td>California</td>
                <td>1914-17</td>
                <td>Explosive Eruption</td>
            </tr>
            <tr>
                <td>Mt. Hood</td>
                <td>Oregon</td>
                <td>1790s</td>
                <td>Pyroclastic flows and Mudflows</td>
            </tr>
            <tr>
                <td>Mt .St. Helens</td>
                <td>Washington</td>
                <td>1980</td>
                <td>Explosive Eruption</td>
            </tr>
        </table>    
    </body>
</html>

在每列之间添加空格下划线css

1 个答案: