CODEWITHSUNDEEP
htmlcss
Andrei Ciobanu
Andrei Ciobanu

Reputation: 12868

Table with 100% width with equal size columns

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?

Upvotes: 128

Views: 264748

Answers (5)

Sineth Lakshitha
Sineth Lakshitha

Reputation: 713

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.

Upvotes: 7

S. Esteves
S. Esteves

Reputation: 453

table {
    width: 100%;

    th, td {
        width: 1%;
    }
}

SCSS syntax

Upvotes: 5

aroykos
aroykos

Reputation: 155

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

Upvotes: 9

Salil
Salil

Reputation: 47542

<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

Upvotes: 78

orszaczky
orszaczky

Reputation: 15755

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.

Upvotes: 282

Related Questions