Table colums won't line-up (expand or contract correctly)

JCO · Mar 7, 2006

Issues with a table not displaying correctly.
A table with 5-columns is easy to create. I want the first two columns and
last two columns to remain fix and the center column to be 100%. By doing
this, I'm hoping that the center column will expand and contract when you
change your browser size. Here's the bigger issue. If I have a table with
4-rows as displayed below, then created another 4-row table underneath
(maybe a blank line in between) I want the two tables to line up together.
This does not happen. Why?

This is what I have:
<table border="1" cellpadding="3" cellspacing="3" width="100%"
id="table5" style="border-color: #008080">
<tr>
<td width="100" align="center">Date Start</td>
<td width="100" align="center">Date End</td>
<td width="100%" align="center">Activity</td>
<td width="100" align="center">Expenses</td>
<td width="100" align="center">Payments</td>
</tr>

This will repeat for each row that I require.

Guest · Mar 8, 2006

You've got it. It lined up for me!

Warner Wang · Mar 8, 2006

Hi All,

Thank you for choosing Microsoft Newsgroups!

I have performed a test on my side, this issue does not occur on me. I
suggest you simply copy this code twice to perform a test. Please refer to
the code below.

<table border="1" cellpadding="3" cellspacing="3" width="100%"
id="table5" style="border-color: #008080">
<tr>
<td width="100" align="center">Date Start</td>
<td width="100" align="center">Date End</td>
<td width="100%" align="center">Activity</td>
<td width="100" align="center">Expenses</td>
<td width="100" align="center">Payments</td>
</tr>

</table>

<table border="1" cellpadding="3" cellspacing="3" width="100%"
id="table5" style="border-color: #008080">
<tr>
<td width="100" align="center">Date Start</td>
<td width="100" align="center">Date End</td>
<td width="100%" align="center">Activity</td>
<td width="100" align="center">Expenses</td>
<td width="100" align="center">Payments</td>
</tr>

</table>

If issue still occurs, please collect the following information for me.
Thank you!

1. The screenshot of the error. My email address is (e-mail address removed)

Create a screenshot
=================
a) When the message appears in the window, press PrScrn (the key right of
F12).
b) Click start menu->all programs->accessories->paint.
c) Press Ctrl+V to paste the screen shot into the paint, and save the
picture in GIF file type.

2. The source code of the whole page.

If you have anything unclear, please feel free to let me know.

Sincerely,
Warner Wang
Microsoft Online Partner Support

Get Secure! - www.microsoft.com/security

=====================================================
When responding to posts, please "Reply to Group" via
your newsreader so that others may learn and benefit
from your issue.
=====================================================

This posting is provided "AS IS" with no warranties, and confers no
rights.Issues with a table not displaying correctly.

Stefan B Rusynko · Mar 8, 2006

Try
<div align="center">
<table border="1" cellpadding="3" cellspacing="3" width="100%">
<tr>
<td width="100" align="center">Date Start</td>
<td width="100" align="center">Date End</td>
<td align="center">Activity 1</td>
<td width="100" align="center">Expenses</td>
<td width="100" align="center">Payments</td>
</tr>
</table>
 
<table border="1" cellpadding="3" cellspacing="3" width="100%">
<tr>
<td width="100" align="center">Date Start</td>
<td width="100" align="center">Date End</td>
<td align="center">Activity 2</td>
<td width="100" align="center">Expenses</td>
<td width="100" align="center">Payments</td>
</tr>
</table>
</div>

You could also use 2 Divs (nested in an outer div) if you don't want the tag
- or an outer 2 row, 1 colum table to contain the 2 inner tables

Note
Setting the center cell to 100% can result in some browsers not displaying it the same,
- so don't set the width on it and it will automaticall fill the available table width

FYI
They will line up Only if the content in the 100 px cells does not stretch any of the 100 px cells
- table/cell sizes are always minimums based on cell content

--

_____________________________________________
SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
"Warning - Using the F1 Key will not break anything!" (-;
To find the best Newsgroup for FrontPage support see:
http://www.frontpagemvps.com/FrontPageNewsGroups/tabid/53/Default.aspx
_____________________________________________

| Issues with a table not displaying correctly.
| A table with 5-columns is easy to create. I want the first two columns and
| last two columns to remain fix and the center column to be 100%. By doing
| this, I'm hoping that the center column will expand and contract when you
| change your browser size. Here's the bigger issue. If I have a table with
| 4-rows as displayed below, then created another 4-row table underneath
| (maybe a blank line in between) I want the two tables to line up together.
| This does not happen. Why?
|
| This is what I have:
| <table border="1" cellpadding="3" cellspacing="3" width="100%"
| id="table5" style="border-color: #008080">
| <tr>
| <td width="100" align="center">Date Start</td>
| <td width="100" align="center">Date End</td>
| <td width="100%" align="center">Activity</td>
| <td width="100" align="center">Expenses</td>
| <td width="100" align="center">Payments</td>
| </tr>
|
| This will repeat for each row that I require.
|
|

JCO · Mar 8, 2006

Yes Stephan... that works. However, I don't understand it. I thought
adding the percentage gave that column the permission to change as the page
size is dragged (sort of speak). Yet giving it nothing, seems to work.

Thanks

Stefan B Rusynko said:
Try
<div align="center">
<table border="1" cellpadding="3" cellspacing="3" width="100%">
<tr>
<td width="100" align="center">Date Start</td>
<td width="100" align="center">Date End</td>
<td align="center">Activity 1</td>
<td width="100" align="center">Expenses</td>
<td width="100" align="center">Payments</td>
</tr>
</table>
 
<table border="1" cellpadding="3" cellspacing="3" width="100%">
<tr>
<td width="100" align="center">Date Start</td>
<td width="100" align="center">Date End</td>
<td align="center">Activity 2</td>
<td width="100" align="center">Expenses</td>
<td width="100" align="center">Payments</td>
</tr>
</table>
</div>

You could also use 2 Divs (nested in an outer div) if you don't want the

- or an outer 2 row, 1 colum table to contain the 2 inner tables

Note
Setting the center cell to 100% can result in some browsers not displaying it the same,
- so don't set the width on it and it will automaticall fill the available table width

FYI
They will line up Only if the content in the 100 px cells does not stretch any of the 100 px cells
- table/cell sizes are always minimums based on cell content

--

_____________________________________________
SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
"Warning - Using the F1 Key will not break anything!" (-;
To find the best Newsgroup for FrontPage support see:
http://www.frontpagemvps.com/FrontPageNewsGroups/tabid/53/Default.aspx
_____________________________________________

| Issues with a table not displaying correctly.
| A table with 5-columns is easy to create. I want the first two columns and
| last two columns to remain fix and the center column to be 100%. By doing
| this, I'm hoping that the center column will expand and contract when you
| change your browser size. Here's the bigger issue. If I have a table with
| 4-rows as displayed below, then created another 4-row table underneath
| (maybe a blank line in between) I want the two tables to line up together.
| This does not happen. Why?
|
| This is what I have:
| <table border="1" cellpadding="3" cellspacing="3" width="100%"
| id="table5" style="border-color: #008080">
| <tr>
| <td width="100" align="center">Date

Start said:
| <td width="100" align="center">Date

End said:
| <td width="100%"

align="center"> said:
| <td width="100"

Warner Wang · Mar 10, 2006

I am glad to hear Stephan's suggestion helps. Thank Stephan for his great
experience sharing.

If you need further assistance on this issue, please feel free to let us
know. We are glad to be of assistance.

Sincerely,
Warner Wang
Microsoft Online Partner Support

Get Secure! - www.microsoft.com/security

=====================================================
When responding to posts, please "Reply to Group" via
your newsreader so that others may learn and benefit
from your issue.
=====================================================

This posting is provided "AS IS" with no warranties, and confers no rights.

Table colums won't line-up (expand or contract correctly)

JCO

Guest

Warner Wang

Stefan B Rusynko

JCO

Warner Wang