我有一个包含大量列的 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。但是当我呈现页面时，宽度实际上并没有得到反射(reflect)。
由于以下两个原因，我不想将表格放在包装器中并将包装器的宽度设置为静态值:
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
.
有什么办法可以实现吗？
最佳答案
尝试将此添加到您的设置中:
#table_format {
table-layout: fixed;
}
来自 MDN Table layout 固定
表格和列的宽度由表格和列元素的宽度或第一行单元格的宽度设置。后续行中的单元格不会影响列宽。
关于HTML:固定表格列宽，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31227561/