代码之家 › 专栏 › 技术社区 › Richard Knop

CSS-仅在表内有边框

border html-table xhtml css html

179

Richard Knop · 技术社区 · 15 年前

我正试图弄清楚如何只在表中添加边框。当我这样做的时候:

table {
    border: 0;
}
table td, table th {
    border: 1px solid black;
}

边框在整个表格周围,也在表格单元格之间。我要实现的是在表格单元格周围的表格中仅具有边框(表格周围没有外部边框)。

下面是我用于表的标记(尽管我认为这并不重要):

<table>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
    </tr>
    <tr>
        <td>Cell (1,1)</td>
        <td>Cell (1,2)</td>
    </tr>
    <tr>
        <td>Cell (2,1)</td>
        <td>Cell (2,2)</td>
    </tr>
    <tr>
        <td>Cell (3,1)</td>
        <td>Cell (3,2)</td>
    </tr>
</table>

以下是我应用于大多数表格的一些基本样式:

table {
    border-collapse: collapse;
    border-spacing: 0;
}

8 回复 | 直到 15 年前

187

theIV 9 年前

如果你在做我认为你想做的事情,你会需要更多这样的事情:

table {
  border-collapse: collapse;
}
table td, table th {
  border: 1px solid black;
}
table tr:first-child th {
  border-top: 0;
}
table tr:last-child td {
  border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
  border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
  border-right: 0;
}

jsFiddle Demo

问题是,您在所有单元格周围设置了一个“完整边框”,使其看起来像是整个表周围都有边框。

干杯。

编辑:关于这些伪类的更多信息可以在 quirksmode 而且,正如预期的那样,在IE支持方面,您几乎是S.O.L.。

179

user1318135 12 年前

这对我很有用:

table {
    border-collapse: collapse;
    border-style: hidden;
}

table td, table th {
    border: 1px solid black;
}

view example ...

在FF 3.6和Chromium 5.0中测试,IE缺乏支撑;来自 W3C :

“边框样式”为“隐藏”的边框优先于所有其他冲突边框。具有此值的任何边框都将禁止此位置的所有边框。

TCN 9 年前

一个非常 简单的 达到预期效果的方法:

<table border="1" frame="void" rules="all">
    <tr>
        <td>1111</td>
        <td>2222</td>
        <td>3333</td>
    </tr>
    <tr>
        <td>4444</td>
        <td>5555</td>
        <td>6666</td>
    </tr>
</table>

maja 10 年前

由于与IE7的兼容性,IE8建议使用第一个孩子而不是最后一个孩子来执行此操作:

table tr td{border-top:1px solid #ffffff;border-left:1px solid #ffffff;}

table tr td:first-child{border-left:0;}

table tr:first-child td{border-top:0;}

您可以在以下网址了解CSS 2.1伪类: http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx

dalgard 10 年前

对于普通的表标记,这里有一个适用于浏览器堆栈上所有设备/浏览器的简短解决方案,但IE 7和以下版本除外:

table { border-collapse: collapse; }

td + td,
th + th { border-left: 1px solid; }
tr + tr { border-top: 1px solid; }

对于IE 7支持,添加以下内容:

tr + tr > td,
tr + tr > th { border-top: 1px solid; }

这里可以看到一个测试用例: http://codepen.io/dalgard/pen/wmcdE

Rufinus 15 年前

这应该有效:

table {
 border:0;
}

table td, table th {
    border: 1px solid black;
    border-collapse: collapse;
}

编辑:

我刚试过,没有桌边。但是如果我设置了一个表格边框,它就会被边框折叠消除。

这是测试文件:

<html>
<head>
<style type="text/css">
table {
    border-collapse: collapse;
    border-spacing: 0;
}


table {
    border: 0;
}
table td, table th {
    border: 1px solid black;
}


</style>
</head>
<body>
<table>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
    </tr>
    <tr>
        <td>Cell (1,1)</td>
        <td>Cell (1,2)</td>
    </tr>
    <tr>
        <td>Cell (2,1)</td>
        <td>Cell (2,2)</td>
    </tr>
    <tr>
        <td>Cell (3,1)</td>
        <td>Cell (3,2)</td>
    </tr>
</table>

</body>
</html>

TwoFaceZ 12 年前

不用CSS就可以了 <TABLE BORDER=1 RULES=ALL FRAME=VOID>

代码来自: HTML CODE TUTORIAL

bcr 10 年前

将边框添加到每个单元格:

table > tbody > tr > td { border: 1px solid rgba(255, 255, 255, 0.1); }

删除第一行中所有单元格的上边框:

table > tbody > tr:first-child > td { border-top: 0; }

删除第一列中单元格的左边框:

table > tbody > tr > td:first-child { border-left: 0; }

删除最后一列中单元格的右边框:

table > tbody > tr > td:last-child { border-right: 0; }

删除最后一行单元格的下边框:

table > tbody > tr:last-child > td { border-bottom: 0; }

http://jsfiddle.net/hzru0ytx/