使用 table 边框 class 时如何使某些 table 单元格边框消失？

Question

我的目标是消除特定 table 单元格 (td) 的上下边框。我能够移除内边框，但顶部和底部边框仍然存在。

这是我的html代码

<div class="container">
  <div class="row">
    <table class="table table-bordered">
        <tbody>
            <tr>
                <th class="w-8">Label 1</th>
                <td class="w-40"><input type="text"></td>
                <td class="w-2 no-top-bottom"></td>
                <th class="w-8">Label 2</th>
                <td class="w-40"><input type="text"></td>
            </tr>
            <tr>
                <th class="w-8">Label 1</th>
                <td class="w-40"><input type="text"></td>
                <td class="w-2 no-top-bottom"></td>
                <th class="w-8">Label 2</th>
                <td class="w-40"><input type="text"></td>
            </tr>
            <tr>
                <th class="w-8">Label 1</th>
                <td class="w-40"><input type="text"></td>
                <td class="w-2 no-top-bottom"></td>
                <th class="w-8">Label 2</th>
                <td class="w-40"><input type="text"></td>
            </tr>
            <tr>
                <th class="w-8">Label 1</th>
                <td class="w-40"><input type="text"></td>
                <td class="w-2 no-top-bottom"></td>
                <th class="w-8">Label 2</th>
                <td class="w-40"><input type="text"></td>
            </tr>
        </tbody>
    </table>
  </div>
</div>

这是我的css风格

table td {
    position: relative;
}

table  input {

    height: 100%;
    width: 100%;
    
}

.w-4 {
    width: 4%;
}

.w-8 {
    width: 8%;
}

.w-10 {
    width: 10%;
}

.w-40 {
    width: 40%;
}

.no-top-bottom {
    border-top: none !important;
    border-bottom: none !important;
}

我的问题是顶部和底部的 td 元素仍然有边框。就像下图一样。我也想删除标记为黄色的边框。

Answer 1

您正在删除单元格的边框，但 <table> 上的 .table-bordered class 也添加了边框。

删除 table 的边框将起作用：

table.table-bordered { border:none;}

.table-bordered class 仍会为所有单元格添加边框，但不会在 table 的外部强制添加边框，因此您的 .no-top-bottom CSS 现在可以使用了。

工作片段：

table.table-bordered { border:none;}

table td {
    position: relative;
}

table  input {

    height: 100%;
    width: 100%;
    
}

.w-4 {
    width: 4%;
}

.w-8 {
    width: 8%;
}

.w-10 {
    width: 10%;
}

.w-40 {
    width: 40%;
}

.no-top-bottom {
    border-top: none !important;
    border-bottom: none !important;
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<div class="container">
  <div class="row">
    <table class="table table-bordered">
        <tbody>
            <tr>
                <th class="w-8">Label 1</th>
                <td class="w-40"><input type="text"></td>
                <td class="w-2 no-top-bottom"></td>
                <th class="w-8">Label 2</th>
                <td class="w-40"><input type="text"></td>
            </tr>
            <tr>
                <th class="w-8">Label 1</th>
                <td class="w-40"><input type="text"></td>
                <td class="w-2 no-top-bottom"></td>
                <th class="w-8">Label 2</th>
                <td class="w-40"><input type="text"></td>
            </tr>
            <tr>
                <th class="w-8">Label 1</th>
                <td class="w-40"><input type="text"></td>
                <td class="w-2 no-top-bottom"></td>
                <th class="w-8">Label 2</th>
                <td class="w-40"><input type="text"></td>
            </tr>
            <tr>
                <th class="w-8">Label 1</th>
                <td class="w-40"><input type="text"></td>
                <td class="w-2 no-top-bottom"></td>
                <th class="w-8">Label 2</th>
                <td class="w-40"><input type="text"></td>
            </tr>
        </tbody>
    </table>
  </div>
</div>

使用 table 边框 class 时如何使某些 table 单元格边框消失？

How to make some table cell borders disappear when using the table-bordered class?

html

css

twitter-bootstrap-3