HTML table width not working

This surprisingly simple solution did the trick for me.

table { width: 100%; }
table td, table th { overflow-wrap: anywhere; }

Preview here: https://jsfiddle.net/3m2Lw7d4/

Note: overflow-wrap replaces word-wrap in official CSS3.


There is nothing you can do if the table content is too wide (as in your example), apart from alter the content to make it possible for the browser to show it in a narrower format. Setting width:100%; will have no effect if the content is too wide. The browser will just resort to displaying a horizontal scrollbar.

You can make your content more narrow by:

  • Reducing the number of columns
  • using CSS white-space: nowrap on any of the content, so the browser has the option of wrapping that content to keep the width down.
  • Reduce any margins, borders, padding that you have
  • Reduce the font size
  • Use word-wrap:break-word or word-break: break-all;
  • Overflow the content that doesn't fit within the screen's width with overflow: scroll; (your options are visible, hidden, scroll and auto)

The browser will avoid the scrollbar if it can, but it won't if the content can't fit within the width of the page.


The problem is, the content inside your table requires more space than 100% of your window-size offers.

What you could do, is to use the overflow-property of CSS. Try the following example and chose, wether this is an option for you:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
    .table {
        color: green;
        display: block;
        max-width: 100%;
        overflow: scroll; <!-- Available options: visible, hidden, scroll, auto -->
    }
</style>
</head>
<body>

<table border="1" class="table">

    <tr>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
    </tr>


</table>
</body>
</html>

There are 4 options available for the overflow-property: visible, hidden, scroll and auto. The above example illustrates the scroll-option, which adds a scroll-bar to the table itself.

Tags:

Html

Css

Html Table

Width

Recent Posts