Question

我目前正在制作一个将填充超过500条记录并且有很多标题的表格。我已经设法完成大部分工作，但问题是我似乎无法使页眉和页脚水平滚动表以及粘贴页眉/页脚。

基本上：我希望页眉/页脚垂直粘贴而不是水平粘贴。这只能在CSS中使用吗？

以下是jsFiddle的链接，展示了我遇到的问题：https://jsfiddle.net/j8rd9jpj/14/

我找到了一些与我的问题类似的问题/解决方案，但它们要么没有解决，要么问题并不适用于我的情况：

Horizontal scrolling on table with fixed header

Fixed header table with horizontal scrollbar and vertical scrollbar on

我正在尝试仅使用CSS解决此问题，表格HTML已修复，我无法为页脚或标题添加额外的div。

我在想的问题是滚动条在表格内部与其外部，但我不知道如何处理这个问题

我的HTML：

<div id="main">
  <table id="tableData">
    <thead>
      <tr>
        <th>Something 1</th>
        <th>Something 2</th>
        <th>Something 3</th>
        <th>Something 4</th>
        <th>Something 5</th>
        <th>Something 6</th>
        <th>Something 7</th>
        <th>Something 8</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
        ....
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th>Something 1</th>
        <th>Something 2</th>
        <th>Something 3</th>
        <th>Something 4</th>
        <th>Something 5</th>
        <th>Something 6</th>
        <th>Something 7</th>
        <th>Something 8</th>
      </tr>
    </tfoot>
  </table>
</div>

我的CSS：

body {
  overflow: hidden;
}

#main {
  overflow: scroll;
  display: table;
  max-height: 200px;
}

#tableData {
  table-layout: fixed;
  margin: auto;
  width: 100%;
  overflow-x: auto;
}

#tableData>tbody>tr>td {
  width: 120px;
  padding: 1px 8px 8px 1px;
  word-wrap: break-word;
}

#tableData thead,
#tableData tfoot {
  display: table;
  width: 100%;
}

#tableData tbody {
  height: 100px;
  overflow: auto;
  display: block;
  width: 100%;
}

#tableData tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

#tableData th {
  min-width: 120px;
}

谢谢！

Answer 1

#tableData {
    table-layout:fixed;
    margin:auto;
    width:100%;
    overflow-x:auto;
    max-height: 200px;
    display: block;
}

#tableData > tbody > tr > td {
    width: 120px;
    padding: 1px 8px 8px 1px;
    word-wrap:break-word;
}

#tableData thead, #tableData tfoot {
    display:table;
    width:100%;
}

#tableData tbody {
  overflow: auto;
  display: block;
  width: 100%;
}

#tableData tbody tr{
  display: table;
  width: 100%;
  table-layout: fixed;
}

#tableData th {
    min-width: 120px;
}

表是水平可滚动的，但粘性页眉和页脚不是

1 个答案: