HTML：使表格列宽固定

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。但是在渲染页面时，该宽度实际上并未得到反映。

在此处输入图片说明

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

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

在fixed MDN 表格布局中，表格和列的宽度由表格和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：使表格列宽固定

问题描述

2 个解决方案

解决方案1
1 2015-07-05 06:08:59

解决方案2
0 已采纳 2015-07-05 07:25:11

HTML：使表格列宽固定

问题描述

2 个解决方案

解决方案1 1 2015-07-05 06:08:59

解决方案2 0 已采纳 2015-07-05 07:25:11

解决方案1
1 2015-07-05 06:08:59

解决方案2
0 已采纳 2015-07-05 07:25:11