如何修复表格中div标签的position

Question

我在迭代中有一个表 header 的下面 div 标签，它给出 output 作为代码下方的图像

<th>
    <div>{sData.visitName}</div>
</th>

图片

现在我需要修复这个 div 标签的 position 只针对 y 轴而不是 x 轴，但是当我修复它的 position 它将成为两个轴的修复，如果可能的话，有人可以建议吗？

Answer 1

这是你想要的？

html

<div class="fixed-header-table">
  <header>
    <table>
      <tr>
        <th>headline1</th>
        <th>headline2</th>
        <th>headline3</th>
        <th>headline4</th>
        <th>headline5</th>
      </tr>
    </table>
  </header>

  <div class="content">
    <table>
      <tr>
        <td>val1</td>
        <td>val2</td>
        <td>val3</td>
        <td>val4</td>
        <td>val5</td>
      </tr>
      <tr>
        <td>val1</td>
        <td>val2</td>
        <td>val3</td>
        <td>val4</td>
        <td>val5</td>
      </tr>
      <tr>
        <td>val1</td>
        <td>val2</td>
        <td>val3</td>
        <td>val4</td>
        <td>val5</td>
      </tr>
      <tr>
        <td>val1</td>
        <td>val2</td>
        <td>val3</td>
        <td>val4</td>
        <td>val5</td>
      </tr>
      <tr>
        <td>val1</td>
        <td>val2</td>
        <td>val3</td>
        <td>val4</td>
        <td>val5</td>
      </tr>
      <tr>
        <td>val1</td>
        <td>val2</td>
        <td>val3</td>
        <td>val4</td>
        <td>val5</td>
      </tr>
    </table>
  </div>
</div>

CSS

.fixed-header-table {
  /*
  500px (5 columns a 100px) + 20px extra for the scroll-bar.
  This is kind of a random value because the scroll bar
  has a different width depending on the operating system
  and browser. It is probably better to calculate this using js.
  */
  width: 520px;
}

th,
td {
  /*
  If you need this to be different for each column you have
  to set the value accordingdly for each column separately.
  If you need the width to be dynamic use js to calculate it.
  */
  width: 100px;
}

th {
  text-align: left; /*default is center*/
}

header {
  /*
  same value as the scroll bar width - this makes sure
  the header is not wider than the content, since it has
  no scroll-bar
  */
  padding-right: 20px;
}

.content {
  overflow-y: auto;
  height: 90px; /*this is set to demonstrate scrolling behavior*/
}

.content table {
  /*
  without setting an explicit width the tables will use
  the whole width available and thus the header and content
  columns will not be aligned properly
  */
  width: 500px;
}