asked on

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

SStory

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.

HainKurt

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

HainKurt

second col is always 100px, first one 20%, third one 30, and last one is the rest... does it work for you?

zorvek (Kevin Jones)

ASKER

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

zorvek (Kevin Jones)

ASKER

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

zorvek (Kevin Jones)

ASKER

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

ASKER CERTIFIED SOLUTION

HainKurt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

zorvek (Kevin Jones)

ASKER

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

zorvek (Kevin Jones)

ASKER

Using images does look promising though. Thanks!

Kevin