使用表格边框的类时，如何使某些表格单元格边框消失？

问题描述

我的目标是消除特定表格单元格（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元素仍然有边框。就像下面的图片一样。我也想删除黄色标记的边框。

解决方法

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

从表格中删除边框将起作用：

table.table-bordered { border:none;}

.table-bordered类仍将为所有单元格添加边框，但不会在表格的外部强行添加边框，因此您的.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>