Keep Cells in a table the same width 2

[brian4321]

Keep Cells in a table the same width

I know this is a pretty basic question, but...

I need to build a table with 1 row and 7 columns that will remain the SAME WIDTH regardless of the TEXT I place inside.

I've tried changing the table format from % to pixels but the width of the table still expands and contracts depending on the size of text I place in the box.

It's ok if the cell expands vertically to accommodate the text but I need to keep the width of all the cells the same.

Thanks for your advice

 

[LTeeple]

Hi there,
You need to keep the table width at pixels, and the td cells at pixels.

Also make sure that the nowrap attribute for td is NOT set.



Cheers!
Laura

 

[brian4321]

Thanks Laura,
I've tried a couple different methods but not successful, do you have an example you could point me to?
Thanks

 

[WartookMan]

Two ways to do this.
1. Wrap each of the headings in a span and control the properties of the span. The following will clip the text in the box (hide it if it is longer than the cell width), but you can play around with the height, and the scroll setting (try setting it to "auto", and "scroll" and see what happens):

span.head {
	border: 1px solid #999999;
	overflow: hidden;
	white-space: nowrap;
	width: 100px;
}
tr.head {
	background-color: #f0f0f0;
}
</style>
<table width="700">
<tr class="head">
	<td><span class="head">Heading 1</span></td>
	<td><span class="head">Heading 2</span></td>
	<td><span class="head">Heading 3 which is really long</span></td>
	<td><span class="head">Heading 4</span></td>
	<td><span class="head">Heading 5</span></td>
	<td><span class="head">Heading 6</span></td>
	<td><span class="head">Heading 7</span></td>
</tr>
<tr>
	<td colspan="7">The rest goes in here...</td>
</tr>
</table>

2. You mentioned that it can stretch vertically - so - simply remove the "white-space: nowrap" from the above style sheet. If your title is longer than the width of the cell (ie there are no white spaces in it), then you should probably still keep the "overflow: hidden" setting. Here is an example worth a look at... notice the 4th cell clips the title :

<style>
span.head {
	border: 1px solid #999999;
	overflow: hidden;
	width: 100px;
}
tr.head {
	background-color: #f0f0f0;
}
</style>
<table width="700">
<tr class="head">
	<td><span class="head">Heading 1</span></td>
	<td><span class="head">Heading 2</span></td>
	<td><span class="head">Heading 3 which is really long</span></td>
	<td><span class="head">Headingtitlewithnowraps 4</span></td>
	<td><span class="head">Heading 5</span></td>
	<td><span class="head">Heading 6</span></td>
	<td><span class="head">Heading 7</span></td>
</tr>
<tr>
	<td colspan="7">The rest goes in here...</td>
</tr>
</table>

Hope this helps.

Pete.


Web Developer & Aptrix / IBM Lotus Workplace Web Content Management (LWWCM) Specialist
w:

http://www.lwwcm.com/

e: Pete.Raleigh(at)lclimited.co.uk

 

[BillyRayPreachersSon]

Check out this thread (thanks for the link, Pete ;o)...

thread215-824750

Hope this helps,
Dan

 

[medic]

Sometimes, we just have to look at the FAQ section: ;-)
faq215-4499

 

[brian4321]

Thanks for the FAQ from medic and the 2 methods from WartookMan.

I would like to take a look at the Thread offered by

BillyRayPreachersSon. (Programmer)

Thread215-824750

... but, I was unable to open the thread.

Thanks Again
Brian