将tbody设置为可滚动

时间：2019-07-01 16:14:07

标签： html css html-table html-tbody

我正在尝试将html表设置为固定高度（大约五行），并且可以在标头固定的情况下进行滚动。我尝试将tbody设置为溢出-y：滚动，但该规则未在Chrome或Firefox中显示。我也尝试设置父div的高度。 当我将显示设置为“阻止”时，它只会缩小div的宽度。 

tbody.datatable{
     width:630px;
     height:100px;
     overflow-y: auto;
     }

我的html中是否还有其他元素阻止tbody滚动？

这是我的jsfiddle： https://jsfiddle.net/29jr5eo8/

编辑：已链接设置了display：block的解决方案-这使标题更改宽度，而我的表仍未更改高度。看来问题是在CSS计算规则中未显示class =“ divtable”。 display：block对div的高度没有影响。

3 个答案:

答案 0 :(得分：1)

表用于表格数据：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

对于布局，请使用适当的HTML标签：https://css-tricks.com/snippets/html/html5-page-structure/

您的数据表是很好地使用

元素的主要示例。放入正确的容器（如
），并设置该容器的高度（或max-height）和溢出y。

答案 1 :(得分：1)

我在here之前已经回答了这个问题。 您可以通过设置Always

来做到这一点 

position: sticky;
table thead tr th {
  background-color: white;
  position: sticky;
  top: -1px;
}

答案 2 :(得分：0)

表的不幸之处在于不支持本机溢出属性，因此您必须做一些工作才能使其正常工作。

第一步是：将tbody设置为display：block，以便我们可以应用height和overflow属性。

下一步将是：将thead＆tr设置为display：block 

.fixed_header{
    width: 400px;
    table-layout: fixed;
    border-collapse: collapse;
}

.fixed_header tbody{
  display:block;
  width: 100%;
  overflow: auto;
  height: 100px;
}

.fixed_header thead tr {
   display: block;
}
<table class="fixed_header">
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
      <th>Col 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>row 1-0</td>
      <td>row 1-1</td>
      <td>row 1-2</td>
      <td>row 1-3</td>
      <td>row 1-4</td>
    </tr>
    <tr>
      <td>row 2-0</td>
      <td>row 2-1</td>
      <td>row 2-2</td>
      <td>row 2-3</td>
      <td>row 2-4</td>
    </tr>
    <tr>
      <td>row 3-0</td>
      <td>row 3-1</td>
      <td>row 3-2</td>
      <td>row 3-3</td>
      <td>row 3-4</td>
    </tr>
    <tr>
      <td>row 4-0</td>
      <td>row 4-1</td>
      <td>row 4-2</td>
      <td>row 4-3</td>
      <td>row 4-4</td>
    </tr>
    <tr>
      <td>row 5-0</td>
      <td>row 5-1</td>
      <td>row 5-2</td>
      <td>row 5-3</td>
      <td>row 5-4</td>
    </tr>
    <tr>
      <td>row 6-0</td>
      <td>row 6-1</td>
      <td>row 6-2</td>
      <td>row 6-3</td>
      <td>row 6-4</td>
    </tr>
    <tr>
      <td>row 7-0</td>
      <td>row 7-1</td>
      <td>row 7-2</td>
      <td>row 7-3</td>
      <td>row 7-4</td>
    </tr>
  </tbody>
</table>

相关问题
最新问题