gpt4 book ai didi

HTML:固定表格列宽

转载 作者:行者123 更新时间:2023-11-28 17:01:15 25 4
gpt4 key购买 nike

我有一个包含大量列的 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)。

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

.

有什么办法可以实现吗?

最佳答案

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

#table_format {
table-layout: fixed;
}

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

关于HTML:固定表格列宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31227561/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com