Table with 100% width with equal size columns

HtmlCss

Html Problem Overview

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?

Html Solutions

Solution 1 - Html

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.

Solution 2 - Html

<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

Solution 3 - Html

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

Solution 4 - Html

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.

Solution 5 - Html

table {
    width: 100%;

    th, td {
        width: 1%;
    }
}

SCSS syntax

Categories
Recommended Html Solutions
Recommended Css Solutions

Previous Solution:

Using ConfigParser to read a file without section name

PythonParsingConfiguration Files

Next Solution:

How to do jquery code AFTER page loading?

Jquery

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAndrei CiobanuView Question on Stackoverflow
Solution 1 - HtmlorszaczkyView Answer on Stackoverflow
Solution 2 - HtmlSalilView Answer on Stackoverflow
Solution 3 - HtmlaroykosView Answer on Stackoverflow
Solution 4 - HtmlSineth LakshithaView Answer on Stackoverflow
Solution 5 - HtmlS. EstevesView Answer on Stackoverflow