那些遇到过的问题

如何用溢出滚动设置tbody高度

Mav*_*ick 91 html css

在设置高度宽度溢出滚动时我遇到问题. 

<style> 
     tbody{
       height:50px;display:block;overflow:scroll
     }
   </style>

       <h3>Table B</h3>
    <table style="border: 1px solid red;width:300px;display:block">
        <thead>
            <tr>
                <td>Name</td>
                <td>phone</td>
            </tr>
        </thead>
        <tbody style='height:50px;display:block;overflow:scroll'>
            <tr>
                <td>AAAA</td>
                <td>323232</td>
            </tr>
            <tr>
                <td>BBBBB</td>
                <td>323232</td>
            </tr>
            <tr>
                <td>CCCCC</td>
                <td>3435656</td>
            </tr>
        </tbody>
    </table>
Run Code Online (Sandbox Code Playgroud)

在这里访问我的小提琴

我希望表B像表A一样有溢出滚动.

任何帮助将不胜感激.

非常感谢,M.

G-C*_*Cyr 192

如果要tbody显示滚动,请将其转换为block.

为了保持行为table,转而tr进入table.

要均匀喷洒细胞,使用 table-layout:fixed;

DEMO tbody滚动

HTML测试的CSS:

table ,tr td{
    border:1px solid red
}
tbody {
    display:block;
    height:50px;
    overflow:auto;
}
thead, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;/* even columns width , fix width of table too*/
}
thead {
    width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
}
table {
    width:400px;
}
Run Code Online (Sandbox Code Playgroud)

如果tbody没有显示滚动,因为内容小于height或max-height,随时设置滚动:overflow-y:scroll;.演示2

  • 警告：此解决方案会断开 thead 和 tbody 细胞网格；这意味着在大多数实际情况下，您将无法获得表格中所期望的单元格对齐方式。请注意，此解决方案使用了一种 hack 来使它们保持排序： thead { width: calc( 100% - 1em ) } (11认同)
  • 最后!我现在能够有一个固定的高度,滚动的表体,固定的标题,可调节的列宽....所有没有javascript!谢谢!! (3认同)
  • GCyrillus ：你是最亲近的。但是有一个问题。桌子宽度太高了。我们可以固定表格宽度吗？ (2认同)
  • 非常感谢@GCyrillus 它很好用！我可以建议一个提示吗？将 `overflow:auto` 替换为 `overflow-y: scroll` 以避免即使正文不需要滚动条时标题也保持 1em 左。 (2认同)

小智 43

使用滚动条到表体的简单方法

/* It is simple way to use scroll bar to table body*/

.tableBodyScroll tbody {
  display: block;
  max-height: 300px;
  overflow-y: scroll;
}

.tableBodyScroll thead,
tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
Run Code Online (Sandbox Code Playgroud) 
<table class="tableBodyScroll">
  <thead>
    <th>Invoice Number</th>
    <th>Purchaser</th>
    <th>Invoice Amount</th>
    <th>Invoice Date</th>
  </thead>
  <tbody>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
  </tbody>
</table>
Run Code Online (Sandbox Code Playgroud)

  • 远非完美,强制所有列宽度相同 (19认同)

Khe*_*dey 10

默认情况下overflow,除非你给一个并不适用于表族元素display:block来<tbody> 还你必须给一个position:relative和display: block到<thead>.检查演示.

.fixed {
  width:350px;
  table-layout: fixed;
  border-collapse: collapse;
}
.fixed th {
  text-decoration: underline;
}
.fixed th,
.fixed td {
  padding: 5px;
  text-align: left;
  min-width: 200px;
}


.fixed thead {
  background-color: red;
  color: #fdfdfd;
}
.fixed thead tr {
  display: block;
  position: relative;
}
.fixed tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: 100px;
  overflow-y: scroll;
    overflow-x: hidden;
}
Run Code Online (Sandbox Code Playgroud)

  • 不能完全正常工作。如果列名称的宽度大于列内容的宽度，则将其对齐。 (2认同)

Gil*_*gio 8

最简单的解决方案：

在 CSS 中添加以下代码：

.tableClassName tbody {
  display: block;
  max-height: 200px;
  overflow-y: scroll;
}

.tableClassName thead, .tableClassName tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.tableClassName thead {
  width: calc( 100% - 1.1em );
}
Run Code Online (Sandbox Code Playgroud)

1.1 em是滚动条的平均宽度，如有需要请修改。

bra*_*kal 8

另一种方法是将表包装在可滚动的元素中，并将标题单元格设置在顶部。

这种方法的优点是您不必更改tbody上的显示，您可以将其留给浏览器来计算列宽，同时使标头单元格宽度与数据单元格列宽保持一致。

/* Set a fixed scrollable wrapper */
.tableWrap {
  height: 200px;
  border: 2px solid black;
  overflow: auto;
}
/* Set header to stick to the top of the container. */
thead tr th {
  position: sticky;
  top: 0;
}

/* If we use border,
we must use table-collapse to avoid
a slight movement of the header row */
table {
 border-collapse: collapse;
}

/* Because we must set sticky on th,
 we have to apply background styles here
 rather than on thead */
th {
  padding: 16px;
  padding-left: 15px;
  border-left: 1px dotted rgba(200, 209, 224, 0.6);
  border-bottom: 1px solid #e8e8e8;
  background: #ffc491;
  text-align: left;
  /* With border-collapse, we must use box-shadow or psuedo elements
  for the header borders */
  box-shadow: 0px 0px 0 2px #e8e8e8;
}

/* Basic Demo styling */
table {
  width: 100%;
  font-family: sans-serif;
}
table td {
  padding: 16px;
}
tbody tr {
  border-bottom: 2px solid #e8e8e8;
}
thead {
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
}
tbody tr:hover {
  background: #e6f7ff;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="tableWrap">
  <table>
    <thead>
      <tr>
        <th><span>Month</span></th>
        <th>
          <span>Event</span>
        </th>
        <th><span>Action</span></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>January</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>February. An extra long string.</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>March</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>April</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>May</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>June</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>July</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>August</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>September</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>October</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>November</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>December</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
    </tbody>
  </table>
</div>
Run Code Online (Sandbox Code Playgroud)

  • 好想法！它不会像其他选项那样弄乱表格布局。 (9认同)
  • 提醒其他人，您需要确保没有祖先元素使用溢出。可能导致位置：粘性不起作用/sf/ask/3059495351/ (5认同)
  • FWIW，您还可以添加一个粘性底部位置为 0 的“tfoot”，它的作用就像一个魅力。很好的答案！ (2认同)

ErJ*_*Jab 5

基于这个答案，如果您已经在使用 Bootstrap，这里有一个最小的解决方案：

div.scrollable-table-wrapper {
  height: 500px;
  overflow: auto;

  thead tr th {
    position: sticky;
    top: 0;
  }
}
Run Code Online (Sandbox Code Playgroud) 
<div class="scrollable-table-wrapper">
  <table class="table">
    <thead>...</thead>
    <tbody>...</tbody>
  </table>
</div>
Run Code Online (Sandbox Code Playgroud)

在 Bootstrap v3 上测试

归档时间：

查看次数：

178876 次

最近记录：

6 年 前
"位置:粘;" 不工作的CSS和HTML 130
溢出:叠加在Firefox中不起作用 39
更多相关链接
相关归档
不寻常的textarea形状？ 272
CSS:动画与转型 136
n-child没有回应课堂 48
Favicon没有出现 33
CSS特异性,媒体查询和最小宽度 30
DIV垂直中心的CSS背景图像 23
HTML5标签在firefox 3.6.3中根本不起作用 22
定位CSS类的第二个实例 20
使用justify-content:flex-end并使用垂直滚动条 20
通过将Sizzle.js和jquery1.4.2包括在一起,我可以获得多少益处？ 17
难疑归档
如何测试空的JavaScript对象？ 2730
Git拒绝合并关于rebase的无关历史 1862
什么是控制倒置？ 1704
我如何递归grep？ 1619
如何在Vim中进行不区分大小写的搜索 1579
表命名困境:奇异与多个名称 1404
是否有"以前的兄弟"CSS选择器？ 1253
如何在正则表达式中使用变量？ 1250
如何从git存储库中删除目录？ 1138
如何将div的内容与底部对齐？ 1098