HTML：使table栏宽固定

Question

我有一个包含大量列的 HTML Table。现在，我希望能够指定列的宽度 - 第一列的宽度应为 600px，每个对应列的宽度应为 200px。

目前，发生的情况是所有列都被挤进了我的屏幕宽度，而不是 200px 宽度并允许我滚动。

我正在使用 HTML_Table

这是我的代码：

<head>
    <link rel="stylesheet" type="text/css" href="table.css">
    <style>
    #table_format {
        border-collapse: collapse;
        font-family: Helvetica, Arial, sans-serif;
        font-size: 16px;
        font-style: normal;
        border: 1px solid black;
        overflow-x: auto;    
    }

    #table_format th {
        padding: 5px;
        font-size: 1.2em;
        text-align: left;
        border-bottom: 1px solid black;
        background-color: #F2C545;
    }

    #table_format td {
        padding: 5px;
    }

    </style>
</head>
....
Some other code here
....    
    <?php

    require_once "HTML/Table.php";
    $table = new HTML_Table(array("id"=>"table_format"));
    $firstColumnStyle=array('width' => '600');
    $subsequentColumnStyle=array('width' => '200');

    ....
    ....
    Other code to print values here
    ....
    ....
    $table->updateColAttributes(0, $firstColumnStyle, null);
    for ($cols = 1; $cols <= count($arr1); $cols++)
    {
        $table->updateColAttributes($cols, $subsequentColumnStyle);
    }
    echo $table->toHtml();

当我检查元素时，我可以看到第一列的宽度为 600，所有其他列的宽度为 200。但是当我呈现页面时，宽度实际上并没有得到反映。

我不想将 table 放入包装器并将包装器的宽度设置为静态值，原因有以下两个：

1. I don't know how many columns I have.
2. The scrollbar in the wrapper appears at the very bottom after all the rows, and to access the scrollbar, one needs to scroll to the very bottom. I'd rather have the horizontal scroll on the page rather than on the wrapper

.

有什么办法可以实现吗？

Answer 1

尝试将此添加到您的设置中：

#table_format {
  table-layout: fixed;
}

来自 MDN Table layout fixed Table 和列宽由 table 和 col 元素的宽度或第一行单元格的宽度设置。后续行中的单元格不影响列宽。

Answer 2

我需要为 first-child 使用 min-width 属性。这是工作解决方案。 https://jsfiddle.net/msdspjpu/

tr > td {
    min-width: 200px;
    border: 1px solid black;
}
tr > td:first-child {
    min-width: 600px;
}

谢谢@Matjaz 的回答。

HTML：使table栏宽固定

HTML: Make table column width fixed

html

css

html-table

web