126

I have to dynamically create a table with a variable number of columns, determined at runtime.

Can somebody tell me if it's possible to have a html table with equal size columns that are fully stretched?

1
  • 1
    And doesnt rely on you having an exact content like the first answer.
    – Fredy31
    Commented Oct 15, 2018 at 15:29

5 Answers 5

279

If you don't know how many columns you are going to have, the declaration

table-layout: fixed

along with not setting any column widths, would imply that browsers divide the total width evenly - no matter what.

That can also be the problem with this approach, if you use this, you should also consider how overflow is to be handled.

3
  • I would like to take this approach for a full screen table without overflow. how many columns would it create? can you please set up a demo to understand it better?
    – ProgramCpp
    Commented Jan 14, 2015 at 11:41
  • 3
    jsfiddle.net/5babcvg4 You create a table with as many columns as you want, then add the declaration to the table.
    – orszaczky
    Commented Jan 14, 2015 at 15:39
  • 32
    Note that table width must be set (e.g. width: 100%;). Commented Aug 27, 2015 at 13:29
78
<table width="400px">
  <tr>
  <td width="100px"></td>
  <td width="100px"></td>
  <td width="100px"></td>
  <td width="100px"></td>
  </tr>
</table>

For variable number of columns use %

<table width="100%">
  <tr>
  <td width="(100/x)%"></td>
  </tr>
</table>

where 'x' is number of columns

8
  • 4
    +1 for second approach. But 400 what, feet? Inches? Centimeters? Pixel? Use units. :)
    – ANeves
    Commented May 27, 2010 at 10:27
  • 2
    That is exactly the point. The first example is indifferent to the unit used. Commented Jul 14, 2011 at 23:25
  • 2
    Does this take into account the borders of tr and tds? I suppose not.
    – Ninad
    Commented Oct 12, 2011 at 8:56
  • I was wrong.. I just tried that out.. it worked.. I have td borders for 32 columns.
    – Ninad
    Commented Oct 12, 2011 at 8:58
  • 4
    Duplicate of stackoverflow.com/questions/5055299/… where an interesting answer was placed.
    – Alberto
    Commented Dec 18, 2012 at 18:21
10

ALL YOU HAVE TO DO:

HTML:

<table id="my-table"><tr>
<td> CELL 1 With a lot of text in it</td>
<td> CELL 2 </td>
<td> CELL 3 </td>
<td> CELL 4 With a lot of text in it </td>
<td> CELL 5 </td>
</tr></table>

CSS:

#my-table{width:100%;} /*or whatever width you want*/
#my-table td{width:2000px;} /*something big*/

if you have th you need to set it too like this:

#my-table th{width:2000px;}
4
  • 2
    this does not work for me. can you provide a working example? Commented Nov 21, 2013 at 23:39
  • works now - I've tried the td { width: 100% } approach before and that didn't work, but 2000px works well. Commented Nov 24, 2013 at 10:28
  • This is the best answer, even if the way HTML/CSS works is heinous. Commented Mar 28, 2014 at 13:43
  • This won't work if you have very_long_words, or if your row contains the <pre>Some long text</pre>. From all answer here, only orszaczky's table-layout: fixed worked for me. Commented Jan 29, 2019 at 15:36
8

Just add style="table-layout: fixed ; width: 100%;" inside <table> tag and also if you do not specify any styles and add just style=" width: 100%;" inside <table> You will be able to resolve it.

5
table {
    width: 100%;

    th, td {
        width: 1%;
    }
}

SCSS syntax

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.