无法设置固定位置的边框属性<thead>

Question

我试图通过多个<tbody> HTML <table>来粘贴<thead>。

问题在于，参考此jsfiddle，我无法在<thead>上显示任何单元格边框，并且显示position: fixed属性。

我使用Bootstrap的类table-bordered应该克隆在临时表中，但这是行不通的。我甚至尝试着为#clonedTable th专门设置属性，但它不能正常工作。

唯一发生的事情是，如果例如我设置了border: 10px solid red，克隆的<thead>有10px的透明边距（我认为这是一个不正确的渲染边距）。

我正在使用Firefox 53.0.3，但我也通过Chrome 58.0.3029.110测试了相同的结果。

有没有什么方法可以让我错过展示这些边界？

Answer 1

更新下面的CSS部分：

.table thead tr th { 
    box-shadow: 0px 0px 0px 2px red inset; 
    margin:2px; 
} 

jsfiddle

body { 
 
     height: 5000px 
 
    } 
 
    th, td { 
 
     background-color: #fff; 
 
    } 
 
    .table thead tr th { 
 
    box-shadow: 0px 0px 0px 2px red inset; 
 
    margin:2px; 
 
    }

<table class="table table-condensed table-bordered"> 
 
    <thead> 
 
    <tr> 
 
     <th>col1</th> 
 
     <th>col2</th> 
 
     <th>col3</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>test</td> 
 
     <td>test</td> 
 
     <td>test</td> 
 
    </tr> 
 
    <tr> 
 
     <td>test</td> 
 
     <td>test</td> 
 
     <td>test</td> 
 
    </tr> 
 
    <tr> 
 
     <td>test</td> 
 
     <td>test</td> 
 
     <td>test</td> 
 
    </tr> 
 
    </tbody> 
 
    <tbody> 
 
    <tr> 
 
     <td>test</td> 
 
     <td>test</td> 
 
     <td>test</td> 
 
    </tr> 
 
    <tr> 
 
     <td>test</td> 
 
     <td>test</td> 
 
     <td>test</td> 
 
    </tr> 
 
    <tr> 
 
     <td>test</td> 
 
     <td>test</td> 
 
     <td>test</td> 
 
    </tr> 
 
    </tbody> 
 
    <tbody> 
 
    <tr> 
 
     <td>test</td> 
 
     <td>test</td> 
 
     <td>test</td> 
 
    </tr> 
 
    <tr> 
 
     <td>test</td> 
 
     <td>test</td> 
 
     <td>test</td> 
 
    </tr> 
 
    <tr> 
 
     <td>test</td> 
 
     <td>test</td> 
 
     <td>test</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<div id="bottomAnchor"></div> 
 
<div id="clonedHolder"></div>

Answer 2

我不知道是什么原因边框将不适用，但可以得到同样的效果与框阴影，这似乎工作..

jsfiddle

function moveScroll() { 
 
    var realTable = $('table'); 
 
    var lastTobody = realTable.find('tbody:last-child'); 
 
    var scroll = $(window).scrollTop() + realTable.find('thead').outerHeight(); 
 
    var topLimit = realTable.offset().top; 
 
    var bottomLimit = lastTobody.offset().top + lastTobody.outerHeight(); 
 
    if (scroll > topLimit && scroll < bottomLimit) { 
 
    clonedTable = $('#clonedTable'); 
 
    if (clonedTable.length == 0) { 
 
     clonedTable = realTable.clone(); 
 
     clonedTable.attr('id', 'clonedTable'); 
 
     clonedTable.css({ 
 
     'width': realTable.width(), 
 
     'visibility': 'hidden', 
 
     'position': 'fixed', 
 
     'pointer-events': 'none', 
 
     'top': 0 
 
     }); 
 
     $('#clonedHolder').append(clonedTable); 
 
     $('#clonedTable thead').css({ 
 
     visibility: 'visible' 
 
     }); 
 
    } 
 
    } else { 
 
    $('#clonedTable').remove(); 
 
    } 
 
} 
 

 
$(window).scroll(moveScroll);

body { 
 
    height: 5000px 
 
} 
 

 
th, 
 
td { 
 
    background-color: #fff; 
 
} 
 

 
#clonedTable thead tr { 
 
    box-shadow: 0 1px 0 red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<table class="table table-condensed table-bordered"> 
 
    <thead> 
 
    <tr> 
 
     <th>col1</th> 
 
     <th>col2</th> 
 
     <th>col3</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>test</td> 
 
     <td>test</td> 
 
     <td>test</td> 
 
    </tr> 
 
    <tr> 
 
     <td>test</td> 
 
     <td>test</td> 
 
     <td>test</td> 
 
    </tr> 
 
    <tr> 
 
     <td>test</td> 
 
     <td>test</td> 
 
     <td>test</td> 
 
    </tr> 
 
    </tbody> 
 
    <tbody> 
 
    <tr> 
 
     <td>test</td> 
 
     <td>test</td> 
 
     <td>test</td> 
 
    </tr> 
 
    <tr> 
 
     <td>test</td> 
 
     <td>test</td> 
 
     <td>test</td> 
 
    </tr> 
 
    <tr> 
 
     <td>test</td> 
 
     <td>test</td> 
 
     <td>test</td> 
 
    </tr> 
 
    </tbody> 
 
    <tbody> 
 
    <tr> 
 
     <td>test</td> 
 
     <td>test</td> 
 
     <td>test</td> 
 
    </tr> 
 
    <tr> 
 
     <td>test</td> 
 
     <td>test</td> 
 
     <td>test</td> 
 
    </tr> 
 
    <tr> 
 
     <td>test</td> 
 
     <td>test</td> 
 
     <td>test</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<div id="bottomAnchor"></div> 
 
<div id="clonedHolder"></div>