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

debugcn 发表于 Dev

唐阮

我的目标是消除特定表格单元格（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-bottomCSS将现在的工作。

工作片段：

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。