• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 675
  • Last Modified:

HTML Tables: Multiple fixed size columns with one variable width column.

I have a table with multiple columns. I want all of the columns except one to be a specific width regardless of the table width. I want the variable width column to be wide enough such that the width of all columns fill the table width which is 100% of the container width. In other words the variable width column expands to fill the space remaining after all the fixed width columns are defined.

I am trying a table width of 100% and column widths of specific "em" values with the variable width column set to a width of 100% but the browser does not set the fixed width columns at the width I want. They expand and contract based on the content.

How can I do this? Should I be specifying the widths in the head or the table or both?

Kevin
0
zorvek (Kevin Jones)
Asked:
zorvek (Kevin Jones)
  • 5
  • 3
1 Solution
 
SStoryCommented:
I think for variable width you'd set the table width to 100%, set the width of fixed columns, and don't give a width for the variable column. Table width being 100% should make it fill.

I'm not sure why you'd use EM on column widths. I've never done that before.  I generally use percentages or pixels, though these days % might be better.
0
 
HainKurtSr. System AnalystCommented:
what about this
<table border=1 width="100%">
<colgroup>
<col width="20%">
<col width="100">
<col width="30%">
<col width="*">
</colgroup>
<tr><td>A1</td><td>B1</td><td>C1</td><td>D1</td></tr>
<tr><td>A2</td><td>B2</td><td>C2</td><td>D2</td></tr>
<tr><td>A3</td><td>B3</td><td>C3</td><td>D3</td></tr>
</table>

Open in new window

0
 
HainKurtSr. System AnalystCommented:
second col is always 100px, first one 20%, third one 30, and last one is the rest... does it work for you?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
zorvek (Kevin Jones)ConsultantAuthor Commented:
Nothing is working. No matter what I set the variable width column to the browser still adjusts the widths as it sees fit. I use em because it's easier for me to think in "em" spaces versus pixels. Here is my code:

<table width="100%">
      <colgroup>
            <col style="width:1em">
            <col style="width:15em">
            <col style="">
            <col style="width:6em">
            <col style="width:10em">
            <col style="width:6em">
            <col style="width:6em">
            <col style="width:6em">
      </colgroup>
      <thead>
            <tr>
                  <th style=""></th>
                  <th style="text-align:left; white-space: nowrap">Product</th>
                  <th style="text-align:left; white-space: nowrap">Customer, Vehicle</th>
                  <th style="text-align:center; white-space: nowrap">Activated</th>
                  <th style="text-align:left; white-space: nowrap">Contract Number</th>
                  <th style="text-align:right; white-space: nowrap">Remittance</th>
                  <th style="text-align:center; white-space: nowrap">Remitted</th>
                  <th style="text-align:right; white-space: nowrap">Remittal ID</th>
            </tr>
      </thead>

If the third column contains short text values then the other columns are expanded slightly. If the third column contains larger text values then the other columns are shrunk slightly, especially if they do not have any values. I need the fixed width columns to be fixed as I set them because I am building many tables in sequence.

Kevin
0
 
zorvek (Kevin Jones)ConsultantAuthor Commented:
I think the problem is that the variable length column has the style property "white-space: nowrap" and that overrides the fixed width column width settings when the text is wider than will fit after the fixed width columns are considered. I want the text to be truncated. I don't want it to wrap.

Kevin
0
 
zorvek (Kevin Jones)ConsultantAuthor Commented:
This gives me the fixed width columns I want but the variable width column text bleeds into the next column.

<table style="width: 100%; table-layout: fixed">

If I allow the variable width column to wrap then it wraps and the fixed width columns work as desired.

So is there a way to crop the variable width column text so it doesn't bleed into the next column?

Kevin
0
 
HainKurtSr. System AnalystCommented:
you can add a blank image inside a tr

<tr>
<td><img src="blank.gif" width=120></td>
<td>&nbsp;</td>
<td><img src="blank.gif" width=240></td>
</tr>

this way, you dont need to say no-wrap (looks like it is not working properly) and td will not wrap and does not go less than image size...
0
 
zorvek (Kevin Jones)ConsultantAuthor Commented:
I decided to just wrap for now. When I do the browser stops trying to make room for the text by shrinking the other columns. I don't like the taller rows but I don't have time to make it work right now.

Kevin
0
 
zorvek (Kevin Jones)ConsultantAuthor Commented:
Using images does look promising though. Thanks!

Kevin
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now