• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 644
  • 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

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