Set the table column width constant regardless of the amount of text in its cells

Question

In my table I set the width of the first cell in a column to be 100px  However  when the text in one of the cell in this column is too long  the width of the column becomes more than 100px  How could I disable this expansion

User · Accepted Answer

I played with it for a bit because I had trouble figuring it out.

You need to set the cell width (either th or td worked, I set both) AND set the table-layout to fixed. For some reason, the cell width seems to only stay fixed if the table width is set, too (I think that's silly but whatev).

Also, it is useful to set the overflow property to hidden to prevent any extra text from coming out of the table.

You should make sure to leave all of the bordering and sizing for CSS, too.

Ok so here's what I have:

_x000D_

table {_x000D_
  border: 1px solid black;_x000D_
  table-layout: fixed;_x000D_
  width: 200px;_x000D_
}_x000D_
_x000D_
th,_x000D_
td {_x000D_
  border: 1px solid black;_x000D_
  width: 100px;_x000D_
  overflow: hidden;_x000D_
}

_x000D_

<table>_x000D_
  <tr>_x000D_
    <th>header 1</th>_x000D_
    <th>header 234567895678657</th>_x000D_
  </tr>_x000D_
  <tr>_x000D_
    <td>data asdfasdfasdfasdfasdf</td>_x000D_
    <td>data 2</td>_x000D_
  </tr>_x000D_
</table>

_x000D_

Here it is in JSFiddle

This guy had a similar problem: Table cell widths - fixing width, wrapping/truncating long words

User · Answer

As per my answer here  it is also possible to use a table head  which can be empty  and apply relative widths for each table head cell  The widths of all cells in the table body will conform to the width of their column head  Example   HTML   lt table gt     lt thead gt       lt tr gt         lt th width  5   gt  lt  th gt         lt th width  70   gt  lt  th gt         lt th width  15   gt  lt  th gt         lt th width  10   gt  lt  th gt       lt  tr gt     lt  thead gt     lt tbody gt       lt tr gt         lt td gt 1 lt  td gt         lt td gt Some text    lt  td gt         lt td gt May 2018 lt  td gt         lt td gt Edit lt  td gt       lt  tr gt       lt tr gt         lt td gt 2 lt  td gt         lt td gt Another text    lt  td gt         lt td gt April 2018 lt  td gt         lt td gt Edit lt  td gt       lt  tr gt     lt  tbody gt   lt  table gt    CSS  table     width  600px    border-collapse  collapse     td     border  1px solid  999999      View Result  Alternatively  use colgroup as suggested in Hyathin s answer

User · Answer

If you don t want a fixed layout  specify a class for the column to be size appropriately   CSS     special column   width  120px      HTML     lt td class  special column  gt     lt  td gt

User · Answer

You don t need to set  fixed  - all you need is setting overflow hidden since the column width is set

User · Answer

Setting this   style  min-width 100px      Worked for me

User · Answer

I found KAsun s answer works better using vw instead of px like so    lt td gt  lt div style  width  10vw   gt                 lt  div gt  lt  td gt   This was the only styling I needed to adjust the column width

User · Answer

You need to write this inside the corresponding CSS  table-layout fixed

User · Answer

Make the accepted answer respond for small screens when smaller than the fixed width   HTML    lt table gt     lt tr gt       lt th gt header 1 lt  th gt       lt th gt header 234567895678657 lt  th gt     lt  tr gt     lt tr gt       lt td gt data asdfasdfasdfasdfasdf lt  td gt       lt td gt data 2 lt  td gt     lt  tr gt   lt  table gt    CSS  table      border  1px solid black      table-layout  fixed      max-width  600px      width  100      th  td       border  1px solid black      overflow  hidden      max-width  300px      width  100       JS Fiddle  https   jsfiddle net w9s3ebzt

User · Answer

KAsun has the right idea  Here is the correct code      lt style type  text css  gt    th first-col  gt  div     td first-col  gt  div       overflow hidden      white-space nowrap      width 100px      lt  style gt    lt table gt     lt thead gt  lt tr gt  lt th class  first-col  gt  lt div gt really long header lt  div gt  lt  th gt  lt  tr gt  lt  thead gt     lt tbody gt  lt tr gt  lt td class  first-col  gt  lt div gt really long text lt  div gt  lt  td gt  lt  tr gt  lt  tbody gt   lt  table gt

User · Answer

What I do is    Set the td width     lt td width  200  height  50  gt  lt  --blaBlaBla Contents here-- gt  lt  td gt   Set the td width with CSS     lt td style  width 200px  height 50px   gt   Set the width again as max and min with CSS     lt td style  max-width 200px  min-width 200px  max-height 50px  min-height 50px  width 200px  height 50px   gt     It sounds little bit repetitive but it gives me the desired result  To achieve this with much ease  you may need put the CSS values in a class in your style-sheet    td size         width 200px     height 50px    max-width 200px    min-width 200px     max-height 50px     min-height 50px      overflow hidden       Optional This might be useful for some overflow contents          then    lt td class  td size  gt    Place the class attribute to any  lt td gt  you want

User · Answer

If you need one ore more fixed-width columns while other columns should resize  try setting both min-width and max-width to the same value

User · Answer

I use an   after element in the cell where I want to set a minimal width regardless of the text present  like this    cell  after       content          width  20px      display  block      I don t have to set width on the table parent nor use table-layout

User · Answer

Just add  lt div gt  tag inside  lt td gt  or  lt th gt  define width inside  lt div gt    This will help you  Nothing else works   eg     lt td gt  lt div style  width  50px   gt                 lt  div gt  lt  td gt

User · Answer

I used this   app downloads table tr td first-child       width  75       app downloads table tr td last-child       text-align  center

User · Answer

It also helps  to put in the last  filler cell   with width auto  This will occupy remaining space  and will leave all other dimensions as specified

User · Answer

See  http   www html5-tutorials org tables changing-column-width   After the table tag  use the col element  you don t need a closing tag   For example  if you had three columns    lt table gt     lt colgroup gt       lt col style  width 40   gt       lt col style  width 30   gt       lt col style  width 30   gt     lt  colgroup gt       lt tbody gt             lt  tbody gt   lt  table gt

[html] Set the table column width constant regardless of the amount of text in its cells?

Examples related to html

Examples related to css

Examples related to column-width