我如何才能在表中应用边界?

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

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;
}

当前回答

一个非常简单的方法来达到你想要的效果:

<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>

2011-12-07 10:02:22

其他回答

这将在没有CSS的情况下完成所有工作 < table border =1 rules = all frame = void >

代码来自:HTML代码教程

2012-11-08 20:29:39

适用于tbody/thead/tfoot和td/th的任何组合

table.inner-border { border-collapse: collapse; border-spacing: 0; } table.inner-border > thead > tr > th, table.inner-border > thead > tr > td, table.inner-border > tbody > tr > th, table.inner-border > tbody > tr > td, table.inner-border > tfoot > tr > th, table.inner-border > tfoot > tr > td { border-bottom: 1px solid black; border-right: 1px solid black; } table.inner-border > thead > tr > :last-child, table.inner-border > tbody > tr > :last-child, table.inner-border > tfoot > tr > :last-child { border-right: 0; } table.inner-border > :last-child > tr:last-child > td, table.inner-border > :last-child > tr:last-child > th { border-bottom: 0; } <table class="inner-border"> <thead> <tr> <th>head1,1</th> <td>head1,2</td> <td>head1,3</td> </tr> <tr> <td>head2,1</td> <td>head2,2</td> <th>head2,3</th> </tr> </thead> <tr> <td>1,1</td> <th>1,2</th> <td>1,3</td> </tr> <tr> <td>2,1</td> <td>2,2</td> <td>2,3</td> </tr> <tr> <td>3,1</td> <td>3,2</td> <td>3,3</td> </tr> <thead> <tr> <th>foot1,1</th> <td>foot1,2</td> <td>foot1,3</td> </tr> <tr> <td>foot2,1</td> <th>foot2,2</th> <th>foot2,3</th> </tr> </thead> </table>

2019-06-22 10:11:20

这应该可以工作:

HTML:

<table frame="void" rules="all">

CSS:

td, th {
    border: 1px solid red;
}

2022-05-26 05:05:47

这应该可以工作:

table {
 border:0;
}

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

编辑:

我刚试过了，没有桌子边框。但如果我设置了一个表格边界，它就会被边界崩溃消除。

这是testfile:

<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>

2009-08-10 21:56:40

为每个单元格添加边框:

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/

2015-01-05 21:15:09

我如何才能在表中应用边界?

推荐文章

最新文章

标签