Set min-width in HTML table's

Question

My table has several columns.

Each column should have dynamic width that depends on the browser window size. On the other hand, each column must not be too tiny. So I tried to set min-width for those columns but it's not a valid property. Tried min-width for <td> as well but that too is an invalid property.

Is there any way to set min-width for col/td in HTML table?

If you absolutely must use you should see this: http://stackoverflow.com/questions/6426779/min-width-and-max-height-for-table-atrributes — Stacey Garrison, Aug 29 '13 at 06:41

score 91 · Accepted Answer · edited Oct 20 '22 at 16:24

91

try this one:

<table style="border:1px solid">
<tr>
    <td style="min-width:50px;border:1px solid red">one</td>
    <td style="min-width:100px;border:1px solid red">two</td>
</tr>
</table>

edited Oct 20 '22 at 16:24

Jakub Muda

6,008
10
37
56

answered Aug 29 '13 at 06:49

postgresnewbie

1,378
1
12
19

10

This is the accepted answer but looking at answer below: http://stackoverflow.com/a/29379832/207552, looks like the results are undefined. – bschandramohan Aug 07 '15 at 08:38
Very bad method! 1) Using absolute widths is totally unacceptable and 2) One has to repeat this style redundantly to all s in the table, instead of using it just once in a stylesheet! – Apostolos Aug 18 '20 at 07:03
7

@Apostolos Why are absolute widths unacceptable? That is dependent of the use case. And also you can of course use appropriate selectors and/or class names instead of inline styles. This is just a minimal example. The problem with that answer is, that the specs say, it has undefined behaviour. – trixn Aug 26 '20 at 06:26
2

It is bad because 1) it is **screen width dependent** and 2) it applies to **all tables**, which might not be OK. (1) is handled by using percentages and (2) is handled by using class names. – Apostolos Aug 27 '20 at 11:38

score 57 · Answer 2 · answered Mar 31 '15 at 22:41

57

min-width and max-width properties do not work the way you expect for table cells. From spec:

In CSS 2.1, the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined.

This hasn't changed in CSS3.

answered Mar 31 '15 at 22:41

Oleg

24,465
8
61
91

13

Actually this has changed in [CSS3 box model](http://www.w3.org/TR/css3-box/#min-max) and the properties are applied to "all elements but non-replaced inline elements, table rows, and row groups" – cyberskunk Apr 02 '15 at 07:08
4

min-width and max-width on td works with px, but doesn't work with % (latest Chrome) – dszakal Feb 06 '20 at 15:53
1

Regarding changes in CSS3, this hasn't changed directly to tables, but you can change the td to have 'display: block' or 'display:inline-block' and then it will honor min-width. Note however that you lose other table cell formatting by doing this - e.g. word-wrap. – Midiman Oct 07 '21 at 11:31

score 10 · Answer 3 · answered Oct 06 '17 at 11:45

10

Try using an invisible element (or psuedoelement) to force the table-cell to expand.

td:before {
  content: '';
  display: block; 
  width: 5em;
}

JSFiddle: https://jsfiddle.net/cibulka/gf45uxr6/1/

answered Oct 06 '17 at 11:45

Petr Cibulka

2,452
4
28
45

5

Your link is dead, and your solution did not work for me! – Mojtaba Dec 13 '18 at 11:21
5

I think, this won't work if you got `table-layout: fixed;`. – sr9yar Jun 26 '19 at 07:36

score 4 · Answer 4 · answered Aug 07 '21 at 11:34

If you need your cells to be large enough to fit the largest word in that column, you can try surrounding that or those specific words with <span style="white-space: nowrap">; that will cause that specific word to not wrap, forcing the column-width to be a minimum of that dynamic width.

Idea from @Jon.

score 2 · Answer 5 · answered Apr 15 '19 at 08:38

2

<table style="min-width:50px; max-width:150px;">
    <tr>
        <td style="min-width:50px">one</td>
        <td style="min-width:100px">two</td>
    </tr>
</table>

This works for me using an email script.

answered Apr 15 '19 at 08:38

Redous

29
1
6

score 2 · Answer 6 · answered Jan 22 '21 at 16:16

None of these solutions worked for me. The only workaround I could find was, adding all the min-width sizes together and applying that to the entire table. This obviously only works if you know all the column sizes in advanced, which I do. My tables look something like this:

var columns = [
  {label: 'Column 1', width: 80 /* plus other column config */},
  {label: 'Column 2', minWidth: 110 /* plus other column config */},
  {label: 'Column 3' /* plus other column config */},
];

const minimumTableWidth = columns.reduce((sum, column) => {
  return sum + (column.width || column.minWidth || 0);
}, 0);

tableElement.style.minWidth = minimumTableWidth + 'px';

This is an example and not recommended code. Fit the idea to your requirements. For example, the above is javascript and won't work if the user has JS disabled, etc.

score 0 · Answer 7 · answered Feb 26 '18 at 14:42

0

One way should be to add a <div style="min-width:XXXpx"> within the td, and let the <td style="width:100%">

answered Feb 26 '18 at 14:42

user9413974

17
1

Robert · Answer 8 · 2021-05-29T15:10:48.010

If you have set the percentages width of your columns and for you could be enough to FIX the entire table width or set a minimum width, this is valid

<table style="min-width:1000px;">
or
<table style="width:1000px;">

please note that this is said to work ONLY as inline style

I had this need with a bootstrap 5 table and my code ended to be

<table style="min-width:1000px;" class="table table-striped 
table-hover table-bordered text-center table-responsive" id="tabella">

you better appreciate this when in mobile with small or empty TDs content

score -5 · Answer 9 · edited Dec 06 '14 at 21:48

-5

<table style="border:2px solid #ddedde">
    <tr>
        <td style="border:2px solid #ddedde;width:50%">a</td>
        <td style="border:2px solid #ddedde;width:20%">b</td>
        <td style="border:2px solid #ddedde;width:30%">c</td>
    </tr>
    <tr>
        <td style="border:2px solid #ddedde;width:50%">a</td>
        <td style="border:2px solid #ddedde;width:20%">b</td>
        <td style="border:2px solid #ddedde;width:30%">c</td>
    </tr>
</table>

edited Dec 06 '14 at 21:48

Artiom

7,694
3
38
45

answered Aug 29 '13 at 06:58

AmirtharajCVijay

1,078
11
12

5

Define width in percentage just make it dynamic base on window size, but what I want is dynamic width AND a minimum width – Thanhma San Aug 29 '13 at 07:22

Set min-width in HTML table's

9 Answers9

Linked