【问题标题】：HTML CSS Table layoutHTML CSS 表格布局
【发布时间】：2014-01-08 03:58:11
【问题描述】：

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

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

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

例子：

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

【问题讨论】：

只接受 css 或 js 吗？列的所有单元格一个宽度（当然是 2 个）或 1 个宽度的行？
@kevpoccs js 会被接受，但我想用 css 来做。而且只有这一行，如果你的意思是……

标签： html css dynamic width css-tables

【解决方案1】：

<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 好吧，我的意思是如果你这样做，宽度不会根据内容而改变。它必须是内容的宽度
为什么你不使用一个 td 并将你的内容居中

【解决方案2】：

您需要将 min-height 分配给每个 td 元素。
试试这个 Jfiddle。
@987654321@

【讨论】：

【解决方案3】：

在 html 中使用 colspan
见菲德尔@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>

【讨论】：

【解决方案4】：

希望这能解决问题

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/

【讨论】：

重要的是width 到1px 的设置，事实上，由于旧标准，在表格中它被松散地解释为min-width。例如，将table-layout:fixed 添加到表中会破坏这一点。

【解决方案5】：

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

【讨论】：

@DinoPrašo，表格最大为父级的 100%，因此您可能需要将 html, body{width:100%;} 添加到您的 CSS 中，或者为表格所在的元素应用宽度跨度>
@ExtPro 不，这不是问题...表格在 960px 宽的 div 中，并且已经有 100% 的宽度
@DinoPrašo 嗯，如果您可以提供一些方便的 HTML/CSS。或者您的浏览器是否支持nth-child？
没关系，我想通了...我的桌子有 display:block;在其中，这导致它无法正常工作。
@DinoPrašo 太棒了-很高兴您找到了解决方案

【解决方案6】：

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

【讨论】：