Why is the table less wide than the div when they both have the same width?

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Robert - 24 Jun 2006 00:06 GMT

Probably something simple i'm overlooking, taking the below html and
css style settings, when you view in a browser (IE or Mozilla for
example), the table is a tiny bit less wide than the div. Yet I have
set both to the exact same width (99%) and they have the same border
settings. This also happens if i use a width like "800px".

The desired effect is that the table be just above the div as a header
and in the browser both should be the exact same width.

Thx in advance.

(Note i simplified the original html to get rid of as much as possible
that was not relevant).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
</head>
<body>
<table
style="Cursor:hand;border-width:1px;border-style:Solid;border-color:Black;background-color:#FBF5C5;width:99%;border-bottom-width:0px;">
    <tr>
        <td align="left"
id="ctl00_FormPlaceHolder_ExpandingPanel1_expandedgrip"
style="width:1%;display:block;"><img src="/widsplus/something.gif"
width="15" height="19" alt="" /></td><td
class="greytextdarkboldlarge">More Search Options</td><td
id="ctl00_FormPlaceHolder_ExpandingPanel1_expandedchevron"
align="right" style="width:1%;display:block;"><img
src="/widsplus/something.gif" width="25" height="19" alt="" /></td>
    </tr>
</table><div id="ctl00_FormPlaceHolder_ExpandingPanel1"
style="display:block;border-color:Black;border-width:1px;border-style:Solid;width:99%;">
<select name="ctl00$FormPlaceHolder$lbprioritytype">
        <option selected="selected" value="=">=</option>
        <option value="<>"><></option>
        <option value="NULL">Null</option>

    </select>
</div>
</body>
</html>

Reply to this Message

Veerle - 26 Jun 2006 08:57 GMT

Robert schreef:

> Probably something simple i'm overlooking, taking the below html and
> css style settings, when you view in a browser (IE or Mozilla for
> example), the table is a tiny bit less wide than the div. Yet I have
> set both to the exact same width (99%) and they have the same border
> settings. This also happens if i use a width like "800px".

For the table, the width = the width of the table + the width of the
border
For the div, the width = the width of the div without the width of the
border
So your table with border has width = 99%
And your div with border has width = 99% + 2 pixels

I simplified your html (see below) and put the table and the div block
in it, first with border, than without. You now clearly see, that it is
the border that is the trouble.

Solution: get rid of the table. Tables are not meant to be used for
layout, they are meant to use for tabular data. If you do use them for
layout, then you run into problems like this. Use div blocks instead.
Look at the css property float for displaying divs next to each other,
like your table cells.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
</head>
<body>
<h1>With borders</h1>
<table style="border: solid 1px #000000; background-color:#FBF5C5;
width:99%; border-bottom-style: none;">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<div style="border: solid 1px #000000; width:99%; margin: 0px;
padding: 0px; background-color: red"> </div>
<h1>Without borders</h1>
<table style="border-style: none; background-color:#FBF5C5;
width:99%">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<div style="border-style: none; width:99%; margin: 0px; padding: 0px;
background-color: red"> </div>
</body>
</html>

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / June 2006

Why is the table less wide than the div when they both have the same width?