Set The Table Column Width Constant Regardless Of The Amount Of Text ...

Just browsing Stack Overflow? Help us improve your experience. Sign up for research

1. 1. Home
   2. Questions
   3. Tags
   4. Users
   5. Companies
   6. Labs
   7. Jobs
   8. Discussions
   9. Collectives

   10. Communities for your favorite technologies. Explore all Collectives

2. Teams

   Ask questions, find answers and collaborate at work with Stack Overflow for Teams.

   Try Teams for free Explore Teams
3. Teams

4. Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Get early access and see previews of new features.

Learn more about Labs Set the table column width constant regardless of the amount of text in its cells? Ask Question Asked 13 years, 11 months ago Modified 6 months ago Viewed 1.4m times 691

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?

• html
• css
• column-width

Share Improve this question Follow edited Jun 16, 2017 at 19:58 Brian Tompsett - 汤莱恩 5,8757272 gold badges6060 silver badges133133 bronze badges asked Dec 16, 2010 at 4:44 Misha MoroshkoMisha Moroshko 171k229229 gold badges518518 silver badges759759 bronze badges 4

• 6 stackoverflow.com/questions/1258416/word-wrap-in-a-html-table might help point you in the right direction – justinl Commented Dec 16, 2010 at 4:49
• 3 In my case not expansion happened, but the opposite: unwanted shrink of width despite of my explicit width declaration. Ridiculous! – Csaba Toth Commented Jul 28, 2014 at 5:49
• The only correct solution to this is to use colgroup with cols in it, and set the cols width. – MightyPork Commented Mar 18, 2015 at 19:46
• 3 table-layout:fixed; is the solution – emfi Commented Aug 29, 2015 at 18:48

Add a comment |

18 Answers 18

Sorted by: Reset to default Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 768

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:

table { border: 1px solid black; table-layout: fixed; width: 200px; } th, td { border: 1px solid black; width: 100px; overflow: hidden; } <table> <tr> <th>header 1</th> <th>header 234567895678657</th> </tr> <tr> <td>data asdfasdfasdfasdfasdf</td> <td>data 2</td> </tr> </table>

Here it is in JSFiddle

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

Share Improve this answer Follow edited May 3, 2020 at 17:33 Cristian Ciupitu 20.8k77 gold badges5454 silver badges7979 bronze badges answered Dec 16, 2010 at 6:04 ptpatersonptpaterson 9,45844 gold badges2828 silver badges4040 bronze badges 5

• 93 Its important to notice this: "The browser will then set column widths based on the width of cells in the first row of the table", from stackoverflow.com/questions/570154/… – daniloquio Commented Feb 9, 2012 at 19:31
• 15 It does work when the table width is not fixed. jsfiddle.net/lavinski/CGCFW/3 You just need a dynamic row to take up the remaining space. – Daniel Little Commented Dec 13, 2012 at 2:58
• 3 @DanielLittle alternatively you can set the table width to 1px; with overflow: visible for tables of dynamic size, as long as the size of the cells is fixed and overflow is visible it doesn't matter if the size of the table itself is bigger or smaller than the actual cells. – Mahn Commented Jul 28, 2015 at 17:12
• What could you do if your td has "width=30%;"? – 71GA Commented Dec 6, 2015 at 19:30
• 1 If the table has a width, even using table-layout: fixed the columns width will not be fixed because some columns will get enlarged to fill the table width, if the sum of all columns width is less than the table width. To avoid that you need what @MitjaGustin answer below suggests. However, if you specify the width of all columns then there is no point in also specifying the table width. – SantiBailors Commented Jan 25, 2017 at 8:32

Add a comment | 244

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:

<table> <colgroup> <col style="width:40%"> <col style="width:30%"> <col style="width:30%"> </colgroup> <tbody> ... </tbody> </table> Share Improve this answer Follow edited Mar 6, 2014 at 16:01 vanthome 4,9063939 silver badges4545 bronze badges answered Apr 8, 2013 at 16:15 HyathinHyathin 2,44911 gold badge1313 silver badges22 bronze badges 8

• 2 @Sam you may have had some other issue overriding this such as CSS, inline style, or incorrect doctype etc.. This definitely works, its the standard way to set column styles. – Sameer Alibhai Commented Jan 27, 2015 at 16:10
• I'm not sure if this is the 'HTML5 way' at all. It appears that colgroup/col in html5 is only really used for marking spans. MDN makes no mention of the use of the style attribute on col tags (other than it inherits it from global attributes) and only says of bgcolor: "...use the CSS property... on the relevant <td> elements." developer.mozilla.org/en-US/docs/Web/HTML/Element/col. – Stephen Panzer Commented Aug 3, 2015 at 23:23
• 11 Worked for me with table style table-layout: fixed; width: 100%;. Thanks! – nrodic Commented Jan 18, 2016 at 19:20
• It's not end-all/definitive, but w3schools also does not mention the use of col for this. It suggests the use of css applied to a <td> (or a <th>) - w3schools.com/tags/att_td_width.asp – Don Cheadle Commented Feb 18, 2016 at 15:25
• @Hyathin Your solution worked like a charm for me (thank you) - no extra efforts required. But it may differ for others depending on their situations. Or, maybe HTML5 is more stable now in 2017. – nam Commented Jan 24, 2017 at 16:57

| Show 3 more comments 157

Just add <div> tag inside <td> or <th> define width inside <div>. This will help you. Nothing else works.

eg.

<td><div style="width: 50px" >...............</div></td> Share Improve this answer Follow answered May 6, 2012 at 22:25 KAsunKAsun 1,62511 gold badge1010 silver badges22 bronze badges 6

• 3 I combined this solution with also specifying min-width/max-width for the same pixels width just to be on the safe side. Finally it's working. I don't know why I have to run all of these extra rounds just get it really fixed, ridiculous... – Csaba Toth Commented Jul 28, 2014 at 5:48
• 1 Unsure of how this is better than setting that same css style="width: 50px" on the <td> – Don Cheadle Commented Feb 18, 2016 at 15:26
• 6 @mmcrae It's better because it works, setting width on <td> doesn't. – Madbreaks Commented Jan 4, 2017 at 20:35
• 1 Ridiculous, but for me the easiest working solution in combination with display:inline-block; word-break:break-word;. – qräbnö Commented Nov 10, 2020 at 23:33
• Works like a charm! Seems to be forcing the width of the "td" – Carlos Cruz Commented Feb 3, 2021 at 16:44

| Show 1 more comment 78

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.

Share Improve this answer Follow answered Sep 6, 2012 at 12:28 scrrrscrrr 5,32088 gold badges4444 silver badges5454 bronze badges 1

• 1 This worked for me when setting the width explicitly with table-layout: fixed; did not. – Jordan Mack Commented May 12, 2016 at 20:18

Add a comment | 46

You need to write this inside the corresponding CSS

table-layout:fixed; Share Improve this answer Follow edited Aug 13, 2013 at 13:10 doubleDown 8,36811 gold badge3535 silver badges4848 bronze badges answered Dec 16, 2010 at 4:47 vinoth kumarvinoth kumar 66922 gold badges66 silver badges1313 bronze badges 3

• better sorround table with div tags then inside div use overflow:auto – vinoth kumar Commented Dec 16, 2010 at 6:00
• Worked for me when I combined it with column groups: <table style="table-layout: fixed"><colgroup><col style="width: 50%"><col style="width: 50%"></colgroup><tbody>...</tbody></table>. – Russ Bateman Commented Jul 8, 2015 at 3:13
• This Chris Coyer article explains it well: css-tricks.com/fixing-tables-long-strings – cssyphus Commented Nov 12, 2015 at 2:33

Add a comment | 29

What I do is:

1. Set the td width:

   <td width="200" height="50"><!--blaBlaBla Contents here--></td>

2. Set the td width with CSS:

   <td style="width:200px; height:50px;">

3. Set the width again as max and min with CSS:

   <td style="max-width:200px; min-width:200px; max-height:50px; min-height:50px; width:200px; height:50px;">

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:

<td class="td_size">

Place the class attribute to any <td> you want.

Share Improve this answer Follow edited Aug 13, 2013 at 13:09 doubleDown 8,36811 gold badge3535 silver badges4848 bronze badges answered Jun 26, 2012 at 5:31 ErickBestErickBest 30733 silver badges33 bronze badges 2

• This was the only solution that seemed to work in all cases without imposing extra, potentially-unwanted restrictions. – Sam Commented Jan 5, 2015 at 4:44
• min/max didn't worked for me – Akashxolotl Commented Sep 5, 2022 at 7:53

Add a comment | 8

Setting this:

style="min-width:100px;"

Worked for me.

Share Improve this answer Follow edited May 30, 2019 at 9:08 Jack Bashford 44k1111 gold badges5555 silver badges8282 bronze badges answered May 30, 2019 at 8:47 Priyanka AroraPriyanka Arora 45755 silver badges1010 bronze badges Add a comment | 4

I used this

.app_downloads_table tr td:first-child { width: 75%; } .app_downloads_table tr td:last-child { text-align: center; } Share Improve this answer Follow edited Sep 8, 2013 at 21:01 JustinStolle 4,39033 gold badges3838 silver badges4949 bronze badges answered May 10, 2013 at 21:40 Svetoslav MarinovSvetoslav Marinov 1,5361414 silver badges1111 bronze badges 3

• Don't forget ntch-child(2) (or 3, 4 and so on) – user3458 Commented Sep 17, 2013 at 13:50
• table td nth-child(n+1) {...} will cover all but the first column – Ed Randall Commented Jul 9, 2015 at 6:31
• Should we set the table-layout: fixed; or display: table; for the table element in order for this td:first-child and nth-child(n) selector to work? – user2749166 Commented Oct 14, 2020 at 8:39

Add a comment | 4

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

<table> <thead> <tr> <th width="5%"></th> <th width="70%"></th> <th width="15%"></th> <th width="10%"></th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Some text...</td> <td>May 2018</td> <td>Edit</td> </tr> <tr> <td>2</td> <td>Another text...</td> <td>April 2018</td> <td>Edit</td> </tr> </tbody> </table>

CSS

table { width: 600px; border-collapse: collapse; } td { border: 1px solid #999999; }

View Result

Alternatively, use colgroup as suggested in Hyathin's answer.

Share Improve this answer Follow answered Nov 2, 2018 at 14:52 eicksleicksl 89088 silver badges88 bronze badges Add a comment | 4

Getting proper sizing on a table is tricky. The only approach that has really worked for me is using table-layout: fixed; in combination with specified widths on each th. And a width: auto; on the one column you wouldn't mind growing.

Here's an example using a classless table. A classed version would be needed if you're doing some dynamic columns.

table { table-layout: fixed; } th, td { text-align: left; vertical-align: top; } th:first-child, th:last-child { background: yellow; width: 5ch; } th:first-child, th:last-child, td:first-child, td:last-child { text-align: center; } th:nth-child(n+2):nth-child(-n+3) { background: red; width: 20%; } th:nth-child(4) { background: blue; /* use this in the columns where you're not concerned with new lines */ word-break: break-word; width: auto; } <table> <thead> <tr> <th>ID</th> <th>First Name</th> <th>Last Name</th> <th>Description</th> <th>Age</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>John</td> <td>Smith</td> <td>Vivamus fermentum elit purus, eget egestas nunc convallis ac. Vestibulum faucibus dolor nunc, vitae rutrum mauris porta at. Ut id ante quis lectus consectetur interdum vel in leo. Ut ut convallis ipsum, quis aliquet erat. Maecenas ipsum dolor, rhoncus et ultrices a</td> <td>30</td> </tr> <tr> <td>2</td> <td>John</td> <td>Smith</td> <td>Vivamus fermentum elit purus, eget egestas nunc convallis ac. Vestibulum faucibus dolor nunc, vitae rutrum mauris porta at. Ut id ante quis lectus consectetur interdum vel in leo. Ut ut convallis ipsum, quis aliquet erat. Maecenas ipsum dolor, rhoncus et ultrices a</td> <td>30</td> </tr> <tr> <td>3</td> <td>John</td> <td>Smith</td> <td>Vivamus fermentum elit purus, eget egestas nunc convallis ac. Vestibulum faucibus dolor nunc, vitae rutrum mauris porta at. Ut id ante quis lectus consectetur interdum vel in leo. Ut ut convallis ipsum, quis aliquet erat. Maecenas ipsum dolor, rhoncus et ultrices a</td> <td>30</td> </tr> <tr> <td>4</td> <td>John</td> <td>Smith</td> <td>Vivamus fermentum elit purus, eget egestas nunc convallis ac. Vestibulum faucibus dolor nunc, vitae rutrum mauris porta at. Ut id ante quis lectus consectetur interdum vel in leo. Ut ut convallis ipsum, quis aliquet erat. Maecenas ipsum dolor, rhoncus et ultrices a</td> <td>30</td> </tr> </tbody> </table>

Share Improve this answer Follow edited May 3 at 15:54 answered Dec 9, 2022 at 20:17 FranCarstensFranCarstens 1,39388 silver badges1414 bronze badges Add a comment | 3

If you don't want a fixed layout, specify a class for the column to be size appropriately.

CSS:

.special_column { width: 120px; }

HTML:

<td class="special_column">...</td> Share Improve this answer Follow answered Mar 24, 2012 at 4:21 mcdadomcdado 72811 gold badge88 silver badges1515 bronze badges 0 Add a comment | 3

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.

Share Improve this answer Follow answered May 4, 2015 at 8:19 Mitja GustinMitja Gustin 1,7811313 silver badges1919 bronze badges Add a comment | 3

Make the accepted answer respond for small screens when smaller than the fixed width.

HTML:

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

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/

Share Improve this answer Follow edited Jun 3, 2017 at 14:48 answered Jun 3, 2017 at 14:38 Willy RichardsonWilly Richardson 12644 bronze badges Add a comment | 2

If you have a limited access to the table, using a class or inline style could be complicated.

Alternatively your can target the first td and th child of each row (aka the first column)

The rule bellow worked for me when I tested it with width but didn't work with max-width for some reason:

thead, tbody tr { display:table; width:100%; table-layout:fixed; } tr th:first-child, tr td:first-child { width:100px; } Share Improve this answer Follow edited Oct 6, 2022 at 11:13 answered Oct 6, 2022 at 11:07 RafaSashiRafaSashi 17.2k88 gold badges8787 silver badges9898 bronze badges Add a comment | 1

KAsun has the right idea. Here is the correct code...

<style type="text/css"> th.first-col > div, td.first-col > div { overflow:hidden; white-space:nowrap; width:100px } </style> <table> <thead><tr><th class="first-col"><div>really long header</div></th></tr></thead> <tbody><tr><td class="first-col"><div>really long text</div></td></tr></tbody> </table> Share Improve this answer Follow answered Jul 11, 2012 at 0:35 Aaron AverillAaron Averill 23311 silver badge88 bronze badges 0 Add a comment | 1

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.

Share Improve this answer Follow edited Dec 16, 2019 at 8:52 answered Dec 16, 2019 at 8:37 Daniel MacakDaniel Macak 16.9k44 gold badges3030 silver badges4949 bronze badges Add a comment | -4

I found KAsun's answer works better using vw instead of px like so:

<td><div style="width: 10vw" >...............</div></td>

This was the only styling I needed to adjust the column width

Share Improve this answer Follow edited Sep 19, 2016 at 0:54 answered Sep 19, 2016 at 0:36 user3229980user3229980 1144 bronze badges Add a comment | -5

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

Share Improve this answer Follow answered Sep 9, 2013 at 9:07 Vladimír HálaVladimír Hála 16877 bronze badges 1

• 4 Which will hide the content behind cell borders, not a good idea. – zrooda Commented Jan 6, 2015 at 11:13

Add a comment | Highly active question. Earn 10 reputation (not counting the association bonus) in order to answer this question. The reputation requirement helps protect this question from spam and non-answer activity.

Not the answer you're looking for? Browse other questions tagged

• html
• css
• column-width

or ask your own question.

• The Overflow Blog
• We'll Be In Touch - A New Podcast From Stack Overflow!
• The app that fights for your data privacy rights
• Featured on Meta
• More network sites to see advertising test
• We’re (finally!) going to the cloud!
• Call for testers for an early access release of a Stack Overflow extension...

Linked

-1 Same width and height column by css 673 Word-wrap in an HTML table 126 Force table column widths to always be fixed regardless of contents 88 HTML table: keep the same width for columns 41 Table cell widths - fixing width, wrapping/truncating long words 15 Adjusting table cell width 6 Which is the better way of specifying HTML Fixed Column width (width or style attribute) 8 HTML5 - How can I specify a fixed width for a particular cell? 5 Fixed-size HTML table cells, even when content is too big? 8 Optimizing HTML tables? See more linked questions

Related

88 HTML table: keep the same width for columns 1 How to set the width of my table columns to a fixed value? 9 Fixed column width in HTML table 126 Force table column widths to always be fixed regardless of contents 1 HTML: Make table column width fixed 0 Table with fixed column width, regardless of container 0 how to make the td width fixed? 3 How to give fixed width for the columns inside table in HTML? 2 How to make the column width of the table fixed? 1 How can I set a fixed width for certain column in a table?

Hot Network Questions

• Cisco Anyconnect: Illegal Packet
• Do the surreal numbers enjoy the transfer principle in ZFC?
• Does the canonical distribution assign probability to microstates or macrostates?
• Group action on affine variety induces faithful action on tangent space
• What if someone comits murder when they are younger but weren't caught till they got a mental disease like dementia?
• Is there any penalty for providing half cover to another creature?
• Testing Puzzles for Puzzle Book: Enigmatic Puzzle
• Do rediscoveries justify publication?
• Short story about a man living In an apartment who's curious about his neighbor who turns out to be a monster or demon
• What is the dating of Herod and Pompey's conquests of Jerusalem and the solemn fast
• Why would you not issue orders to a facility?
• She locked the door securely behind her
• I need some turkey broth to keep my turkey leftovers from drying out. How can I make it so it doesn't become gelatinous stock?
• Chain skipping when pedaling hard
• Simplifying Exp[I Mod[x, 2π]] to Exp[I x]
• How do I change the style of labels in HighlightMesh
• Quantitative definition of information without set cardinality or probability?
• Origin of the character "力"
• Non buddhist gods
• Inverse of hazard function
• Moments of a random variable related to uniform distribution on sphere
• Is there a theorem in metaphysics that basically says, "Biting the bullet will be inevitable in any metaphysical theory?"
• Phrase out of figures
• A dark animated movie about an orphaned girl working in an oppressive factory

more hot questions Question feed Subscribe to RSS Question feed

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

lang-html