css < tr>仅删除左右边框

mpgws1up 于 2023-04-13 发布在其他

关注(0)|答案(4)|浏览(262)

是否可以删除这些区域？（用黑色标记）

以下是我目前的CSS：

table.report { 
    border-collapse:collapse; 
}

table.report td, table.report th { 
    border:1px solid rgb(150, 150, 150);
    padding:5px; 
}

tr.title {
    border-left: 0px solid;
    border-right: 0px solid;
}

td.normal {
    min-width: 200px;
}

td.extended {
    min-width: 400px;
}

p.center {
    padding-top: 5px;
    text-align: center;
}

HTML：

<table class="report">
    <tr class="title">
        <td colspan="4"><p class="center">Solution 1</p></td>
    </tr>
    <tr>
        <td class="normal">Assured Load</td>
        <td class="normal">{PHP Returns}</td>
        <td class="extended" colspan="2">{PHP Returns}</td>
    </tr>
</table>

FIDDLE

css

来源：https://stackoverflow.com/questions/24136060/tr-removing-border-on-left-and-right-only

4条答案

按热度按时间

pgky5nke1#

现有边框应用于表格单元格，而不是行，因此将行边框设置为0px没有帮助。改为将零边框应用于单元格：

tr.title td {
    border-left: 0px solid;
    border-right: 0px solid;
}

Demo

赞(0）回复(0）举报 2023-04-13

njthzxwz2#

试试这样的方法：Link

CSS：

tr.title td:first-child {
    border-left: 0 !important;
    border-right: 0 !important;
}

赞(0）回复(0）举报 2023-04-13

lhcgjxsq3#

将样式更改为TD

FIDDLE

<td class="title" colspan="4"><p class="center">Solution 1</p></td>

tr td.title {
    border-left: 0px solid ;
    border-right: 0px solid ;
}

赞(0）回复(0）举报 2023-04-13

f45qwnt84#

另一种方法是对两个边框都使用白色（这样，您可以指定左右边框的颜色，例如红色，但在本例中，它是白色，有效地隐藏了边框）

.noleftnoright {
border-left:1px solid white;
border-right:1px solid white;
}

.noleftnoright {
border-left:1px solid white;
border-right:1px solid white;
}

.maintable{
border-collapse: collapse;
}

<table  border=1 class=maintable>
<tr><td class=noleftnoright colspan=3>Line 1
<tr><td>A<td>B<td>C

<tr><td class=noleftnoright colspan=3>Line 2

</table>

赞(0）回复(0）举报 2023-04-13

我来回答

css < tr>仅删除左右边框

4条答案

相关问题

热门标签

最新问答