HTML CSS表格布局

Question

我在创建合适的表格布局方面遇到了问题。

我需要表格具有特定的宽度，有3列（目前还没有问题）。 问题在于，我需要第二列仅为其内容的宽度，不得更大，并且该列必须动态适应该内容。

其他两列应占据表格的其余宽度。

示例：

---------------------------------------------------------------------------------
|                             |Here is the main text|                           |
---------------------------------------------------------------------------------

- Dino Prašo

---

只接受 CSS 或 JS？列中所有单元格的宽度都相同（当然是2列），还是每行只有一个宽度？ - kevpoccs

@kevpoccs，使用js也可以接受，但我想用css来完成。而且只有这一行，如果你是指那个的话... - Dino Prašo

Answer 1

演示代码

HTML

<table>
    <tr>
        <td>Row 1 Col 1</td>
        <td>Row 1 Col 2</td>
        <td>Row 1 Col 3</td>
    </tr>
</table>

CSS

table {
    width:100%;
}
td {
    border:1px solid grey;
}
td:nth-child(2) {
    width:1px;
    white-space:nowrap;
}

- SW4

---

@DinoPrašo，表格最大化到父级的100％，因此您可能需要在CSS中添加html，body {width：100％;}，或者将宽度应用于表格所在的元素。 - SW4

@ExtPro 不是那个问题...表格已经在一个宽度为960像素的div中，并且已经有了100%的宽度。 - Dino Prašo

@DinoPrašo 嗯，如果您能提供一些HTML/CSS代码那就太方便了。或者您的浏览器是否支持nth-child？ - SW4

没事了，我弄明白了... 我的表格里有display:block;，这导致它没有按照预期工作。 - Dino Prašo

@DinoPrašo 很棒 - 很高兴你找到了解决方案。 - SW4

哦，那真是非常聪明！ - johnkavanagh

Answer 2

在HTML中使用colspan
请查看fiddel @ http://jsfiddle.net/8HtZu/

<table style="width:100%;text-align:center;border:2px solid #800" border="1px">
    <tr>
        <td colspan="3">Title</td>
    </tr> 
    <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
    </tr> 
    <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
    </tr> 
</table>

- Nilay Mehta

Answer 3

希望这样做可以解决问题。

HTML：

<table>
<tr>
    <td>Test</td>
    <td class="dynamic">This is some longer text</td>
    <td>some other stuff;</td>
</tr>
<tr>
    <td>&nbsp;</td>
    <td class="dynamic">This is some longer text and longer;</td>
    <td>some other stuff</td>
</tr>
</table>

CSS：

table 
{
    border: 1px solid #000;
}
table td
{
    border: 1px solid #000;
}

td
{
    width: 33.3%;
}

td.dynamic
{
    width: 1px;
    white-space: nowrap;
}

演示：http://jsfiddle.net/vdFwF/

- Purple Hexagon

---

重要的是将 width 设置为 1px，而且在表格中由于旧标准的缘故，它被宽松地解释为 min-width。例如，在表格中添加 table-layout: fixed 将会破坏这种解释方式。 - Niet the Dark Absol

Answer 4

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse"  
bordercolor="#111111" width="100%" id="AutoNumber1">
    <tr>
        <td width="33%">&nbsp;</td>
        <td width="33%">&nbsp;</td>
        <td width="34%">&nbsp;</td>
    </tr>
    <tr>
        <td width="100%" colspan="3">&nbsp;</td>
    </tr>
</table>

- Yunus

---

中间列与其内容相符。 - kevpoccs

宽度不能固定 :( 它必须与内容的宽度完全一致，不能多出任何像素。 - Dino Prašo

你说的“fixed”是什么意思？ - Yunus

@Yunus 嗯，我的意思是如果你这样做，宽度不会根据内容变化。它必须是内容的宽度。 - Dino Prašo

为什么不使用一个td并将内容居中？ - Yunus

Answer 5

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse"  
bordercolor="#111111" width="100%" id="AutoNumber1">

<tr>
     <td width="100%" colspan="3">
<center>your content </center>
</td>
</tr>
</table>

- Yunus

Answer 6

你需要为每个 td 元素分配 min-height。
可以尝试这个 Jfiddle。
JSfiddle

- Devendra Lattu