jquery - 无法在位置固定 <thead> 上设置边框属性

Question

我正在尝试制作一个粘性 <thead>在多个<tbody> HTML <table> .

问题是，引用这个jsfiddle , 我无法在 <thead> 上显示任何单元格边框与 position: fixed属性(property)。

我正在使用 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>