100% width table overflowing div container

Question

I am having issues with an html table that is overflowing it's parent container.

.page {
    width: 280px;
    border:solid 1px blue;
}

.my-table {
    word-wrap: break-word; 
}

.my-table td {
    border:solid 1px #333;
}

<div class="page">
    <table class="my-table">
        <tr>
            <th>Header Text</th>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
            <th>Col 4</th>
            <th>Header Text</th>
        </tr>
        <tr>
            <td>An archipelago is a chain or cluster of islands. The word archipelago is derived from the Greek ἄρχι- – arkhi and πέλαγος – pélagosthrough the Italian arcipelago. In Italian, possibly following a tradition of antiquity, the Arcipelago (from medieval Greek *ἀρχιπέλαγος) was the proper name for the Aegean Sea and, later, usage shifted to refer to the Aegean Islands (since the sea is remarkable for its large number of islands). It is now used to refer to any island group or, sometimes, to a sea containing a large number of scattered islands such as the Aegean Sea.[1]</td>
            <td>some data</td>
            <td>some data</td>
            <td>some data</td>
            <td>some data</td>
            <td>An archipelago is a chain or cluster of islands. The word archipelago is derived from the Greek ἄρχι- – arkhi and πέλαγος – pélagosthrough the Italian arcipelago. In Italian, possibly following a tradition of antiquity, the Arcipelago (from medieval Greek *ἀρχιπέλαγος) was the proper name for the Aegean Sea and, later, usage shifted to refer to the Aegean Islands (since the sea is remarkable for its large number of islands). It is now used to refer to any island group or, sometimes, to a sea containing a large number of scattered islands such as the Aegean Sea.[1]</td>
        </tr>
    </table>    
</div>

How can I force both the header text and the table cell text to wrap in a way that it will fit in its container properly? I would prefer a CSS only method, but am also open to using Javascript (or jQuery) if absolutely necessary.

canon · Accepted Answer · 2018-08-07T18:29:06.390

From a purely "make it fit in the div" perspective, add the following to your table class (jsfiddle):

table-layout: fixed;
width: 100%;

Set your column widths as desired; otherwise, the fixed layout algorithm will distribute the table width evenly across your columns.

For quick reference, here are the table layout algorithms, emphasis mine:

Fixed (source)
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.
Automatic (source)
In this algorithm (which generally requires no more than two passes), the table's width is given by the width of its columns [, as determined by content] (and intervening borders).

[...] This algorithm may be inefficient since it requires the user agent to have access to all the content in the table before determining the final layout and may demand more than one pass.

Click through to the source documentation to see the specifics for each algorithm.

score 66 · Answer 2 · answered Oct 09 '13 at 20:34

66

Try adding

word-break: break-all

to the CSS on your table element.

That will get the words in the table cells to break such that the table does not grow wider than its containing div, yet the table columns are still sized dynamically. jsfiddle demo.

answered Oct 09 '13 at 20:34

Jon Schneider

25,758
23
142
170

11

Even better with `word-wrap: break-word;` – Apolo Jan 28 '16 at 13:46
1

@Apolo - Agreed! I used that as well in my original jsfiddle demo (see the link in the answer body above). – Jon Schneider Jan 28 '16 at 16:01
1

Blink browsers have `word-break: break-word` which works best. – Volvox Sep 14 '17 at 12:31
it's better to use `overflow-wrap` property instead, since it's standardised – Romko Jul 20 '20 at 12:58

score 21 · Answer 3 · answered Jul 06 '11 at 18:28

21

Add display: block; and overflow: auto; to .my-table. This will simply cut off anything past the 280px limit you enforced. There's no way to make it "look pretty" with that requirement due to words like pélagosthrough which are wider than 280px.

answered Jul 06 '11 at 18:28

David Titarenco

32,662
13
66
111

Just for my case: I needed the table to fit all the parent width (on high resolutions), so I surrounded the table with a div and applied your styles to it. Now the table try to use all the parent's width but if table content is overflowing it appears the scroll bar. – José Manuel Blasco Oct 15 '18 at 08:11
This answer worked to keep a `` inside a `
`.
– Jose Manuel Abarca Rodríguez Feb 08 '22 at 22:16

score 3 · Answer 4 · edited Dec 21 '17 at 06:54

3

Try adding to td:

display: -webkit-box; // to make td as block
word-break: break-word; // to make content justify

overflowed tds will align with new row.

edited Dec 21 '17 at 06:54

Stephen Rauch

47,830
31
106
135

answered Dec 21 '17 at 06:29

U_R_Naveen UR_Naveen

720
7
8

score 1 · Answer 5 · edited Jan 09 '19 at 06:30

1

update your CSS to the following: this should fix

.page {
    width: 280px;
    border:solid 1px blue;
    overflow-x: auto;
}

edited Jan 09 '19 at 06:30

Ali

2,702
3
32
54

answered Jan 09 '19 at 05:01

Sugeng Sulistiyawan

11
1

score 1 · Answer 6 · answered Jul 06 '11 at 18:32

Well, given your constraints, I think setting overflow: scroll; on the .page div is probably your only option. 280 px is pretty narrow, and given your font size, word wrapping alone isn't going to do it. Some words are just long and can't be wrapped. You can either reduce your font size drastically or go with overflow: scroll.

100% width table overflowing div container

6 Answers6

Linked