那些遇到过的问题

如何用溢出滚动设置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 次

最近记录：

5 年，11 月 前
"位置:粘;" 不工作的CSS和HTML 130
溢出:叠加在Firefox中不起作用 39
更多相关链接
相关归档
如何在没有重定向的情况下提交html表单？ 81
如何设置intellij idea多语言项目 41
从无序列表<ul>中删除"项目符号" 40
如何在ASP.NET文本框中强制输入大写？ 32
Google+ signinCallback两次致电并失去了authresult 29
为什么/**/comments在样式表中起作用,但//注释不起作用？ 24
Bootstrap 3可折叠侧边栏 21
使用CSS垂直居中点 17
从锚内部的跨度中删除下划线 17
IE11浏览器中的<input type ="file">定位问题 15
难疑归档
如何检查文件是否存在而没有例外？ 5290
如何让Git使用我选择的编辑器进行提交？ 2362
什么时候使用自我超过$？ 1948
ListView中的图像延迟加载 1881
如何检查SQL Server表中是否存在列？ 1792
如何在Java中拆分字符串 1564
将JavaScript字符串转换为全部小写？ 1260
六角透明的颜色 1219
你如何重命名Git标签？ 1162
如何使用Python连接MySQL数据库？ 1117