如何设置身体高度溢出滚动

我面临的问题，而设置高度宽度溢出滚动。

<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>

在这里参观我的小提琴

我想要表B像表A一样溢出滚动。

任何帮助都将不胜感激。

非常感谢, M。

当前回答

我猜你要做的是，保持标题固定，滚动正文内容。你可以滚动内容到2个方向:

水平:你不能水平滚动内容，除非你使用滑块(例如jQuery滑块)。我建议在这种情况下避免使用表格。 vertical:使用tbody标记将无法实现这一点，因为分配display:block或display:inline-block将破坏表的布局。

下面是一个使用divs: JSFiddle的解决方案

HTML:

<div class="wrap_header">
    <div class="column">
        Name
    </div>
    <div class="column">
        Phone
    </div>
    <div class="clearfix"></div>
</div>
<div class="wrap_body">
    <div class="sliding_wrapper">
        <div class="serie">
            <div class="cell">
                AAAAAA
            </div>
            <div class="cell">
                323232
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="serie">
            <div class="cell">
                BBBBBB
            </div>
            <div class="cell">
                323232
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="serie">
            <div class="cell">
                CCCCCC
            </div>
            <div class="cell">
                3435656
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

CSS:

.wrap_header{width:204px;}
.sliding_wrapper,
.wrap_body {width:221px;}
.sliding_wrapper {overflow-y:scroll; overflow-x:none;}
.sliding_wrapper,
.wrap_body {height:45px;}
.wrap_header,
.wrap_body {overflow:hidden;}
.column {width:100px; float:left; border:1px solid red;}
.cell {width:100px; float:left; border:1px solid red;}

/**
 * @info Clearfix: clear all the floated elements
 */
.clearfix:after {
    visibility:hidden;
    display:block;
    font-size:0;
    content:" ";
    clear:both;
    height:0;
}
.clearfix {display:inline-table;}

/**
 * @hack Display the Clearfix as a block element
 * @hackfor Every browser except IE for Macintosh
 */
    /* Hides from IE-mac \*/
    * html .clearfix {height:1%;}
    .clearfix {display:block;}
    /* End hide from IE-mac */

解释:

您有一个包含所有数据的滑动包装器。

注意事项:

.wrap_header{width:204px;}
.sliding_wrapper,
.wrap_body {width:221px;}

有17px的差异，因为我们需要考虑滚动条的宽度。

2014-06-02 08:19:44

其他回答

Webkit似乎在内部使用display: table-row-group作为tbody标记。目前有一个设置高度的错误:https://github.com/w3c/csswg-drafts/issues/476

希望这个问题能很快得到解决。

2018-02-27 14:57:59

更改第二个表代码，如下所示。

<table style="border: 1px solid red;width:300px;display:block;">
<thead>
    <tr>
        <td width=150>Name</td>
        <td width=150>phone</td>
    </tr>
</thead>
<tbody style='height:50px;overflow:auto;display:block;width:317px;'>
    <tr>
        <td width=150>AAAA</td>
        <td width=150>323232</td>
    </tr>
    <tr>
        <td>BBBBB</td>
        <td>323232</td>
    </tr>
    <tr>
        <td>CCCCC</td>
        <td>3435656</td>
    </tr>
</tbody>
</table>

JSFIDDLE演示

2014-06-02 07:54:11

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

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

  thead tr th {
    position: sticky;
    top: 0;
  }
}

<div class="scrollable-table-wrapper">
  <table class="table">
    <thead>...</thead>
    <tbody>...</tbody>
  </table>
</div>

在Bootstrap v3上测试

2020-03-27 03:19:10

我在为我的项目寻找同样的解决方案。我是这么做的。数据取自上面的一个答案，用于演示。

.tableContainer { max-height: 150px; overflow-y: scroll; padding: 0; margin: 0; border: 1px solid black; width: 100%; } table { width: 100%; } thead { position: sticky; top: 0px; background-color: white; } /* for styling only */ td { border: 1px solid black; } <div class="tableContainer"> <table> <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> </div>

2022-09-12 12:43:53