Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

How do I constrain the width of a table cell?

Posted on 2011-03-25
4
Medium Priority
?
262 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 30

Accepted Solution

by:
Randy Downs earned 1500 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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
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 …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

885 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