Question

我有一个包含很多行（1000+）的表。结构非常简单，这是一个只有一行的简化示例。

function maxVersion($array)
{
    $max = null;

    foreach ($array as $version) {
        if (version_compare($max, $version) === -1) {
            $max = $version;
        }
    }

    return $max;
}

print(maxVersion(['1.0.8', '1.0.9', '1.0.10']));
// returns "1.0.10"

我需要修复列名，所以我使tbody可滚动。我添加了这些CSS规则

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

这是一个完整的JSfiddle example

有两个问题。

tbody { display: block; overflow-y: scroll; overflow-x: none; max-height: 150px; }不占用所有宽度。我尝试使用<tbody>，但它不起作用。 width: 100%;似乎阻止了正常的宽度行为，但我需要它用于滚动。我怎么能占用所有可用空间？即使只有一列获得所有剩余空间
display: block;和<thead>列宽不同。目前我使用jQuery代码来设置标题宽度，就像其他行一样，这很好，但我想知道是否有更好的解决方案。

Answer 1

这个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>

编辑 - 替代解决方案：如果您从display:block;移除<tbody>，则代码可以正常运行。

tbody {

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

Answer 2

定义到此css

Phaser.tile

＆＃13;

tbody > tr , thead > tr{display:table;width:100%;}
tbody, thead{display: block;}

＆＃13;

table {
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid grey;
    width: 100%;
    text-align: left;
}

thead {
    border: 1px solid grey;
}
tbody > tr , thead > tr{display:table;width:100%;}
tbody, thead{display: block;}
tbody {
    
    overflow-y: scroll;
    overflow-x: none;
    max-height: 150px;
    border: 1px solid grey;
    width: 100%
}

＆＃13;

Answer 3

将此添加到CSS

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

}

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

3 个答案: