如何正确设置HTML表上的列宽？

Question

这听起来像是一个基本问题。 我知道如何使用width标签设置列宽。 并通过使用CSS 。

使用以下HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta content="en-gb" http-equiv="Content-Language">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<style type="text/css">
.tableStyle {
    border-collapse: collapse;
    border: 1px solid #000000;
}
</style>
</head>

<body>

<table class="tableStyle" style="width: 100%">
    <tr>
        <td>This is long text</td>
        <td>Date Column</td>
        <td>Date Column</td>
    </tr>
    <tr>
        <td>This is long text</td>
        <td>Date Column</td>
        <td>Date Column</td>
    </tr>
    <tr>
        <td>This is long text</td>
        <td>Date Column</td>
        <td>Date Column</td>
    </tr>
    <tr>
        <td>This is long text</td>
        <td>Date Column</td>
        <td>Date Column</td>
    </tr>
</table>

</body>

</html>

如果可能的话，我想将第2列和第3列设置为显示这些列的内容所需的大小。 并为第1列进行扩展以适合。

现在，我知道我可以将最后两列设置为每列10％。 如果我将表格宽度设置为100％，则第1列将扩展为适合。

但是，由于此HTML模板将用于30多种语言，因此某些语言的列标题包含更多字符。 另外，如果更改字体大小，它也会被丢弃。

那么，有什么方法可以使后两列自动调整为内容大小并扩展为适合第一列？

谢谢。

安德鲁

Answer 1

使用<col>标记（代表表中的每一列）并设置样式。 这是两种您想要做的事情：

将第一列的宽度设置为100％

 table { width: 100%; }

 <table border="1"> <col style="width: 100%"> <col> <col> <tr> <td>This is long text</td> <td>Date Column</td> <td>Date Column</td> </tr> <tr> <td>This is long text</td> <td>Date Column</td> <td>Date Column</td> </tr> <tr> <td>This is long text</td> <td>Date Column</td> <td>Date Column</td> </tr> <tr> <td>This is long text</td> <td>Date Column</td> <td>Date Column</td> </tr> </table>

设置其他两列的宽度

 table { width: 100%; }

 <table border="1"> <col> <col style="width: 11%"> <col style="width: 11%"> <tr> <td>This is long text</td> <td>Date Column</td> <td>Date Column</td> </tr> <tr> <td>This is long text</td> <td>Date Column</td> <td>Date Column</td> </tr> <tr> <td>This is long text</td> <td>Date Column</td> <td>Date Column</td> </tr> <tr> <td>This is long text</td> <td>Date Column</td> <td>Date Column</td> </tr> </table>

Answer 2

在HTML中使用colspan将两列width变成一列

Answer 3

这是您需要应用于所有3列的CSS

.tableStyle {
border-collapse: collapse;
border: 1px solid #000000;
table-layout:auto;
}

它将为您自动调整大小。 加载需要更长的时间，但是可以解决问题！ 希望这可以帮助！

如何正确设置HTML表上的列宽？

问题描述

3 个解决方案

解决方案1
1 已采纳 2016-03-13 19:26:40

解决方案2
0 2016-03-13 19:09:01

解决方案3
0 2016-03-13 19:09:02

如何正确设置HTML表上的列宽？

问题描述

3 个解决方案

解决方案1 1 已采纳 2016-03-13 19:26:40

解决方案2 0 2016-03-13 19:09:01

解决方案3 0 2016-03-13 19:09:02

解决方案1
1 已采纳 2016-03-13 19:26:40

解决方案2
0 2016-03-13 19:09:01

解决方案3
0 2016-03-13 19:09:02