Solved

How do I constrain the width of a table cell?

Posted on 2011-03-25
4
260 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 30

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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Suggested Courses

615 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