Question

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

Cell1          |   cell2
Cell3    |    cell4

Answer 1

您可以尝试使用col标签在一个位置为所有行执行表样式，但是您需要在表或表css类上设置table-layout：fixed样式并为单元格设置溢出样式< / p>

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

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

试试这个：

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 */
}

操纵th会使相应的td相应调整。只需确保th的号码与td的号码相对应。如果要合并colspan或tfoot，还可以使用th （请参阅td）中的示例。

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

3 个答案:

HTML：

CSS：