HTML CSS表格布局DEMO FIDDLE

Question

我在创建正确的表格布局时遇到问题。

我需要表格具有特定的宽度，有3列（到目前为止没有问题）。问题是我需要第二列只需要其内容的宽度，而不是更大，并且该列必须动态地适应该内容。

另外两个应该占据桌子宽度的其余部分。

例：

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

Answer 1

DEMO FIDDLE

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

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>

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

但是：ぁzxswい

Answer 4

您需要为每个td元素指定min-height。 试试这个Jsfiddle。 qazxsw poi

Answer 5

http://jsfiddle.net/vdFwF/

Answer 6

 JSfiddle