Question

我有一个包含大量列的HTML表。现在，我希望能够指定列的宽度 - 第一列应为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.但是当我渲染页面时，宽度实际上并没有反映出来。

enter image description here

由于以下两个原因，我不想将表格放在包装器中并将包装器的宽度设置为静态值：

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和col元素的宽度或第一行单元格的宽度设置。后续行中的单元格不会影响列宽。

Answer 2

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

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

谢谢@Matjaz的回答。

HTML：使表格列宽固定

2 个答案: