仅css表格内边框答案

【问题标题】：css table inner border only仅css表格内边框
【发布时间】：2011-10-11 19:23:33
【问题描述】：

如何创建一个没有外边框但只有内边框的表格。 this one 之类的东西（见页面右下角）。我知道我可以像他们一样手动创建它，我的意思是给每个 td 一个类，但是没有更好的方法来实现这一点吗？

【问题讨论】：

【解决方案1】：

不，他们不是那样做的，他们做得很好！ :)

这会从单元格中删除右边框：

.sidebar-stats td:last-child, .sidebar-stats th:last-child {
    border-right: 0 none;
}

（同样的方法你可以去掉最后一行的底部边框。你可以使用 Firebug 来分析他们的 CSS，很有帮助！）

【讨论】：

@Shaokan: :last-child 仅适用于 IE9 及更高版本。值得指出的是，网站不必在每个浏览器中看起来都一样。这只是一个很小的外观问题，因此可以让它在 IE7/8 上滑动。
嗯，是的，我同意。例如，我更喜欢使用 -webkit-border-radius 而不是使用 div 和图像来创建圆角，但我仍然只是要求确定 :) 谢谢！
@Shaokan - 如果你想支持 IE7/8，你可以切换边框的一侧，因为 IE7/8 可能不适用于last-child，但它们确实支持first-child，所以可以使用这种技术。哦，还有其他评论，对于 IE7/8 中与 CSS 兼容的圆角，请参阅 CSS3Pie

【解决方案2】：

这是一个适用于所有浏览器的解决方案，但需要您将 CSS 类添加到表中最右边和最底部的 <td>（而不是必须为每个 <td> 提供一个类）

<table>
    <tr><td class="inner">text</td><td class="inner right">text</td></tr>
    <tr><td class="inner bottom">text</td><td class="inner bottom right">text</td></tr>
</table>

.inner {
    border-bottom: 1px solid #CCC;
    border-right: 1px solid #CCC;    
}

.right {
    border-right: 0;   
}

JSFiddle：http://jsfiddle.net/HS4nQ/3/

【讨论】：

谢谢你的努力 :) 实际上，这就是我在问这个问题时提到的，如果有其他方法可以做到这一点而不是这种方式 :) 不过，+1 为你的努力跨度>

【解决方案3】：

您可以将td 元素设置为具有边框的样式，然后将border:0 分配给您的表格，并确保将border-collapse:collapse 也添加到表格中。最后应该是这样的：

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

td {
border:1px gray solid;
border-collapse:collapse;
}

【讨论】：

【解决方案4】：

这是 :first-child 变体：

http://jsfiddle.net/6Z7R9/

table.mytable > * > tr > th,
table.mytable > * > tr > td {
  border-left: 10px solid red;
  border-top:  10px solid red;
}

table.mytable > * > tr > th,
table.mytable > * > tr > td:first-child {
  border-left: none;
}

table.mytable > *:first-child > tr:first-child > th,
table.mytable > *:first-child > tr:first-child > td {
  border-top: none;
}

【讨论】：