Code
2025-05-14 10:00:02

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

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

<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

其他回答

这是一个简单的方法，使用滚动条到表体

/* It is simple way to use scroll bar to table body*/ table tbody { display: block; max-height: 300px; overflow-y: scroll; } table thead, table tbody tr { display: table; width: 100%; table-layout: fixed; } <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>

2017-01-09 05:33:15

刚发现一个很酷的解决方案使用网格! 这是我用过的，效果很好:

tbody tr, thead tr {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr; // or whatever division you wanna do
}

tbody {
  height: 300px; // or whatever height
  width: 100%;
  overflow-y: auto;
  display: block;
}

演示: https://codesandbox.io/s/table-with-inner-body-scroll-hggq7x

2022-07-18 21:13:32

在我的情况下，我想有响应表的高度，而不是固定的高度像素，因为其他答案正在显示。为了做到这一点，我使用了百分比可见高度属性和溢出div包含表:

&__table-container {
  height: 70vh;
  overflow: scroll;
}

这样，表将随着窗口大小的调整而扩展。

2018-03-12 10:00:38

我猜你要做的是，保持标题固定，滚动正文内容。 你可以滚动内容到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

默认情况下，溢出不适用于表组元素，除非你给了一个display:block到<tbody>，你也必须给一个position:relative和display:block到<thead>。检查DEMO。

.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;
}
2014-06-02 08:00:05

推荐文章

aliyun

最新文章

标签

2025 code 京ICP备15047053号-1