在使用table - borders类时，如何使某些表单元格边框消失？

Question

我的目标是消除特定表单元格(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类还添加了一个边框。

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

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>

​