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

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.

   Explore Teams Create a free Team
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, 6 months ago Modified 2 months ago Viewed 1.4m times 684

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 Follow edited Jun 16, 2017 at 19:58 Brian Tompsett - 汤莱恩 5,8377272 gold badges6060 silver badges132132 bronze badges asked Dec 16, 2010 at 4:44 Misha MoroshkoMisha Moroshko 170k228228 gold badges515515 silver badges757757 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) 760

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 Follow edited May 3, 2020 at 17:33 Cristian Ciupitu 20.7k77 gold badges5353 silver badges7878 bronze badges answered Dec 16, 2010 at 6:04 ptpatersonptpaterson 9,32144 gold badges2828 silver badges4040 bronze badges 5

• 92 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
• 14 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 | 241

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 Follow edited Mar 6, 2014 at 16:01 vanthome 4,8863838 silver badges4545 bronze badges answered Apr 8, 2013 at 16:15 HyathinHyathin 2,41911 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 155

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 Follow answered May 6, 2012 at 22:25 KAsunKAsun 1,60511 gold badge1010 silver badges22 bronze badges 5

• 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

Add a comment | 77

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 Follow answered Sep 6, 2012 at 12:28 scrrrscrrr 5,28077 gold badges4343 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 | 45

You need to write this inside the corresponding CSS

table-layout:fixed; Share Follow edited Aug 13, 2013 at 13:10 doubleDown 8,26811 gold badge3434 silver badges4848 bronze badges answered Dec 16, 2010 at 4:47 vinoth kumarvinoth kumar 65922 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 Follow edited Aug 13, 2013 at 13:09 doubleDown 8,26811 gold badge3434 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 | 7

Setting this:

style="min-width:100px;"

Worked for me.

Share Follow edited May 30, 2019 at 9:08 Jack Bashford 43.8k1111 gold badges5454 silver badges8181 bronze badges answered May 30, 2019 at 8:47 Priyanka AroraPriyanka Arora 43755 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 Follow edited Sep 8, 2013 at 21:01 JustinStolle 4,33233 gold badges3838 silver badges4949 bronze badges answered May 10, 2013 at 21:40 Svetoslav MarinovSvetoslav Marinov 1,5281414 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 Follow answered Nov 2, 2018 at 14:52 eicksleicksl 89088 silver badges88 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 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 Follow answered May 4, 2015 at 8:19 Mitja GustinMitja Gustin 1,7711313 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 Follow edited Jun 3, 2017 at 14:48 answered Jun 3, 2017 at 14:38 Willy RichardsonWilly Richardson 11644 bronze badges Add a comment | 3

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 Follow edited May 3 at 15:54 answered Dec 9, 2022 at 20:17 FranCarstensFranCarstens 1,31388 silver badges1414 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 Follow edited Oct 6, 2022 at 11:13 answered Oct 6, 2022 at 11:07 RafaSashiRafaSashi 17k88 gold badges8787 silver badges9696 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 Follow answered Jul 11, 2012 at 0:35 Aaron AverillAaron Averill 23311 silver badge77 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 Follow edited Dec 16, 2019 at 8:52 answered Dec 16, 2019 at 8:37 Dan MacakDan Macak 16.6k44 gold badges2929 silver badges4848 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 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 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
• Community Products Roadmap Update, July 2024
• Featured on Meta
• We spent a sprint addressing your requests — here’s how it went
• Upcoming initiatives on Stack Overflow and across the Stack Exchange network...
• Policy: Generative AI (e.g., ChatGPT) is banned
• The [lib] tag is being burninated
• What makes a homepage useful for logged-in users

Linked

-1 Same width and height column by css 671 Word-wrap in an HTML table 124 Force table column widths to always be fixed regardless of contents 87 HTML table: keep the same width for columns 41 Table cell widths - fixing width, wrapping/truncating long words 14 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

87 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 124 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

• Out of love for something/someone
• How to help lemon tree damaged in a hail storm?
• 2024 UK election: Which demographic factors explain the geography?
• Has the Supreme Court given any examples where presumptive immunity would be overcome?
• Does installing Ubuntu Deskto on Xubuntu LTS adopt the longer Ubuntu support period
• Why are responses to an attack in a cycling race immediate?
• ForeignFunctionLoad / RawMemoryAllocate and c-struct that includes an array
• How did I obtain a wildcard SSL certificate without port 80 opened for a challenge?
• Do you always experience the gravitational influence of other mass as you see them in your frame?
• Seeing perfectly camouflaged objects
• Can player build dungeons in D&D? I thought that was just a job for the DM
• firefox returns odd results for file:/// or file:///tmp
• Using 50 Ω coax cable instead of passive probe
• Can the differential be unitless while the variable have an unit in integration?
• Setting Stack Pointer on Bare Metal Rust
• Why does the length of an antenna matter when electromagnetic waves propagate perpendicular to the antenna?
• How to optimize performance with DeleteDuplicates?
• A check given by castling: is it a discovered check or a special case?
• Zener behaving strangely
• In-Place Reordering of Doubly Linked List Nodes to Ensure Memory Contiguity
• Cliffhanger ending?
• Sort Number Array
• String Decryption in C (BIO 2022 Q1)
• Who is the distant man in the final frames?

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