首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Html表格中的最大高度

Html表格中的最大高度
EN

Stack Overflow用户
提问于 2013-11-30 05:19:13
回答 4查看 52.4K关注 0票数 36

我创建了一个表,我希望它是height be 800px

如果它是溢出,我想使滚动条,但标题不滚动。

所以我尝试添加这个CSS:

overflow: scroll;
max-height:800px;

但这对我不起作用。这是整个html文件。有什么问题吗?

CSS

table{
    overflow: scroll;
   text-align: center;
   margin: auto;
   max-height:800px;
}
table, td, th
{
border:1px solid green;

}
th
{
background-color:green;
color:white;
}

和HTML

<table >
  <tr>
   <th>field a</th>
   <th>field b</th>
   <th>field c</th>
   <th>field e</th>
  </tr>
  <tr>
   <td>3534534</td>
   <td>עו"ש</td>
   <td>6,463</td>
   <td>4,000</td>
  </tr>
  <tr>
   <td>3534534</td>
   <td>עו"ש</td>
   <td>6,463</td>
   <td>4,000</td>
  </tr>
</table>

谢谢!

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2013-11-30 05:27:02

您可以将表包装在div中,并将max-heightoverflow: scroll提供给该div

<div class="pane">
    <table>
        <tr>
            <th>field a</th>
            <th>field b</th>
            <th>field c</th>
            <th>field e</th>
        </tr>
        <tr>
            <td>3534534</td>
            <td>עו"ש</td>
            <td>6,463</td>
            <td>4,000</td>
        </tr>
        ...
    </table>
</div>
.pane {
    display: inline-block;
    overflow-y: scroll;
    max-height:200px;
}
table {
    text-align: center;
    margin: auto;
}

JSFiddle

Pure CSS Scrollable Table with Fixed Header上还有另一种解决方案,没有包装器div,但在行周围添加了额外的theadtbody。将thead和tbody设置为display: block,并为tbody提供一个max-heightoverflow-y。这样可以在滚动行时保持标题不动。但和往常一样,它也有一个价格标签。您必须指定列宽,因为标题和正文由于display: block而不同步

<table>
    <thead>
        <tr>
            <th>field a</th>
            <th>field b</th>
            <th>field c</th>
            <th>field e</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>3534534</td>
            <td>עו"ש</td>
            <td>6,463</td>
            <td>4,000</td>
        </tr>
        ...
    </tbody>
</table>
thead {
    display: block;
}
tbody {
    display: block;
    overflow-y: scroll;
    max-height:200px;
}
thead th, tbody td {
    width: 70px;
}

JSFiddle

更新:

在该站点的源代码中,有关于IE和IE6的注释。它设置

thead tr {
    position: relative
}

并定义表格的宽度。

table {
    float: left;
    width: 740px
}

我不知道这与IE10有什么关系。

票数 53
EN

Stack Overflow用户

发布于 2013-11-30 05:25:31

使用另一个元素包装整个表,并将这些属性提供给他:

#table-limiter {
max-height:800px;
overflow: scroll;
}

HTML示例:

<div id="table-limiter">
   <table>
      ...
   </table>
</div>

设计表格样式有时是一件麻烦的事:(

票数 6
EN

Stack Overflow用户

发布于 2013-11-30 05:27:46

这里有一种方法。

使用CSS添加一个包装div:

#set-height {
    display: inline-block;
    height:800px;
    overflow: scroll;
}

小提琴:http://jsfiddle.net/JmLFz/

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/20293492

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档