html - 如何在html中设置单元格宽度？

Question

我有一个有 2 行的表格，如下所示，但无法固定单元格宽度，如下所示我们如何修复单元格宽度？当我尝试修复 cell3 宽度时，它也会自动修复 cell1 宽度

Cell1          |   cell2
Cell3    |    cell4

Answer 1

尝试这个：

HTML：

<table>
    <caption>Table Name</caption>
    <thead>
        <tr>
            <th>Heading 1</th>
            <th>Heading 2</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="2">&nbsp;</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
        </tr>
        <tr>
            <td>Data 3</td>
            <td>Data 4</td>
        </tr>
    </tbody>
</table>

CSS：

th {
    width: 100px; /* or the width you want */
}

操纵sth会使其对应td的 s 进行相应的调整。只需确保您th的 s 的数量与您的 s 的数量相对应td。如果要合并s 或s，也可以使用colspan （参见 中的示例tfoot）。thtd

Answer 2

您可以为此使用 table 的 colspan 属性。

<table>

 <col width="20px" />
 <col width="30px" />
 <col width="40px" />
 <tr>
<td>text</td>
<td colspan=2>text</td>
<td>text</td>

</tr>
<tr> 
<td colspan=2>text</td>
<td >text</td>
</tr>

<table>

看起来像这样

 text text    text
 text     text

Answer 3

您可以尝试使用 col 标记在一个位置为所有行设置表格样式，但您需要在表格或表格 css 类上设置表格布局：固定样式并为单元格设置溢出样式

http://www.w3schools.com/TAGS/tag_col.asp

<table class="fixed">
<col width="20px" />
<col width="30px" />
<col width="40px" />
<tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
</tr>

这就是你的 CSS

table.fixed { table-layout:fixed; }
table.fixed td { overflow: hidden; }