如何在html css中强制或将垂直滚动条带到前面

Question

我想把这个vertical scroll bar带到前面。这是图像。 我不知道如何设置它。

更新

我做了一个工作，但错误的部分是items文本元素没有隐藏在标题后面。这是我的fiddle

＆＃13;

＆＃13;

.container
{
  position: absolute;
  background: lightblue;
  height: 100%;
  width: 90%;
}

.table-header
{
  position: absolute;
  height: 25px;
  width: 100%;
  background: red;
}

.table-body
{
    position: relative;
    padding-top: 25px;
    overflow: auto;
    height: 30%;
}

.table
{
  table-layout: fixed;
}

＆＃13;

<div class="container">
  <div class="table-header">
    <table class="table">
      <thead>
        <th>
          Header
        </th>
      </thead>
    </table>
  </div>
  <div class="table-body">
    <table class="table">
      <tbody>
        <tr>
          <td>
            Item 1
          </td>
        </tr>
        <tr>
          <td>
            Item 2
          </td>
        </tr>
        <tr>
          <td>
            Item 3
          </td>
        </tr>
        <tr>
          <td>
            Item 4
          </td>
        </tr>
        <tr>
          <td>
            Item 5
          </td>
        </tr>
        <tr>
          <td>
            Item 6
          </td>
        </tr>
        <tr>
          <td>
            Item 7
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

<强>更新

您需要将padding-top:25px添加到margin-top:25

，而不是添加.table-body

这应该有效。将z-index添加到.table-header将解决问题。

.container
{
  position: absolute;
  background: lightblue;
  height: 100%;
  width: 90%;
}

.table-header
{
  position: absolute;
  height: 25px;
  width: 100%;
  z-index:1000; 
  background: red;
}

.table-body
{
    position: relative;
    margin-top: 25px;
    overflow: auto;
    height: 30%;
}

.table
{
  table-layout: fixed;
}

<div class="container">
  <div class="table-header">
    <table class="table">
      <thead>
        <th>
          Header
        </th>
      </thead>
    </table>
  </div>
  <div class="table-body">
    <table class="table">
      <tbody>
        <tr>
          <td>
            Item 1
          </td>
        </tr>
        <tr>
          <td>
            Item 2
          </td>
        </tr>
        <tr>
          <td>
            Item 3
          </td>
        </tr>
        <tr>
          <td>
            Item 4
          </td>
        </tr>
        <tr>
          <td>
            Item 5
          </td>
        </tr>
        <tr>
          <td>
            Item 6
          </td>
        </tr>
        <tr>
          <td>
            Item 7
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Answer 2

由于滚动条位于您的桌面上，因此您无法在表格标题的顶部设置滚动条，也无法在表格标题下方放置表格。你最好的选择是让它从标题的顶部偏移：

因此，请更改表格主体的当前CSS：

.table-body
{
    position: relative;
    overflow: auto;
    height: 30%;
    margin-top: 25px;
}

请参阅此fiddle。

Answer 3

您可以使用header将z-index放在前面，之后只需将标题的宽度调整为滚动条。

.container
{
  position: absolute;
  background: lightblue;
  height: 100%;
  width: 90%;
}

.table-header
{
  position: absolute;
  height: 25px;
  width: 96.8%;
  background: red;
  z-index:1;
}

.table-body
{
    position: relative;
    padding-top: 25px;
    overflow: auto;
    height: 30%;
}

.table
{
  table-layout: fixed;
}

<div class="container">
  <div class="table-header">
    <table class="table">
      <thead>
        <th>
          Header
        </th>
      </thead>
    </table>
  </div>
  <div class="table-body">
    <table class="table">
      <tbody>
        <tr>
          <td>
            Item 1
          </td>
        </tr>
        <tr>
          <td>
            Item 2
          </td>
        </tr>
        <tr>
          <td>
            Item 3
          </td>
        </tr>
        <tr>
          <td>
            Item 4
          </td>
        </tr>
        <tr>
          <td>
            Item 5
          </td>
        </tr>
        <tr>
          <td>
            Item 6
          </td>
        </tr>
        <tr>
          <td>
            Item 7
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>