CODEWITHSUNDEEP
htmlcssdynamicwidthcss-tables
Dino Prašo
Dino Prašo

Reputation: 611

HTML CSS Table layout

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

Upvotes: 3

Views: 293

Answers (6)

SW4
SW4

Reputation: 71160

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

Upvotes: 4

Yunus
Yunus

Reputation: 7

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

Upvotes: 0

Purple Hexagon
Purple Hexagon

Reputation: 3578

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/

Upvotes: 1

Yunus
Yunus

Reputation: 7

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

Upvotes: 0

Nilay Mehta
Nilay Mehta

Reputation: 1907

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>

Upvotes: 1

Devendra Lattu
Devendra Lattu

Reputation: 2802

You need to assign min-height to each td elements.
Try this Jfiddle.
JSfiddle

Upvotes: 0

Related Questions