表格右边框（bootstrap + 自定义 css）答案

【问题标题】：Table right border (bootstrap + custom css)表格右边框（bootstrap + 自定义 css）
【发布时间】：2013-10-08 21:29:43
【问题描述】：

我正在使用 bootstrap 2.3 版本和一些自定义 CSS 样式。我遇到了下一个问题：当我尝试将右边框添加到行中的最后一个 td 时，它不会显示。但是当我缩放浏览器窗口或将宽度设置为 2px 时会显示它。我使用 chrome，但在 Firefox 中似乎存在同样的问题。

Jsfiddle 示例：http://jsfiddle.net/Ct7dC/

CSS：

    table.entity-table > tbody > tr > td:last-child {
        border-right: 1px solid #DDD; /* It works only if I set 2px width. Also works with 1px width but if I zoom browser window */
    }

还注意到，当我缩放页表时，左右边框变得不直

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

对于右边框不平滑是因为它的顶部没有边框的额外宽度（它只是没有边框），因为该行获得了一些额外的宽度，因为右边框没有内联边框.您可以通过将 th 也设置为边框来解决此问题。

table.entity-table > thead > tr > th 
{
    background-color: #DDD;
    color: #000;
    border: 1px solid #DDD;
}

jsFiddle

现在是 Ubuntu 问题。不知道你用的是不是chrome的变种（比如chromium）？

编辑

小提琴也适用于铬窗，所以肯定需要做一些宽度 ubuntu。

【讨论】：

我不给表格本身添加边框的原因是因为我还实现了表格行选择 - 当我选择一行时（通过点击它）我展开该行（实际上显示另一个隐藏行）并显示一些信息。但展开的行必须有其他边框。当我设置这个边框时，我得到 2px 宽度：一个来自表格，一个来自行。我希望你明白我的意思，很难把它放在 jsfiddle 中
你能提供一个小的 html 示例吗，因为不应该工作的边框（仅当 2px 时）实际上对我来说很好。
它在我的 jsfiddle 示例中有效吗？它在我的浏览器中不起作用jsfiddle.net/Ct7dC
是的，我可以看到右边框。看看是不是有什么东西挡住了边界。顺便说一句，我也在使用 chrome。
检查我的更新，希望这就是你所说的不“直”的意思。

【解决方案2】：

像这样 demo

css

table.entity-table > tbody > tr > td {
    vertical-align: middle;
border-left: 1px solid #DDD;
}

【讨论】：

有什么区别？