隐藏表格，HTML的特定行的边框CSS

  • Z时代
  • 2024-01-10
  • 分类：问答

我试图摆脱此表上特定行中的边框。我想要男士和品牌Armada的行周围的边框，但没有中间botder行。出于某种原因，我无法使用tr类来摆脱它。我在做什么错误？隐藏表格，HTML的特定行的边框CSS

table,  
tr,  
td,  
th {  
    border: 1px solid;  
    border-collapse: collapse;  
}  
.noBorder {  
    border: 0;  
}

<table>  
    <tr class="noBorder">  
    <th>Men</th>  
    <th></th>  
    <th></th>  
    <th></th>  
    <th></th>  
    </tr>  
    <tr>  
    <th>Brand</th>  
    <th>Model</th>  
    <th>Waist</th>  
    <th>Lengths</th>  
    <th>Quick Description </th>  
    </tr>  
    <tr class="noBorder">  
    <th>Armada</th>  
    <th></th>  
    <th></th>  
    <th></th>  
    <th></th>  
    </tr>  
    <tr>  
    <td>Armada</td>  
    <td>Tracer 88</td>  
    <td>88</td>  
    <td>162, 172</td>  
    <td>Cut with an 88mm waist width and Armada s snow-shedding Tapertop topsheet to minimize added weight from snow buildup, the Armada Tracer 88 Skis travel swiftly and efficiently uphill while the EST All-Mtn Rocker provides versatile performance on the  
     journey down.</td>  
    </tr>

回答：

你申请边境tr和th/td。因此从tr中删除边界是不够的。你也需要从th/td删除它，所以你可以调整你的CSS是这样的：

table,  
tr,  
td,  
th {  
    border: 1px solid;  
    border-collapse: collapse;  
}  
.noBorder {  
    border: 0;  
}  
.noBorder th,  
.noBorder td {  
    border: 0;  
}

<table>  
    <tr class="noBorder">  
    <th>Men</th>  
    <th></th>  
    <th></th>  
    <th></th>  
    <th></th>  
    </tr>  
    <tr>  
    <th>Brand</th>  
    <th>Model</th>  
    <th>Waist</th>  
    <th>Lengths</th>  
    <th>Quick Description </th>  
    </tr>  
    <tr class="noBorder">  
    <th>Armada</th>  
    <th></th>  
    <th></th>  
    <th></th>  
    <th></th>  
    </tr>  
    <tr>  
    <td>Armada</td>  
    <td>Tracer 88</td>  
    <td>88</td>  
    <td>162, 172</td>  
    <td>Cut with an 88mm waist width and Armada s snow-shedding Tapertop topsheet to minimize added weight from snow buildup, the Armada Tracer 88 Skis travel swiftly and efficiently uphill while the EST All-Mtn Rocker provides versatile performance on the  
     journey down.</td>  
    </tr>

另一个解决方案是使用colspan避免增加空细胞：

table,  
tr,  
td,  
th {  
    border: 1px solid;  
    border-collapse: collapse;  
}  
.noBorder {  
    border: 0;  
}

<table>  
    <tr class="noBorder">  
    <th colspan=5>Men</th>  
    </tr>  
    <tr>  
    <th>Brand</th>  
    <th>Model</th>  
    <th>Waist</th>  
    <th>Lengths</th>  
    <th>Quick Description </th>  
    </tr>  
    <tr class="noBorder">  
    <th colspan=5>Armada</th>  
    </tr>  
    <tr>  
    <td>Armada</td>  
    <td>Tracer 88</td>  
    <td>88</td>  
    <td>162, 172</td>  
    <td>Cut with an 88mm waist width and Armada s snow-shedding Tapertop topsheet to minimize added weight from snow buildup, the Armada Tracer 88 Skis travel swiftly and efficiently uphill while the EST All-Mtn Rocker provides versatile performance on the  
     journey down.</td>  
    </tr>

以上是 隐藏表格，HTML的特定行的边框CSS 的全部内容， 来源链接： utcz.com/qa/258397.html

回到顶部