jQuery - 更改特定行的边框答案

【问题标题】：jQuery - changing border of specific rowjQuery - 更改特定行的边框
【发布时间】：2014-01-22 18:58:33
【问题描述】：

我正在加载一个表格，然后在表格加载后，我想在两个特定行上放置一个边框。每次加载表时，它们总是相同的行。我在下面的代码有效，但是在表格行之间创建的默认换行符会妨碍将边框放置小于 2px。使用 2px 的边框对我来说太重了，但是使用 1px 的边框不会显示在默认的黑线上。

我正在使用的代码：

    $('#table-selections tr:eq(5)').css('border-bottom','2px dashed black');
    $('#table-selections tr:eq(5)').css('border-top','2px dashed black');
    $('#table-selections tr:eq(17)').css('border-bottom','2px dashed black');

添加边框似乎不是一种优雅的方式，并且不会超过行之间的默认线。

编辑：

fiddle

显示 1px 不起作用而 2px 起作用

【问题讨论】：

你能做一个小提琴吗？
你能做一个小提琴吗？
用小提琴编辑的帖子
请检查我的答案
我认为这与边框折叠有关（请参阅updated fiddle）。不相信我确切地知道发生了什么，但是，这种行为确实有点奇怪。猜你的 1px 边框与标准边框崩溃，标准边框胜出。

标签： jquery html css twitter-bootstrap

【解决方案1】：

我将为 2 种类型的边框使用 2 个不同的类，并在您的 jQuery 脚本中使用 addClass 和 removeClass。

您的表格 css 是否包含 border: 2px !important; ？

【讨论】：

不，我试过了，虽然使用 2px 有效，但使用 1px 没有任何作用。
也许添加 !important 到您在 jquery 脚本中添加的样式？
也试过了，发生了一些奇怪的事情大声笑：注意，只是添加了一个小小提琴来演示这个问题，

【解决方案2】：

由于在每个 td(border top) 中应用了 css，您没有得到预期的 1px 边框。

在 bootstarp.min.css 中

.table thead > tr > th, .table tbody > tr > th, .table tfoot > tr > th, .table thead > tr > td, .table tbody > tr > td, .table tfoot > tr > td {
    border-top: 1px solid #DDDDDD;
    line-height: 1.42857;
    padding: 8px;
    vertical-align: top;
}

所以你必须手动从第三行移除边框顶部

$('#table-selections tr:eq(2)').css('border-bottom', '1px dashed black');
$('#table-selections tr:eq(3) td').css('border-top', 'none');
$('#table-selections tr:eq(4)').css('border-top', '2px dashed black');

你可以看到小提琴here

【讨论】：

【解决方案3】：

只需添加一些css

.table-condensed tr{
    display:table;
    width:100%; 

}

.table-condensed td{
     width: 100px; 
}

FIDDLE

【讨论】：