Menu
<!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.
362
To set the table width in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <table> tag, with the CSS property width.
To manipulate the height or width of an entire table, place the size attribute (either "WIDTH=" or "HEIGHT=") within the <TABLE> code. To manipulate individual cells, place the size attribute within the code for that cell.
Select your table. On the Layout tab, in the Cell Size group, click AutoFit. Click Fixed Column Width.
Just add style="table-layout: fixed ; width: 100%;" inside <table> tag and also if you do not specify any styles and add just style=" width: 100%;" inside <table> You will be able to resolve it.
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.
92
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
