Solved

How do I constrain the width of a table cell?

Posted on 2011-03-25
4
251 Views
Last Modified: 2012-05-11
In the application I'm developing I have about 5 layers of nested lists. Each <li> contains a one row table. This makes it possible to display tabular data on a decreasing level of quantity. And it also makes it possible to have the table/rows hidden and appearing on clicking a parent row.

I would have preferred to have set up one table and use <tbody> tag to differentiate between levels, but that and the table-row-group is not supported by IE 7 or below so I had to come up the the above alternate solution. With one table I would have been more easily able to constrain the width of cells in columns, with all cells in a column having the same assigned width, but I have one-row tables and I'm trying to contrain the width of each cell and no matter what I've done I haven't gotten it to work.

I've tried simply setting the width within the html <td> tag, e.g. <td width="210">

I've tried setting the width with CSS, e.g.
table.rpd_row td.toleft{
	text-align:left;
	min-width:210px;
	width:210px;
	max-width:210px;
}

Open in new window


Neither of these methods keep the width of the cell at one set width. If a longer text is put in that cell, even though the text is not as wide as the cell, it expands the width of it.

Anyone have an idea how I can handle this?

Thanks
0
Comment
Question by:denewey
  • 2
4 Comments
 
LVL 29

Accepted Solution

by:
Randy Downs earned 500 total points
ID: 35217689
Try this - http://vinhboy.com/blog/2009/02/13/ie7-table-width/

Finally I found this property

table-layout: fixed;
0
 
LVL 16

Expert Comment

by:JF0
ID: 35217714
Can you provide a link or source code?
0
 

Author Comment

by:denewey
ID: 35217909
I'm not sure what to make of this.

table-layout: fixed; was an excellent answer, but when I applied it, it handled the tables I was having trouble with and broke the ones that were fine. I'll mess around with is some more and see what I can sort out.

Thanks
0
 

Author Closing Comment

by:denewey
ID: 35218478
This solution made it possible for me to control the cell widths in IE, but now text that wraps gets the bottom of it chopped off and in Firefox the layout is out of whack. The width of the cells are controlled, but the display of each row is wider than it was before, putting it out of proportion to other tables.
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now