Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Keep Cells in a table the same width 2

Status
Not open for further replies.

brian4321

Technical User
Dec 30, 2003
22
CA

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


 
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]
Cheers!
Laura
 
Thanks Laura,
I've tried a couple different methods but not successful, do you have an example you could point me to?
Thanks
 
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):
Code:
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 [thumbsup2]:
Code:
<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: e: Pete.Raleigh(at)lclimited.co.uk
 
Sometimes, we just have to look at the FAQ section: ;-)
faq215-4499
 
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. [neutral]

Thanks Again
Brian
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top