HTML table width not working

html css width html-table

79,129

Solution 1

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.

Solution 2

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.

Solution 3

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.

Solution 4

Just need to apply table-layout: fixed

table {
table-layout: fixed;
}

table tr td {
max-width: 100%;
overflow-x: auto;
}

<table border="1" width="100%">
  <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>

Solution 5

You can put an element into the cells - that's what I did.

<table>
    <tr>
        <td><div style="width:200px">YOUR CONTENT</div></td>
        <td><div style="width:200px">YOUR CONTENT</div></td>
        <td><div style="width:200px">YOUR CONTENT</div></td>
        <td><div style="width:200px">YOUR CONTENT</div></td>
    </tr>
    <tr>
        <td><div style="width:200px">YOUR CONTENT</div></td>
        <td><div style="width:200px">YOUR CONTENT</div></td>
        <td><div style="width:200px">YOUR CONTENT</div></td>
        <td><div style="width:200px">YOUR CONTENT</div></td>
    </tr>
</table>

View more solutions

79,129

user2959594

Updated on January 13, 2021

Comments

user2959594 over 3 years

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

    <table border="1" width="100%">

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

I am trying to set the table width to 100% for above table but it has no effect it goes beyond window width. how do i change the width of table so it is same size as window.

Mr Lister over 10 years

You can't fit all that in 100% anyway. So, what did you expect to happen? If you explain what effect you're hoping for, maybe we can help achieve that.

Mr Lister over 10 years

You should test these things before you post. If you had tested, then you'd have seen this solution has exactly the same problem as the OP's. Even if you corrected the errors in your example.
MarsOne over 10 years

Sorry to be frank, But looking at your solution gave me a headache. thanks.
Thomas Trabelsi over 10 years

if you begin in programation, you will see that html and css are in "couple" generaly , it's mean that css class design you html code owing to css code. So , you create a new file with .css and you call this page with the <link> that i pet
Mr Lister over 10 years

There are other things you could do. Change the font size, word-wrap:break-word etc. it's even possible to keep the table at 100% but to have the content overflow out of it. I just don't know which of these effects the OP was hoping to achieve.
Mr Lister over 10 years

You can pet all you like, but answers here are supposed to have solutions to problems, not provide more problems. After your edit, there's still an error. And like I said, it won't work even without errors!
IAmMearl over 10 years

I'll also throw in CSS's word-break: break-all;
Shadow The Kid Wizard over 10 years

Your CSS got wrong syntax. And even so, setting 100% width won't solve the original problem posted in this question. Advising to use CSS instead of inline style or attributes is good, but do that in comment not as an answer.
JGallardo about 10 years

It would help if you gave an actual example and not just use bullet points.
Aaronius over 9 years

What is "programation"?
Robin over 3 years

This is the simplest way, it works fine for me.
alds over 2 years

Shouldn't CSS be white-space: normal? I had similar problem where some table header text where wrapped in <span> with white-space: no-wrap. Nice header formatting for wide screens but prevents width:100% for smaller.