我在创建适当的表格布局时遇到了问题。HTML CSS表格布局

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

另外两个应占用表格的其余宽度。

实施例：

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

来源

2013-12-19 Dino Prašo

那你试试？ – TreeTree

只有CSS或JS接受？列的所有单元格的宽度（当然是2）或宽度是1的宽度？ – kevpoccs

@kevpoccs js将被接受，但我想用css来做。只有这一行，如果你的意思是... –

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

来源

2013-12-19 14:35:07 SW4

真的很好@ExtPro – kevpoccs

它工作在jsfiddle中，但它确实nt在我的项目中，:( –

@DinoPrašo，表格的最大值为父项的100％，因此您可能需要将'html，body {width：100％;}'例如添加到CSS中 - 或者将宽度到表中找到的元素 – SW4

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

来源

2013-12-19 14:27:19 Yunus

中间一列只是适合他的内容 – kevpoccs

宽度不能修复:( 它必须完全是内容的宽度，没有像素更宽 –

你是怎么修好的？ – Yunus

您需要最小高度分配给每个TD元件。
试试这个Jfiddle。
JSfiddle

来源

2013-12-19 14:33:12

使用合并单元格中的HTML
看到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>

来源

2013-12-19 14:33:42 Nilay

这不会帮助我认为...... – kevpoccs

希望这将这样的伎俩

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/

来源

2013-12-19 14:34:58

重要的是将width设置为1px，并且在表格中它由于旧的宽松解释为最小宽度标准。例如，在表中添加'table-layout：fixed'会破坏它。 –

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

来源

2013-12-19 14:36:39 Yunus

HTML CSS表格布局

回答

DEMO FIDDLE

相关问题