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

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

<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

其他回答

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

<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

最简单的解决方案:

在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 );
}

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

2018-09-18 11:11:55

Making scrolling tables is always a challenge. This is a solution where the table is scrolled both horizontally and vertically with fixed height on tbody making theader and tbody "stick" (without display: sticky). I've added a "big" table just to show. I got inspiration from G-Cyrillus to make the tbody display:block; But when it comes to width of a cell (both in header and body), it's depending on the inside content. Therefore I added content with specific width inside each cell, both in thead and minimum first row in tbody (the other rows adapt accordingly)

.go-wrapper { overflow-x: auto; width: 100%; } .go-wrapper table { width: auto; } .go-wrapper table tbody { display: block; height: 220px; overflow: auto; } .go-wrapper table thead { display: table; } .go-wrapper table tfoot { display: table; } .go-wrapper table thead tr, .go-wrapper table tbody tr, .go-wrapper table tfoot tr { display: table-row; } .go-wrapper table th, .go-wrapper table td { white-space: nowrap; } .go-wrapper .aw-50 { min-height: 1px; width: 50px; } .go-wrapper .aw-100 { min-height: 1px; width: 100px; } .go-wrapper .aw-200 { min-height: 1px; width: 200px; } .go-wrapper .aw-400 { min-height: 1px; width: 400px; } /***** Colors *****/ .go-wrapper table { border: 2px solid red } .go-wrapper table thead, .go-wrapper table tbody, .go-wrapper table tfoot { outline: 1px solid green } .go-wrapper td { outline: 1px solid blue } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Template</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link rel="stylesheet" href="css/main.css"> </head> <body> <div class="container"> <div class="row mt-5 justify-content-md-center"> <div class="col-8"> <div class="go-wrapper"> <table class="table"> <thead> <tr> <th><div class="aw-50" ><div class="checker"><span><input type="checkbox" class="styled"></span></div></div></th> <th><div class="aw-200">Name</div></th> <th><div class="aw-50" >Week</div></th> <th><div class="aw-100">Date</div></th> <th><div class="aw-100">Time</div></th> <th><div class="aw-200">Project</div></th> <th><div class="aw-400">Text</div></th> <th><div class="aw-200">Activity</div></th> <th><div class="aw-50" >Hours</th> <th><div class="aw-50" >Pause</div></th> <th><div class="aw-100">Status</div></th> </tr> </thead> <tbody> <tr> <td><div class="aw-50"><div class="checker"><span><input type="checkbox" class="styled"></span></div></div></td> <td><div class="aw-200">AAAAA</div></td> <td><div class="aw-50" >15</div></td> <td><div class="aw-100">07.04.2020</div></td> <td><div class="aw-100">10:00</div></td> <td><div class="aw-200">Project 1</div></td> <td><div class="aw-400">Blah blah blah</div></td> <td><div class="aw-200">Activity</div></td> <td><div class="aw-50" >2t</div></td> <td><div class="aw-50" >30min</div></td> <td><div class="aw-100">Waiting</div></td> </tr> <tr> <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td> <td>BBBBB</td> <td>15</td> <td>07.04.2020</td> <td>10:00</td> <td>Project 1</td> <td>Blah blah blah</td> <td>Activity</td> <td>2t</td> <td>30min</td> <td>Waiting</td> </tr> <tr> <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td> <td>CCCCC</td> <td>15</td> <td>07.04.2020</td> <td>10:00</td> <td>Project 1</td> <td>Blah blah blah Blah blah blah</td> <td>Activity Activity Activity</td> <td>2t</td> <td>30min</td> <td>Waiting</td> </tr> <tr> <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td> <td>DDDDD</td> <td>15</td> <td>07.04.2020</td> <td>10:00</td> <td>Project 1</td> <td>Blah blah blah</td> <td>Activity</td> <td>2t</td> <td>30min</td> <td>Waiting</td> </tr> <tr> <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td> <td>EEEEE</td> <td>15</td> <td>07.04.2020</td> <td>10:00</td> <td>Project 1</td> <td>Blah blah blah</td> <td>Activity</td> <td>2t</td> <td>30min</td> <td>Waiting</td> </tr> <tr> <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td> <td>FFFFF</td> <td>15</td> <td>07.04.2020</td> <td>10:00</td> <td>Project 1</td> <td>Blah blah blah</td> <td>Activity Activity Activity</td> <td>2t</td> <td>30min</td> <td>Waiting</td> </tr> <tr> <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td> <td>GGGGG</td> <td>15</td> <td>07.04.2020</td> <td>10:00</td> <td>Project 1</td> <td>Blah blah blah</td> <td>Activity</td> <td>2t</td> <td>30min</td> <td>Waiting</td> </tr> <tr> <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td> <td>HHHHH</td> <td>15</td> <td>07.04.2020</td> <td>10:00</td> <td>Project 1</td> <td>Blah blah blah</td> <td>Activity</td> <td>2t</td> <td>30min</td> <td>Waiting</td> </tr> <tr> <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td> <td>IIIII</td> <td>15</td> <td>07.04.2020</td> <td>10:00</td> <td>Project 1</td> <td>Blah blah blah</td> <td>Activity</td> <td>2t</td> <td>30min</td> <td>Waiting</td> </tr> <tr> <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td> <td>JJJJJ</td> <td>15</td> <td>07.04.2020</td> <td>10:00</td> <td>Project 1</td> <td>Blah blah blah</td> <td>Activity</td> <td>2t</td> <td>30min</td> <td>Waiting</td> </tr> <tr> <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td> <td>KKKKK</td> <td>15</td> <td>07.04.2020</td> <td>10:00</td> <td>Project 1</td> <td>Blah blah blah</td> <td>Activity</td> <td>2t</td> <td>30min</td> <td>Waiting</td> </tr> <tr> <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td> <td>LLLLL</td> <td>15</td> <td>07.04.2020</td> <td>10:00</td> <td>Project 1</td> <td>Blah blah blah</td> <td>Activity</td> <td>2t</td> <td>30min</td> <td>Waiting</td> </tr> <tr> <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td> <td>MMMMM</td> <td>15</td> <td>07.04.2020</td> <td>10:00</td> <td>Project 1</td> <td>Blah blah blah</td> <td>Activity</td> <td>2t</td> <td>30min</td> <td>Waiting</td> </tr> <tr> <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td> <td>NNNNN</td> <td>15</td> <td>07.04.2020</td> <td>10:00</td> <td>Project 1</td> <td>Blah blah blah</td> <td>Activity</td> <td>2t</td> <td>30min</td> <td>Waiting</td> </tr> <tr> <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td> <td>OOOOO</td> <td>15</td> <td>07.04.2020</td> <td>10:00</td> <td>Project 1</td> <td>Blah blah blah</td> <td>Activity</td> <td>2t</td> <td>30min</td> <td>Waiting</td> </tr> <tr> <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td> <td>PPPPP</td> <td>15</td> <td>07.04.2020</td> <td>10:00</td> <td>Project 1</td> <td>Blah blah blah</td> <td>Activity</td> <td>2t</td> <td>30min</td> <td>Waiting</td> </tr> <tr> <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td> <td>QQQQQ</td> <td>15</td> <td>07.04.2020</td> <td>10:00</td> <td>Project 1</td> <td>Blah blah blah</td> <td>Activity</td> <td>2t</td> <td>30min</td> <td>Waiting</td> </tr> <tr> <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td> <td>RRRRR</td> <td>15</td> <td>07.04.2020</td> <td>10:00</td> <td>Project 1</td> <td>Blah blah blah</td> <td>Activity</td> <td>2t</td> <td>30min</td> <td>Waiting</td> </tr> <tr> <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td> <td>SSSSS</td> <td>15</td> <td>07.04.2020</td> <td>10:00</td> <td>Project 1</td> <td>Blah blah blah</td> <td>Activity</td> <td>2t</td> <td>30min</td> <td>Waiting</td> </tr> <tr> <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td> <td>TTTTT</td> <td>15</td> <td>07.04.2020</td> <td>10:00</td> <td>Project 1</td> <td>Blah blah blah</td> <td>Activity</td> <td>2t</td> <td>30min</td> <td>Waiting</td> </tr> <tr> <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td> <td>UUUUU</td> <td>15</td> <td>07.04.2020</td> <td>10:00</td> <td>Project 1</td> <td>Blah blah blah</td> <td>Activity</td> <td>2t</td> <td>30min</td> <td>Waiting</td> </tr> <tr> <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td> <td>VVVVV</td> <td>15</td> <td>07.04.2020</td> <td>10:00</td> <td>Project 1</td> <td>Blah blah blah</td> <td>Activity</td> <td>2t</td> <td>30min</td> <td>Waiting</td> </tr> <tr> <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td> <td>XXXXX</td> <td>15</td> <td>07.04.2020</td> <td>10:00</td> <td>Project 1</td> <td>Blah blah blah</td> <td>Activity</td> <td>2t</td> <td>30min</td> <td>Waiting</td> </tr> <tr> <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td> <td>YYYYY</td> <td>15</td> <td>07.04.2020</td> <td>10:00</td> <td>Project 1</td> <td>Blah blah blah</td> <td>Activity</td> <td>2t</td> <td>30min</td> <td>Waiting</td> </tr> <tr> <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td> <td>ZZZZZ</td> <td>15</td> <td>07.04.2020</td> <td>10:00</td> <td>Project 1</td> <td>Blah blah blah</td> <td>Activity</td> <td>2t</td> <td>30min</td> <td>Waiting</td> </tr> <tr> <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td> <td>ÆÆÆÆÆ</td> <td>15</td> <td>07.04.2020</td> <td>10:00</td> <td>Project 1</td> <td>Blah blah blah</td> <td>Activity</td> <td>2t</td> <td>30min</td> <td>Waiting</td> </tr> <tr> <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td> <td>ØØØØØ</td> <td>15</td> <td>07.04.2020</td> <td>10:00</td> <td>Project 1</td> <td>Blah blah blah</td> <td>Activity</td> <td>2t</td> <td>30min</td> <td>Waiting</td> </tr> <tr> <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td> <td>ÅÅÅÅÅ</td> <td>15</td> <td>07.04.2020</td> <td>10:00</td> <td>Project 1</td> <td>Blah blah blah</td> <td>Activity</td> <td>2t</td> <td>30min</td> <td>Waiting</td> </tr> </tbody> <tfoot> <tr> <th><div class="aw-50" ><div class="checker"><span><input type="checkbox" class="styled"></span></div></div></th> <th><div class="aw-200">Name</div></th> <th><div class="aw-50" >Week</div></th> <th><div class="aw-100">Date</div></th> <th><div class="aw-100">Time</div></th> <th><div class="aw-200">Project</div></th> <th><div class="aw-400">Text</div></th> <th><div class="aw-200">Activity</div></th> <th><div class="aw-50" >Hours</th> <th><div class="aw-50" >Pause</div></th> <th><div class="aw-100">Status</div></th> </tr> </tfoot> </table> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> </body> </html>

2020-04-07 11:21:54

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

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

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

2018-03-12 10:00:38

如果你想让body显示滚动条，设置它的display: block;。

设置显示:表格;这样它就能保持表的行为。

为了均匀分布单元格，使用table-layout: fixed;。

演示

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

如果tbody不显示滚动，因为content小于height或max-height，可以随时使用:overflow-y: scroll;设置滚动。演示2

<编辑S/updateS> 2019 - 04/2021

重要提示:这种使表可滚动的方法在某些情况下有缺陷。(见下面的评论)顺便说一下，这个帖子中的一些重复的答案应该得到同样的警告

警告:此解决方案断开头部和身体细胞网格;这意味着在大多数实际情况下，您将无法从表中获得所期望的单元格对齐。注意这个解决方案使用了一个hack来保持它们的对齐:

Anyhow, to set a scrollbar, a display reset is needed to get rid of the table-layout (which will never show scrollbar). Turning the <table> into a grid via display:grid/contents will also leave a gap in between header and scrollable part, to mind about. (idem if built from divs) overflow:overlay; has not yet shown up in Firefox ( keep watching it) position:sticky will require a parent container which can be the scrolling one. make sure your thead can be sticky if you have a few rows and rowspan/colspan headers in it (it does not with chrome).

到目前为止，仅通过CSS还没有完美的解决方案。有一些平均的方法来选择，所以它适合你自己的表格(表格布局:固定;是. .修复表和列的宽度，但javascript可能会被用来重置这些值=>退出纯CSS)

2014-06-02 07:57:27

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

推荐文章

最新文章

标签