How to fit table rows that are too big for page display?

Question

I have a table:

    table.tablesorter {
    border: 1px solid #D9D9D9;


}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
    background-color: #04659D;
    border-bottom: 1px solid #0F5E76;
    border-left: 1px solid #0F5E76;
    font-weight: bold;
    text-align:left;
    padding: 5px 19px 5px 9px;
    color: #fff;
}

Some of the text in the table is too big and is being cut from the page, I have try using word-wrap:break-word; and setting width but nothing its working the text still overflows?

Any tips on how i can fix this?

have you tried playing with `font-size` or `line-height`? might be useful to post the output somehow, maybe using jsfiddle...? — benomatis, May 29 '14 at 18:47
i did try to do it on jsfiddle but i cant get it to show with the overflow — user3591637, May 29 '14 at 19:01
What do you mean by "can't get it to show"? Do you mean it works in JSFiddle and doesn't on your own site? — Shawn Taylor, May 30 '14 at 00:24
possible duplicate of [How to wrap text using CSS?](http://stackoverflow.com/questions/3949762/how-to-wrap-text-using-css) — Déjà vu, May 30 '14 at 00:45

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

0

Give your table element a fixed table-layout:

table.tablesorter {
    ...
    table-layout: fixed;
}

From the CSS2.1 specification (linked above):

17.5.2.1 Fixed table layout

With this (fast) algorithm, the horizontal layout of the table does not depend on the contents of the cells; it only depends on the table's width, the width of the columns, and borders or cell spacing.

edited Jun 20 '20 at 09:12

Community

1
1

answered May 29 '14 at 18:47

James Donnelly

126,410
34
208
218

benomatis · Answer 2 · 2014-05-30T04:30:42.823

0

You may want to give this a try: I added the word inside a div and gave it a fixed width plus the word wrap, and it worked for me:

<div id="test">#DecimalFormat(total/counter)#</div>

#test {
    word-wrap:break-word;
    width:40px;
}

Here is your updated jsfiddle

EDITED: While my suggestion works perfectly in the above demo, if it doesn't work in your specific case, you may need to do some cleanup of your code and maybe use !important as a workaround (ie. word-wrap:break-word !important; width:40px !important;), or try adding display:block - that might help too.

edited May 30 '14 at 04:30

answered May 29 '14 at 19:23

benomatis

5,536
7
36
59

what do you mean by "didn't work"? have you had a look at the demo? the word is wrapped, isn't that what you wanted? what was it then...? – benomatis May 29 '14 at 19:48
yes i look at the demo and try it on mine and it doesnt fix the issue – user3591637 May 29 '14 at 21:13

score 0 · Answer 3 · answered May 29 '14 at 23:53

0

What is the markup of your table? Perhaps your table's width isn't wide or tall enough to compensate for the auto-adjusting nature of the table cell.

answered May 29 '14 at 23:53

lindsay

972
2
11
21

score 0 · Answer 4 · answered Mar 10 '16 at 11:57

You could add a scrollbar to the cells that have too long words.

just add the following:

table.tablesorter tbody td {
    max-width: 250px;// you can use any width you like, the scrollbar will show up only when a cell exceeds the max-width.
    overflow-x: auto;
}

another option would be to use white-space: normal, see: http://www.w3schools.com/cssref/pr_text_white-space.asp

for example

table.tablesorter tbody td {
    white-space: normal;
}

If this does not work to wrap your text inside a cell, you should check your source and see if there is anything that overwrites your css and fix it.

How to fit table rows that are too big for page display?

4 Answers4