可滚动的 tbody 不占用所有可用宽度

Posted 2023-03-06

【中文标题】可滚动的 tbody 不占用所有可用宽度

【英文标题】：Scrollable tbody doesn't occupy all available width

【发布时间】：2016-06-06 14:17:49

【问题描述】：

我有一个包含很多行 (1000+) 的表。结构很简单，这里是一个只有一行的简化示例。

<table>
    <thead>
        <tr>
            <th>column 1</th>
            <th>column 2</th>
            <th>column 3</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
        </tr>
    </tbody>
</table>

我需要固定列名，所以我让 tbody 可滚动。我添加了这些 CSS 规则

tbody 
    display: block;
    overflow-y: scroll;
    overflow-x: none;
    max-height: 150px;

这是一个完整的JSfiddle example

有两个问题。

<tbody> 不会占据所有宽度。我尝试使用width: 100%;，但它不起作用。 display: block; 似乎阻止了正常的宽度行为，但我需要它来滚动。我怎样才能让它占据所有可用空间？即使只有 1 列获得所有剩余空间也没关系

<thead> 和 <tbody> 列宽不同。目前我使用一段 jQuery 代码来像其他行一样设置标题宽度，这很好，但我想知道是否有更好的解决方案。

【参考方案1】：

将此添加到 css

thead,
tbody tr 
    display: table;
    width: 100%;
    table-layout: fixed; /* even columns width , fix width of table too*/

【讨论】：

你拯救了我的一天兄弟！

是的，这行得通，但你知道滚动条是否可以在外面制作吗？一个小卷轴破坏了列布局，我不得不删除边框。

【参考方案2】：

answer 可以提供帮助：它提供了所有可能的解决方案，包括纯 css 和 jquery。

这是一个在纯 css 中工作的解决方案，其中 <tbody> 和 <thead> 具有相同的宽度：

table 
    border-collapse: collapse;
    border-spacing: 0;
   
    
    text-align: left;
    
     display: flex;
    flex-flow: column;
    height: 100%;
    width: 100%;


thead 
    border: 1px solid grey;
        /* head takes the height it requires, 
    and it's not scaled when table is resized */
    flex: 0 0 auto;
    width: 100%;


tbody 
   
  
    max-height: 150px;
    width: 100%;
        /* body takes all the remaining available space */
    flex: 1 1 auto;
    display: block;
    overflow-y: scroll;







table tbody tr 
    width: 100%;

table thead,
table tbody tr 
    display: table;
    table-layout: fixed;

/* decorations */
.table-container 
    border: 1px solid black;
    padding: 0.3em;

table 
    border: 1px solid lightgrey;

table td, table th 
    padding: 0.3em;
    border: 1px solid lightgrey;

table th 
    border: 1px solid grey;


td
    word-wrap:break-word

<table>
    <thead>
        <tr>
            <th>column 1</th>
            <th>column 2</th>
            <th>column 3</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>value 1akeuntveiuyrtiueyctiuyetiuyenaiuc</td>
            <td>value 2</td>
            <td>value 3</td>
        </tr>
        <tr>
            <td>value 1</td>
            <td>value sifcaiuerycnpiuaerypintcer2</td>
            <td>value 3</td>
        </tr>
        <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
        </tr>
        <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
        </tr>
        <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
        </tr>
        <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
        </tr>
        <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
        </tr>
        <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
        </tr>
        <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
        </tr>
        <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
        </tr>
        <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
        </tr>
        <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
        </tr>
        <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
        </tr>
        <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
        </tr>
        <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
        </tr>
        <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
        </tr>
        <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
        </tr>
        <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
        </tr>
        <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
        </tr>
        <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
        </tr>
        <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
        </tr>
        <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
        </tr>
    </tbody>
</table>

编辑 - 替代解决方案：如果您从 <tbody> 中删除 display:block;，您的代码将有效。

tbody 

overflow-y: scroll;
overflow-x: none;
max-height: 150px;
border: 1px solid grey;
width: 100%

【讨论】：

它可以工作，但将列 width 固定（好吧，它是一个百分比，但它不是基于内容）

@Naigel 我已经修改了我的答案，使单元格包含多行的整个文本

@Naigel 我还为您的代码添加了更正

您的第一个灵魂更好，我尝试使宽度以某种方式适应（width 百分比和min-width 像素的混合）

很好的答案，但请在您的 css 中添加更多内联文档；）

【参考方案3】：

定义到这个 css

tbody > tr , thead > trdisplay:table;width:100%;
tbody, theaddisplay: block;

table 
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid grey;
    width: 100%;
    text-align: left;


thead 
    border: 1px solid grey;

tbody > tr , thead > trdisplay:table;width:100%;
tbody, theaddisplay: block;
tbody 
    
    overflow-y: scroll;
    overflow-x: none;
    max-height: 150px;
    border: 1px solid grey;
    width: 100%

<table>
    <thead>
        <tr>
            <th>column 1</th>
            <th>column 2</th>
            <th>column 3</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
        </tr>
        <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
        </tr>
        <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
        </tr>
        <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
        </tr>
        <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
        </tr>
        <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
        </tr>
        <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
        </tr>
        <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
        </tr>
        <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
        </tr>
        <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
        </tr>
        <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
        </tr>
        <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
        </tr>
        <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
        </tr>
        <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
        </tr>
        <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
        </tr>
        <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
        </tr>
        <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
        </tr>
        <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
        </tr>
        <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
        </tr>
        <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
        </tr>
        <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
        </tr>
        <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
        </tr>
    </tbody>
</table>

【讨论】：

这里的问题是当文本长度不同时列不对齐，但我可以尝试添加一些width百分比结合min-width绝对值