表头固定，体可滚动

我试图使一个表与固定标题和一个可滚动的内容使用引导3表。不幸的是，我发现的解决方案不工作与bootstrap或混乱的风格。

这里有一个简单的bootstrap表，但由于某种原因，我不知道tbody的高度不是10px。

height: 10px !important; overflow: scroll;

例子:

当前回答

把表格像这样放在div里面，使表格垂直滚动。将overflow-y更改为overflow-x，使表可水平滚动。只是溢出使表可以水平和垂直滚动。

<div style="overflow-y: scroll;"> 
    <table>
    ...
    </table>
</div>

2018-12-31 09:26:54

其他回答

使用这个链接，stackoverflow.com/a/17380697/1725764，由Hashem Qolami在原始帖子的评论和使用display:内联块，而不是浮动。如果表也有'table-bordered'类，则修复边界。

table.scroll {
  width: 100%;  
  &.table-bordered {
    td, th {
      border-top: 0;
      border-right: 0;
    }    
    th {
      border-bottom-width: 1px;
    }
    td:first-child,
    th:first-child {
      border-right: 0;
      border-left: 0;
    }
  }
  tbody {
    height: 200px;
    overflow-y: auto;
    overflow-x: hidden;  
  }
  tbody, thead {
    display: block;
  }
  tr {
    width: 100%;
    display: block;
  }
  th, td {
    display: inline-block;

  }
  td {
    height: 46px; //depends on your site
  }
}

然后把td和th的宽度相加

table.table-prep {
  tr > td.type,
  tr > th.type{
    width: 10%;
  }
  tr > td.name,
  tr > th.name,
  tr > td.notes,
  tr > th.notes,
  tr > td.quantity,
  tr > th.quantity{
    width: 30%;
  }
}

2014-12-07 12:11:02

不需要用div包装它…

CSS:

tr {
width: 100%;
display: inline-table;
table-layout: fixed;
}

table{
 height:300px;              // <-- Select the height of the table
 display: block;
}
tbody{
  overflow-y: scroll;      
  height: 200px;            //  <-- Select the height of the body
  width: 100%;
  position: absolute;
}

Bootply: https://www.codeply.com/p/nkaQFc713a

2014-05-07 13:19:07

迟到的派对(我的生活的故事)，但由于这是谷歌上的第一个结果，上面没有一个让我工作，下面是我的代码

/*Set a min width where your table start to look like crap*/
table { min-width: 600px; }

/*The next 3 sections make the magic happen*/
thead, tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

tbody {
    display: block;
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: scroll;
}

td {
    overflow: hidden;
    text-overflow: ellipsis;
}

/*Use the following to make sure cols align correctly*/
table, tr, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}


/*Set your columns to where you want them to be, skip the one that you can have resize to any width*/
    th:nth-child(1), td:nth-child(1) {
    width: 85px;
}
th:nth-child(2), td:nth-child(2) {
    width: 150px;
}
th:nth-child(4), td:nth-child(4) {
    width: 125px;
}
th:nth-child(5) {
    width: 102px;
}
td:nth-child(5) {
    width: 85px;
}

2017-04-23 05:47:34

table { display: block; } thead, tbody { display: block; } tbody { position: absolute; height: 150px; overflow-y: scroll; } td, th { min-width: 100px !important; height: 25px !important; overflow:hidden !important; text-overflow: ellipsis !important; max-width: 100px !important; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <div class="container" style="position:fixed;height:180px;overflow-x:scroll;overflow-y:hidden"> <table> <thead> <tr> <th>Col1</th> <th>Col2</th> <th>Username</th> <th>Password</th> <th>First Name</th> <th>Last Name</th> <th>Col16</th> <th>Col7</th> <th>Col8</th> <th>Col9</th> <th>Col10</th> <th>Col11</th> <th>Col12</th> <th>Col13</th> <th>Col14</th> <th>Col15</th> <th>Col16</th> <th>Col17</th> <th>Col18</th> </tr> </thead> <tbody> </tbody> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> </table> </div>`enter code here`

2019-06-05 19:37:34

对于纯CSS方法，你需要一个带有overflow-y: auto;并决定如何隐藏滚动/溢出行:

覆盖一个不透明的粘头(位置:粘;上图:0;z-index: 1;)，就像@RokoCBuljan的答案一样。切换行可见性(通过如下所示在属性后设置tr:)。

注意容器可以是一个外部<div>，或者<table>本身，或者它的一部分(例如<tbody>)。后面两个你需要设置display: block;所以实际上他们被当成了潜水者。

请看下面一个修改后的@giulio的解决方案:

:root { --height-height: 150px; /* cell width has to reserve some space for scrolling. Hence the sum < 100% */ --cell-width: 85px; } .header-fixed { width: 200px; } /* Treat all as divs */ .header-fixed > thead, .header-fixed > tbody, .header-fixed > thead > tr, .header-fixed > tbody > tr, .header-fixed > thead > tr > th, .header-fixed > tbody > tr > td { display: block; } /* Prevent header to wrap */ .header-fixed > thead > tr > th { white-space: nowrap; background-color: lightgrey; } .header-fixed > tbody > tr:after, .header-fixed > thead > tr:after { content: ' '; display: block; visibility: hidden; clear: both; } .header-fixed > tbody { overflow-y: auto; height: var(--height-height); } .header-fixed > tbody > tr > td, .header-fixed > thead > tr > th { width: var(--cell-width); border: thin solid grey; float: left; } <table class="header-fixed"> <thead> <tr> <th>Header 1</th> <th>Header 2</th> </tr> </thead> <tbody> <tr> <td>cell 11</td> <td>cell 12</td> </tr> <tr> <td>cell 21</td> <td>cell 22</td> </tr> <tr> <td>cell 31</td> <td>cell 32</td> </tr> <tr> <td>cell 41</td> <td>cell 42</td> </tr> <tr> <td>cell 51</td> <td>cell 52</td> </tr> <tr> <td>cell 61</td> <td>cell 62</td> </tr> <tr> <td>cell 71</td> <td>cell 72</td> </tr> <tr> <td>cell 81</td> <td>cell 82</td> </tr> <tr> <td>cell 91</td> <td>cell 92</td> </tr> </tbody> </table>

注意:如果你有>2列，你需要相应地摆弄var(——cell-width)变量。

2014-04-04 06:50:28

表头固定，体可滚动

推荐文章

最新文章

标签