Table width of 100% excludes scrollbar under XHTML 1.0

Posted on 2007-07-22
Last Modified: 2013-11-19
When using
I have an intranet application that is only required to work for IE.
There scrolling tables inside a divs as follows:
      overflow-y: scroll;
      border-color: #AEB1AD;
      border-style: solid;
      border-width: 1px;
<div class="scrollbox" style="width:xpx;height:ypx">
<table width="100%">

When I use
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

it all looks good

but when I use

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >

A horizontal scroll bar appears to account for the with of the vertical scrollbar which is now no longer accounted for the the 100% width of the table.

I need to use XHTML 1.0 for other reasons.

My Question is: is there a tidy way to make the width of the table exactly fit its parent div INCLUDING the width of the vertical scroll bar under XHTML 1.0.

Question by:dchell
    LVL 17

    Expert Comment

    I can't think of anyway to do that short of assuming the scroll bar will always be there and setting the width based on that.

    Author Comment

    I'm happy to have the scrollbar mermanently in place, But the outer div must stretch to the size of the window and the table has to stretch to the size of the div minus the scrollbar width, easy enough to do in javascript, just wondered if there was a cleaner way to do it.
    LVL 17

    Accepted Solution

    You can force the scrollbar to always be on and set the widths based on that...

    I would use javascript.

    Author Comment

    Looks like it will have to be javascript then

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Course: HTML5 for Beginning Beginners

    Are you looking for an efficient introduction to HTML5? Have you tried other HTML5 courses and found them too complex? Do you need just the basics of HTML5 to use with Wordpress or other content management system? If you said yes to any of these questions, this course is for you.

    Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
    This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
    In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
    The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

    761 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    9 Experts available now in Live!

    Get 1:1 Help Now