HTML CSS Table layout

Question

I have a problem creating a proper table layout.

I need the table to have a specific width, with 3 columns (no problems so far). The problem is that I need the 2nd column needs to be only the width of its content, and no bigger, and that column has to dynamically adapt to that content.

The other two should take up the rest of the width of the table.

Example:

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

use colspan in html
see 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

Hopefully this will do the trick

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

Demo: http://jsfiddle.net/vdFwF/

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>

Answer 5

You need to assign to each elements. 元素指定 。
Try this Jfiddle.
JSfiddle

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