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

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

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

当前回答

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

其他回答

我知道这是一个老问题，但我无意中发现它时，试图使一个粘页眉和页脚。我发现这篇文章提供了一个简单的解决方案，似乎很好地满足了我的需求。

table thead,
table tfoot {
  position: sticky;
}
table thead {
  inset-block-start: 0; /* "top" */
}
table tfoot {
  inset-block-end: 0; /* "bottom" */
}

2022-10-04 15:26:52

最简单的解决方案:

在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

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

我在为我的项目寻找同样的解决方案。我是这么做的。数据取自上面的一个答案，用于演示。

.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

HTML:

<table id="uniquetable">
    <thead>
      <tr>
        <th> {{ field[0].key }} </th>
        <th> {{ field[1].key }} </th>
        <th> {{ field[2].key }} </th>
        <th> {{ field[3].key }} </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="obj in objects" v-bind:key="obj.id">
        <td> {{ obj.id }} </td>
        <td> {{ obj.name }} </td>
        <td> {{ obj.age }} </td>
        <td> {{ obj.gender }} </td>
      </tr>
    </tbody>
</table>

CSS:

#uniquetable thead{
    display:block;
    width: 100%;
}
#uniquetable tbody{
    display:block;
    width: 100%;
    height: 100px;
    overflow-y:overlay;
    overflow-x:hidden;
}
#uniquetable tbody tr,#uniquetable thead tr{
    width: 100%;
    display:table;
}
#uniquetable tbody tr td, #uniquetable thead tr th{
   display:table-cell;
   width:20% !important;
   overflow:hidden;
}

这也可以:

#uniquetable tbody {
    width:inherit !important;
    display:block;
    max-height: 400px;
    overflow-y:overlay;
  }
  #uniquetable thead {
    width:inherit !important;
    display:block;
  }
  #uniquetable tbody tr, #uniquetable thead tr {
    display:inline-flex;
    width:100%;
  }
  #uniquetable tbody tr td,  #uniquetable thead tr th {
    display:block;
    width:20%;
    border-top:none;
    text-overflow: ellipsis;
    overflow: hidden;
    max-height:400px;
  }

2018-09-05 09:38:49

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

推荐文章

最新文章

标签