Question

我正在加载一个表，然后在表加载后我想在两个特定的行上放置一个边框。每次加载表时，它们始终是相同的行。我下面的代码可以工作，但是在表行之间创建的默认换行符会阻止任何小于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执行时不起作用

Answer 1

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

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

Answer 2

你没有得到预期的1px边框，因为每个td（边框顶部）都应用了css。

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

所以你必须手动从第3行移除boder 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

Answer 3

只需添加一些css

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

}

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

FIDDLE

jQuery - 更改特定行的边框

3 个答案: