Table in Div overflows from DIV , how can I enable Scrolling on the page NOT the DIV without editing HTML just using CSS?

Question

I have DIV 600px, and there is a table in the Div, because some email addresses are long, wraping is not working (I have used word-wrap: break-word; with no luck)

Also I have tried changing the Width, using !Important, changing Float values etc..

Here is a screenshot of my problem, as you can see there is no option to scroll to the right on the page, This is a problem as my clients screen resolution is low and they need to access all options on the right hand side, which there are no scrolling function to do so.

Please help me out, here is the screenshot (Private info has been removed :)

By the way, if I could get the table to have a fixed width , that will help too. My problem is, that users email address and ID are very long, and because its one word, I cant wrap it. e.g. testtestexample-ecample@thetestexample.schisanexampletestexample.gov.uk So if there is a way to have a fixed size table and wrap all the words, that would help too — Djbinary, Mar 30 '12 at 11:01
PS: The scrolling works on IE, but not on Chrome, my client uses IE only :/ — Djbinary, Mar 30 '12 at 11:13
i think scrollable div is the only solution for you , btw why are you resisting a scroll in the div , if email ids are big and it is one word only then size of the table will increase and eventually your browser will add a scroll for that. — Priyank Patel, Mar 30 '12 at 11:13

score 1 · Answer 1 · answered Mar 30 '12 at 09:35

1

Set overflow: auto for the 600px DIV.

answered Mar 30 '12 at 09:35

Jonas Äppelgran

2,617
26
30

Hi , I tried what you said, but I get a scrolling within the main DIV, not on the actual browser (I am looking to get the scrolling on the browser) Thanks Here is URL of what it looks like now: http://www2.picturepush.com/photo/a/7911690/640/Picture-Box/Table-overflow-2.png – Djbinary Mar 30 '12 at 10:18

Priyank Patel · Answer 2 · 2012-03-30T09:41:02.997

0

What do you exactly want to do , is it that you want to enable a scroll bar

try setting style property of the div

overflow:scroll

edited Mar 30 '12 at 09:41

answered Mar 30 '12 at 09:30

Priyank Patel

6,898
11
58
88

Thanks, but I like the scrolling to be on the browser Horizontal Scrolling) not on the DIV, thank you – Djbinary Mar 30 '12 at 10:20
@Djbinary , but why would you like to add scroll to browser , when your contents are inside the div , I may be wrong but I dont think you can add scrollbar to the browser .. If you dont want scroll in the div then may be increase the size of the div and let the browser add scroll bar automatically – Priyank Patel Mar 30 '12 at 10:23
@Djbinary , also make it a habit of accepting the answers that helped you the most , by doing this more people will come and solve your problems. – Priyank Patel Mar 30 '12 at 10:51
What do I do if my problem hasnt been solved yet? If I select the solution was useful, then everyone might assume I have solved my problem¬?! Im new to SF by the way – Djbinary Mar 30 '12 at 10:56
@Djbinary , ya that is ok ,if not solved dont accept.By the way what is the status now , is it still unsolved – Priyank Patel Mar 30 '12 at 10:58
Yes still unsolved, I will add another comment on my answer now. thanks – Djbinary Mar 30 '12 at 11:00

John P · Answer 3 · 2012-03-30T10:35:04.500

0

Try setting the table-layout attribute to the table and set overflow-hidden to the td to hide the overflowing portion, ie

  table{
    table-layout:fixed;
  }

  td {
    overflow: hidden;
  }

Update with example - this example works in FF 11.0. What browser are you on?

<table class="reference" style="table-layout:fixed; width: 300px;">
<tbody><tr>
<th align="left">Tag</th>
<th align="left">Description</th>
</tr>
<tr>
<td>&lt;col /&gt;</td>
<td style="overflow: hidden;">Definesattributevaluesforoneormorecolumnsinatable</td>
</tr>
</tbody></table>

edited Mar 30 '12 at 10:35

answered Mar 30 '12 at 09:39

John P

15,035
4
48
56

I believe this doesn't work. `overflow` doesn't work on `td` in my experience. Have you tested this? – Bazzz Mar 30 '12 at 09:41
With a combo of attributes: http://stackoverflow.com/questions/509711/why-does-overflowhidden-not-work-in-a-td – John P Mar 30 '12 at 09:54
Thanks for your reply, I added the following but nothing happend: #ctl01_ctl00_SiteContentPlaceHolder_contentMainBody_gvwSearch{ table-layout:fixed; } #ctl01_ctl00_SiteContentPlaceHolder_contentMainBody_gvwSearch td{ overflow:hidden; } – Djbinary Mar 30 '12 at 10:19
Doesnt work on Chrome or IE (Latest versions) This is a very big site with lots of CSS files. – Djbinary Mar 30 '12 at 10:53
I apologise, the site works on Chrome, but not IE (As it is without modifications) – Djbinary Mar 30 '12 at 11:12
@Djbinary , are you using overflow:scroll or overflow:auto , try both and see – Priyank Patel Mar 30 '12 at 11:21
@JohnP, agree. I tested your example in several browser and seem to get a working situation. I've had issues with overflow on td in the past but haven't used it recently. – Bazzz Mar 30 '12 at 11:54
Guys, I am happy using scrolling on the DIV, as it seems I have no other options, this is whay I get when using overflow: http://www5.picturepush.com/photo/a/7912873/640/Picture-Box/Table-overflow-3-1.png However when I scroll to the right to see the rest of my table, the table is messed up, http://www1.picturepush.com/photo/a/7912874/640/Picture-Box/Table-overflow-3-2.png So I have to click on the page again, or minimize / maximize the page again to get the correct display which is: http://www2.picturepush.com/photo/a/7912875/640/Picture-Box/Table-overflow-3-3.png Tried on 5 otherPC/IEs! – Djbinary Mar 30 '12 at 12:33
Good to hear that it worked, but was it the right way to go? Or did you go with the scrolling div? – John P Mar 31 '12 at 05:19
Hi, I went for scrolling DIV, but it still has a bug, which I sent the links above – Djbinary Apr 04 '12 at 12:40

Table in Div overflows from DIV , how can I enable Scrolling on the page NOT the DIV without editing HTML just using CSS?

3 Answers3