4

I have a table which has a long line in one of its cells. I need the long line to be split so that it doesn't cause the table to be more than 100% wide. I found that by adding table-layout: fixed and word-wrap: word-break, it will wrap the long cell. However, a side effect of using table-layout is that it causes all columns to have the same width.

You can see an example of that here:

http://jsfiddle.net/RYdLd/2/

How can I make the first column's width auto size to fit only its contents? (i.e. In this example, it should be just wide enough to show the 1 and 2 in that column.)

The data in the table will be loaded dynamically, so a solution which hard codes width values is not good because there's no way to know in advance how wide a column should be. My only option is to use a <table>, I can't use a <div> or some other element.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Senseful
  • 86,719
  • 67
  • 308
  • 465

4 Answers4

3

According to the official specification, when you use a fixed table-layout, the first row's column widths determine the entire table's column widths. If none of them are defined, it will distribute the column widths evenly.

Since there doesn't seem to be any other option, I ended up using the following method:

  1. Loading the data in the table while the table-layout is set to auto.
  2. Reading the width of the columns I want to be dynamic.
  3. Setting those column widths to their current values.
  4. Changing the table-layout to fixed.

Here's an example which isn't perfect (the width gets decreased by a bit):

http://jsfiddle.net/RYdLd/7/

Senseful
  • 86,719
  • 67
  • 308
  • 465
2

I discovered this while wrestling with the same problem:

Setting break-word on an element corresponds exactly to inserting a zero-width space between every character of the text contained inside that element.

Except that this actually works with normal, dynamic tables!

This solution is very fast, since it does not require any Javascript.

(It could however be used from Javascript if desired. Find all cells with break-word, grab all the child text nodes, and insert a zero-width space between every character. Even then, the script would run only once during page load, so this should still be extremely performant.)

Zero-width space is &#8203;

rosenfield
  • 159
  • 1
  • 2
  • 8
  • This [does work](http://jsfiddle.net/RYdLd/71/) for presentation, but if a user tries copying/pasting the text (e.g. into notepad), the blank spaces will be copied as well. – Senseful Jan 10 '11 at 21:10
  • Additionally [](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr) will work, it behaves the same as ​ – exrhizo Aug 04 '17 at 00:09
  • Re: **Copy/Paste** these characters doesn't get copied when using Chrome 59. – exrhizo Aug 04 '17 at 00:11
-1

It's easy to handle/wrap long words in DIVs and fixed tables (table-layout:fixed) - just apply CSS3 word-wrap:break-words.

Within dynamic tables above property does only half of the work. We need additionally to help the browsers find break points.

A bit more detailed explanation can be found in the article Wrap long words within dynamic tables.

user3130351
  • 85
  • 5
-1

You can use: word-wrap css style to break the long sentences.

word-wrap: break-word
Chandu
  • 81,493
  • 19
  • 133
  • 134
  • While this does solve the scrollbar issue, it doesn't solve the one that the question is about (i.e. the first column is still too wide): http://jsfiddle.net/RYdLd/2/ – Senseful Dec 31 '10 at 04:56
  • add a width attribute to the first table cell e.g: 1 – Chandu Dec 31 '10 at 04:59
  • The problem is that its contents are loaded dynamically, so I don't know what width it should be. – Senseful Dec 31 '10 at 05:01
  • when you don't specify a width the cells are distributed evenly(same width) – Chandu Dec 31 '10 at 05:04
  • 1
    Take a look at this example: http://jsfiddle.net/RYdLd/4/ you can see that the first column is auto sized to fit its contents. – Senseful Dec 31 '10 at 05:06
  • Cool..I was not aware of that property...thx for letting me know – Chandu Dec 31 '10 at 05:07
  • Sorry... I didn't delete enough in that example, the auto size has nothing to do with `overflow-x: auto;` see this new one which has the same behavior: http://jsfiddle.net/RYdLd/5/ – Senseful Dec 31 '10 at 05:11
  • Thanks for the info about word-wrap, I updated the question to use `word-wrap` in order to simplify the question. As a result, this answer is no longer valid. – Senseful Dec 31 '10 at 14:23