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

only css or js accepted ? One width for all cells of the column (2 of course) or 1 width by row ? — kevpoccs
– kevpoccs, Commented Dec 19, 2013 at 14:28
@kevpoccs js would be accepted but i'd like to do it with css. And there is only this one row, if you mean that... — Dino Prašo
– Dino Prašo, Commented Dec 19, 2013 at 14:32

SW4 · Accepted Answer · 2013-12-19 14:54:39Z

4

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

edited Dec 19, 2013 at 14:54

answered Dec 19, 2013 at 14:35

SW4

71.5k20 gold badges137 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

SW4 Over a year ago

@DinoPrašo, the table maxes to 100% of the parent, so you may need to add html, body{width:100%;} for example to your CSS- or apply a width to the element the table finds itself within

Dino Prašo Over a year ago

@ExtPro nope, thats not the problem... the table is in a 960px wide div anyway and has 100% width already

SW4 Over a year ago

@DinoPrašo hmm, if you can provide some HTML/CSS that'd be handy. Alternatively does your browser support nth-child?

Dino Prašo Over a year ago

Never mind, I figured it out... My table had display:block; in it, that caused it not to work as it should.

SW4 Over a year ago

@DinoPrašo great- glad you got a solution

Nilay Mehta · Accepted Answer · 2013-12-19 14:33:42Z

1

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>

answered Dec 19, 2013 at 14:33

Nilay Mehta

1,9172 gold badges22 silver badges30 bronze badges

Comments

Purple Hexagon · Accepted Answer · 2013-12-19 14:34:58Z

1

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/

answered Dec 19, 2013 at 14:34

Purple Hexagon

3,5682 gold badges27 silver badges46 bronze badges

1 Comment

Niet the Dark Absol Over a year ago

The important thing is the setting of width to 1px, and the fact that in tables it is interpreted loosely as min-width due to old standards. Adding table-layout:fixed to the table, for example, would break this.

Devendra Lattu · Accepted Answer · 2013-12-19 14:33:12Z

0

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

answered Dec 19, 2013 at 14:33

Devendra Lattu

2,8122 gold badges22 silver badges27 bronze badges

Comments

johnkavanagh · Accepted Answer · 2013-12-19 14:34:22Z

0

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

edited Dec 19, 2013 at 14:34

johnkavanagh

4,6842 gold badges27 silver badges37 bronze badges

answered Dec 19, 2013 at 14:27

Yunus

71 bronze badge

5 Comments

kevpoccs Over a year ago

the middle column just fit with his content

Dino Prašo Over a year ago

The width mustn't be fixed :( It has to be exactly the width of the content, and no pixel wider.

Yunus Over a year ago

what do you meen with fixed?

Dino Prašo Over a year ago

@Yunus Well, I mean that if you do this, the width doesn't change depending on the content. It has to be the width of the content

Yunus Over a year ago

why you do not use one td and center your content

Yunus · Accepted Answer · 2013-12-19 14:36:39Z

0

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

answered Dec 19, 2013 at 14:36

Yunus

71 bronze badge

Collectives™ on Stack Overflow

HTML CSS Table layout

6 Answers 6

DEMO FIDDLE

5 Comments

Comments

1 Comment

Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

Comments

1 Comment

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related