CODEWITHSUNDEEP
htmlcsswidthhtml-table
user2959594
user2959594

Reputation: 413

HTML table width not working

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

Upvotes: 37

Views: 102823

Answers (7)

shweta ramani
shweta ramani

Reputation: 400

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>

Upvotes: 11

humbads
humbads

Reputation: 3422

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.

Upvotes: 9

Shakoor Hussain Attari
Shakoor Hussain Attari

Reputation: 1821

For bootstrap wrap your table element with .table class in a wrapper <div> with the .table-responsive class. Try this code. copied form here

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Upvotes: -1

Stevoh
Stevoh

Reputation: 41

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>

Upvotes: 3

Thomas Trabelsi
Thomas Trabelsi

Reputation: 330

you can put a class in your table like 

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

, and from your css you put 

  .size{

             width : 100%;

             }

and you should put the link of your css between like this :

<link href="css/YOUR_CSS.css" rel="stylesheet" type="text/css" media="all" />

Upvotes: -5

tomsullivan1989
tomsullivan1989

Reputation: 2780

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.

Upvotes: 25

DonnyDee
DonnyDee

Reputation: 406

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.

Upvotes: 26

Related Questions