无法在固定位置上设置边框属性

Question

我正在尝试对多个<thead> HTML <tbody>进行粘性<table>。

问题在于，参考此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

我不确定为什么边框不会适用，但你可以使用box-shadow获得相同的效果，这似乎有用..

jsfiddle

＆＃13;

＆＃13;

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);

＆＃13;

body {
  height: 5000px
}

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;