無法設置固定位置的邊框屬性<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>