表头固定，体可滚动

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

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

height: 10px !important; overflow: scroll;

例子:

当前回答

最新的添加位置:“粘性”将是这里最简单的解决方案

.outer{ overflow-y: auto; height:100px; } .outer table{ width: 100%; table-layout: fixed; border : 1px solid black; border-spacing: 1px; } .outer table th { text-align: left; top:0; position: sticky; background-color: white; } <div class = "outer"> <table> <tr > <th>col1</th> <th>col2</th> <th>col3</th> <th>col4</th> <th>col5</th> <tr> <tr > <td>data</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td> <tr> <tr > <td>data</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td> <tr> <tr > <td>data</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td> <tr> <tr > <td>data</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td> <tr> <tr > <td>data</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td> <tr> <tr > <td>data</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td> <tr> </table> </div>

2019-05-01 15:49:20

其他回答

<style>

thead, tbody
{
    display: block;
}

tbody 
{
   overflow: auto;
   height: 100px;
}

th,td
{
    width: 120px;
}

</style>

<table class="table table-bordered table-striped">
    <thead style="background-color:lightgreen">
        <tr>
            <th>Id</th><th>Name</th><th>Roll</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
    </tbody>
</table>

2020-06-24 22:15:29

不管它现在有什么价值:我确实发布了一个解决方案的姐妹线程表滚动与HTML和CSS

接受两个表(一个仅用于头部，一个用于所有-由浏览器布局) 摆放完毕后，将上桌(仅限人头)调整到下桌的宽度隐藏(可见性，而不是显示)下表的标题，并使下表在div中可滚动w/

解决方案是不可知的任何风格/框架使用-所以它可能在这里也是有用的…

一个很长的描述是在表格滚动与HTML和CSS /代码也是在这支笔:https://codepen.io/sebredhh/pen/QmJvKy

2018-04-10 20:58:35

这是一个内容可滚动表的实现，仅使用div元素和纯CSS Flexbox样式实现。

.table { display: flex; flex-direction: column; background-color: lightblue; width: 600px; height: 200px; font-family: "Courier New"; } .header { display: flex; flex-direction: row; background-color: whitesmoke; padding-right: 10px; font-weight: bold; } .row { border-bottom: 1px solid gainsboro; } .row>div { width: 25%; text-align: left; } .content { height: 100%; display: flex; flex-direction: column; overflow-y: scroll; } .entry { display: flex; flex-direction: row; padding-top: 5px; } /* Chrome, Edge, Safari and Opera support the non-standard ::-webkit-scrollbar pseudo element. We need the scroll bar width set so as to apply same padding in the table header row for alignment. */ /* width */ ::-webkit-scrollbar { width: 10px; } /* Track */ ::-webkit-scrollbar-track { background: whitesmoke; border-radius: 2px; } /* Handle */ ::-webkit-scrollbar-thumb { background: lightgrey; border-radius: 2px; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: grey; } <div class="table"> <div class="header row"> <div>Fruit</div> <div>Price</div> <div>Quantity</div> <div>In Stock</div> </div> <div class="content"> <div class="entry row"> <div>Apple</div> <div>$10</div> <div>100</div> <div>Yes</div> </div> <div class="entry row"> <div>Pear</div> <div>$2</div> <div>900</div> <div>No</div> </div> <div class="entry row"> <div>Orange</div> <div>$3</div> <div>123400</div> <div>Yes</div> </div> <div class="entry row"> <div>Mongosteen</div> <div>$80</div> <div>5</div> <div>Yes</div> </div> <div class="entry row"> <div>Durian</div> <div>$120</div> <div>988</div> <div>Yes</div> </div> <div class="entry row"> <div>Apple</div> <div>$10</div> <div>100</div> <div>Yes</div> </div> <div class="entry row"> <div>Pear</div> <div>$2</div> <div>900</div> <div>No</div> </div> <div class="entry row"> <div>Orange</div> <div>$3</div> <div>123400</div> <div>Yes</div> </div> <div class="entry row"> <div>Mongosteen</div> <div>$80</div> <div>5</div> <div>Yes</div> </div> <div class="entry row"> <div>Durian</div> <div>$120</div> <div>988</div> <div>Yes</div> </div> </div> </div>

See the Pen

内容可滚动表-仅CSS

by Ruifeng Ma (

@maruifeng

) on

CodePen

2021-06-18 01:53:11

使用这个链接，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

table { overflow-y: auto; height: 50vh; /* !!! HEIGHT MUST BE IN [ vh ] !!! */ } thead th { background-color: white; position: sticky; top: 0; } <table> <thead> <tr><th>TH 1</th><th>TH 2</th></tr> </thead> <tbody> <tr><td>A1</td><td>A2</td></tr> <tr><td>B1</td><td>B2</td></tr> <tr><td>C1</td><td>C2</td></tr> <tr><td>D1</td><td>D2</td></tr> <tr><td>E1</td><td>E2</td></tr> <tr><td>F1</td><td>F2</td></tr> <tr><td>G1</td><td>G2</td></tr> <tr><td>H1</td><td>H2</td></tr> <tr><td>I1</td><td>I2</td></tr> <tr><td>J1</td><td>J2</td></tr> <tr><td>K1</td><td>K2</td></tr> <tr><td>L1</td><td>L2</td></tr> <tr><td>M1</td><td>M2</td></tr> <tr><td>N1</td><td>N2</td></tr> <tr><td>O1</td><td>O2</td></tr> <tr><td>P1</td><td>P2</td></tr> <tr><td>Q1</td><td>Q2</td></tr> <tr><td>R1</td><td>R2</td></tr> <tr><td>S1</td><td>S2</td></tr> <tr><td>T1</td><td>T2</td></tr> <tr><td>U1</td><td>U2</td></tr> <tr><td>V1</td><td>V2</td></tr> <tr><td>W1</td><td>W2</td></tr> <tr><td>X1</td><td>X2</td></tr> <tr><td>Y1</td><td>Y2</td></tr> <tr><td>Z1</td><td>Z2</td></tr> </tbody> </table>

你不需要js。重要的是设置表格高度[vh]

2020-02-13 19:14:30

表头固定，体可滚动

推荐文章

最新文章

标签