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

Robert

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.dt d">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
</head>
<body>
<table
style="Cursor:h and;border-width:1px;borde r-style:Solid;bor der-color:Black;bac kground-color:#FBF5C5;w idth:99%;border-bottom-width:0px;">
<tr>
<td align="left"
id="ctl00_FormP laceHolder_Expa ndingPanel1_exp andedgrip"
style="width:1% ;display:block; "><img src="/widsplus/something.gif"
width="15" height="19" alt="" /></td><td
class="greytext darkboldlarge"> More Search Options</td><td
id="ctl00_FormP laceHolder_Expa ndingPanel1_exp andedchevron"
align="right" style="width:1% ;display:block; "><img
src="/widsplus/something.gif" width="25" height="19" alt="" /></td>
</tr>
</table><div id="ctl00_FormP laceHolder_Expa ndingPanel1"
style="display: block;border-color:Black;bor der-width:1px;borde r-style:Solid;wid th:99%;">
<select name="ctl00$For mPlaceHolder$lb prioritytype">
<option selected="selec ted" value="=">=</option>
<option value="<>">& lt;></option>
<option value="NULL">Nu ll</option>

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

Jun 23 '06 #1

Subscribe Reply

2026

Veerle

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.dt d">
<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>

Jun 26 '06 #2

Similar topics

8469

Put vertically centered <div> inside a top-aligned table cell

by: Kai Grossjohann | last post by:

I have a table which contains a top-aligned table cell: .... <tr style="height:40"> ... <td colspan="1" rowspan="2" align="left" valign="top" style="overflow:hidden;"> ...contents.explained.later... </td> ...

HTML / CSS

7767

Help with table width and CSS relative positioning

by: Stephen Weatherly | last post by:

Could anyone please help me with a problem I am having with my table widths??? If I have 2 images within a td tag, but using CSS relative positioning I position one over the top of the second (I am placing a transparent gif over the top of a normal gif) then the width of my table is large enough to accommodate both images side by side My browsers (both IE ad Firefox) do not appear take into account the relative positioning of my...

HTML / CSS

5581

Emulating a table layout purely using CSS

by: Anthony Williams | last post by:

Good morning, I'm currently designing a site, using CSS, and wish to create a variable width two-column layout, with header and footer, and one fixed-width column on the left. Previously, I would have used a table to do this, using the following code: <table width="100%">

HTML / CSS

1778

Table widths problem

by: kiran | last post by:

Hi All I have 2 tables, Table1's width is specified as 100% and Table2's width as 1004px. If the page is viewed in 1024 res, both tables stretch across the window, but if the window is resized (say about 500px wide), then Table1's width is 500px but Table2 still stretch across the window. Is it possible to make Table1 also to stretch across the window, on

HTML / CSS

36388

Displaying a scrollable table with fixed head?

by: Michael Schuerig | last post by:

I'm trying to do something seemingly very simple, but it's brought me close to crushing my head on the keyboard. All I want is a table where the head row is fixed and the body columns below are scrollable (with the ordinary scrollbars, no less). Whatever I try, the columns in the head and the body aren't aligned; the widths are computed independently which gives a completely ragged look. Michael --

HTML / CSS

117

18703

grid structures: TABLE/TR/TD vs. DIV

by: phil-news-nospam | last post by:

Is there really any advantage to using DIV elements with float style properies, vs. the old method of TABLE and TR and TD? I'm finding that by using DIV, it still involves the same number of elements in the HTML to get everything just right. When you consider the class attribute on the DIV elements, there's not much size savings anymore for using DIV. There are other disadvantages to not using TABLE/TR/TD, such as the lack of ability...

HTML / CSS

1224

how can I format a TABLE like this?

by: Nobody | last post by:

Ok, I've got my page laid out pretty much how I want it, but can't figure out one part... my "content" area is a fixed width table with 2 columns... COL A = 600px wide & COL B = 170px wide... COL A will show the list of available items... this is the part I'm having trouble with. COL B is irrelevant for this discussion. I want each item to be about 150px wide (about 25% of the width of 600

ASP.NET

4235

vertical position of wide <table> in 3 column <div> css

by: slartybartfast | last post by:

I'm new(ish) to css, comfortable using tables, but trying real hard to move away. Please see http://84.9.125.31/developer/css_test/test5.html NB This issue is with IE & Opera - I've tried IE 6&7 and both have the same result. It works fine in FF. Thanks to Petr Stanicek for the original example. As you can see the table is 800px wide in the middle column and it's vertical position is affected by the amount of text in the left or right...

HTML / CSS

2293

Implied width of implied center column in 3 column table

by: Csaba Gabor | last post by:

I have a table with 3 rows, and two pieces of data to display in each row. However, the first element of the last two rows and the 2nd element of the 1st row are very short. This would seem to imply three columns where the first and last columns are narrow and the (implied) middle one getting the bulk of the width. <table border id=tbl> <tr><td colspan=2><nobr>This is supposed to be long</nobr></ td><td>Fred</td></tr>

HTML / CSS

11564

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

11337

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

10686

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

9886

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

8250

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

7423

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

6111

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

4940

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

3541

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General