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

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

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

当前回答

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

<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

基于这个答案，如果你已经在使用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

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

默认情况下，溢出不适用于表组元素，除非你给了一个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

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

推荐文章

最新文章

标签