0

I want a table to get the same width as the window and if it´s to wide I want to be able to scroll the table. Today the table gets wider then the window and you have to use the scrollbar on the window instead of the scrollbar on the div that contains the table.

(I have noticed that if I remove the first table it works great, but I can´t remove that because my html-code will be inserted in a page that has this table-tag.)

<table style="width:100%;">
<tr>
    <td>
        <div style="width:100%;overflow:scroll;">
            <table style="width:100%;overflow:hidden;">
                <tr>
                    <td>
                        <div style="width:900px;">Kolumn123</div>
                    </td>
                    <td>
                        <div style="width:900px;">Kolumn123</div>
                    </td>
                </tr>
            </table>
        </div>
    </td>
</tr>

Here is a JSFiddle demo

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
user1297771
  • 13
  • 1
  • 6
  • have a look here http://stackoverflow.com/a/6850319/3383479 –  Apr 15 '14 at 06:59
  • Try to remove your specific width `style="width:900px;"`. What is your purpose of adding that specific width? – JunM Apr 15 '14 at 07:00
  • It is better to create classes with `CSS` than put directly your width in the attributes –  Apr 15 '14 at 07:01
  • Thanks for your replay! I have to have the columns a specific width so it´s not possible to remove the width property. – user1297771 Apr 15 '14 at 07:02
  • Thanks Inanikian! I will have a look at that link. (In my code I have css-classes but here it´s easier to show with inline styles.) – user1297771 Apr 15 '14 at 07:03
  • Try with `table-layout:fixed` for the first table ``
     – James Apr 15 '14 at 07:05

2 Answers2

0

The div's width needs to be determined to be smaller than its inner table. Because here it is set to be 100% and everything will be calculated bottom down that makes the scrollbar appear at the outmost container. If you cannot change the first table, then try to use javascript to get the window's size and set it to the div.

thethanghn
  • 319
  • 2
  • 5
  • 21
  • Thanks for your replay! I would like to try to do this without javascript, but maybe it´s not possible. When I remove the outer table it works fine, so I realy hope there is a way to make it work with that table tag. – user1297771 Apr 15 '14 at 07:21
0

try this--

<div style="overflow: scroll;">
<table>
    <tbody>
      <tr>
        <td>
            <div style="width:100%;">
                <table style="width:100%;overflow:hidden;">
                    <tbody><tr>
                        <td>
                            <div style="width:900px;">Kolumn123</div>
                        </td>
                        <td>
                            <div style="width:900px;">Kolumn123</div>
                        </td>
                    </tr>
                </tbody></table>
            </div>
        </td>
    </tr>
  </tbody>
 </table>
</div>
shashank
  • 566
  • 3
  • 10
  • 31
  • Thanks for your replay! This works fine, but in my case I can only change the html from the first div tag. This is because my html is inserted in an already existing html-page. – user1297771 Apr 15 '14 at 09:00