Question

在以下示例中，

<table style="width: 100%;"><tr>
   <td>First Cell</td>
   <td>Second Cell</td>
</tr></table>

如何设置宽度，使第一个单元格/列完全一样宽，以显示第一个单元格的内容，让第二个单元格填充表格宽度的其余部分？

我正在使用GWT HorizontalPanel来执行此操作，因此如果有html，css或gwt技巧。请告诉我。

谢谢

Answer 1

假设“显示第一个单元格的内容需要尽可能宽”是指宽度需要显示没有换行符的内容，您可以使用以下内容：

<table width=681 border><tr>
   <td nowrap>First Cell</td>
   <td width="100%">Second Cell</td>
</tr></table>

无法保证这将继续工作，因为要求单元格为100％宽，但包含另一个非零宽度的单元格是不可能的要求。但浏览器目前做的似乎最接近要求。

Answer 2

如本问题所述，您可以实现没有表格的目标布局：

xHTML/CSS: How to make inner div get 100% width minus another div width

HTML

<div class="two-columns">
   <div class="fit-to-contents">First Cell</div>
   <div class="fill-remaining-space">Second Cell</div>
</div>

CSS

.two-columns {
    overflow: hidden;/* Contains descendant floats */
}

.two-columns .fit-to-contents {
    float: left;
    background: #ffd;
}

.two-columns .fill-remaining-space {
    overflow: hidden;
    background: #fdf;
}

我不确定这是否真的适合您的用例，但我需要查看上下文。

Answer 3

表格在HTML中自行处理。没有必要强制任何特定大小的细胞。

你真的想做什么？

您使用的是哪个版本的HTML？（提示：升级到HTML5和CSS！）

Answer 4

在第一个单元格上放置width:1px样式。然后，该表将使第一个单元格尽可能窄，而不会导致溢出。

因为＆＃34;尽可能地缩小＆＃34;是＆＃34; First＆＃34;的宽度。在这种情况下，您可能也想要输入white-space:nowrap，否则它将显示＆＃34; First＆＃34;和＆＃34; Cell＆＃34;两行。

Jsfiddle

Answer 5

根本不要指定任何宽度（无论是在桌面上还是在单元格上），并在表格单元格上使用white-space: nowrap。

如何指定html单元格应具有显示其所有内容所需的最小宽度

5 个答案:

HTML

CSS