Adjusting table cell width

Question

Let's take 4 table columns - ID, Text, Date, Action. In my case table have always constant width - in example 960px.

How can I create such table as :

*-*------------------------------------*----------*----*
|1| Some text...                       |May 2011  |Edit|
*-*------------------------------------*----------*----*
|2| Another text...                    |April 2011|Edit|
*-*------------------------------------*----------*----*

As we can see, ID, Date and Action adjust their width to content, Text is as long as possible....

Is that possible to do without setting specific width of columns ? When ID = 123 or Date = November 2011, columns should automatically be wider...

Cliquish

IIRC, you set their widths to 0, and they'll adjust. I'll try and post an answer if true. – Orelie

By default tables expand to fit their content. You just don't set a size for it, though you could use a min-width to force a minimum size. then set your text colum to 100%. You also have to make sure your date columns don't wrap. – Germany

Yeah, it's seems to be good solution... – Cliquish

Yes, I've noticed after testing @MrSooul :) – Orelie

Answer 1

Using a 100% width on the wide td and a fixed width for the table along with white-space:nowrap, this can be done:

Demo

HTML

<table>
    <tr>
        <td>1</td>
        <td width="100%">Some text... </td>
        <td>May 2011</td>
        <td>Edit</td>
    </tr>
    <tr>
        <td>2</td>
        <td width="100%">Another text... </td>
        <td>April 2011</td>
        <td>Edit</td>
    </tr>
</table>

CSS

table
{
    ...
    width:960px;
}

td
{
    ...
    white-space:nowrap;
}

Roulade

Please note, that only the widest cell in the column needs a width set. So the second cell with the words "Another text... " doesn't technically need the width attribute. – Dacey

Answer 2

basically, it's just like this: http://jsfiddle.net/49W5A/ - you have to set the cell-width to something small (like 1px) to make them stay as small as possible.

but as you'll see, theres one problem with the date-fields doing a line-wrap. to prevent this, just add white-space: nowrap; for your text-field: http://jsfiddle.net/ZXu7U/

working example:

<style type="text/css">
.table{
    width:500px;
    border: 1px solid #ccc;
}
.table td{
    border: 1px solid #ccc;
}
.id, .date, .action{
    width:1px;
}
.date{
    white-space: nowrap;
}
</style>
<table class="table">
    <tr>
        <td class="id">1</td>
        <td class="text">Some Text...</td>
        <td class="date">May 2011</td>
        <td class="action">Edit</td>
    </tr>
    <tr>
        <td class="id">2</td>
        <td class="text">Another Text...</td>
        <td class="date">April 2011</td>
        <td class="action">Edit</td>
    </tr>
</table>

Adalbert

Answer 3

My best advice to you is to not touch the widths of the table, the table automatically layouts in a way that does all cells best.

However, if you'd like to push through, I'd use width: 1px; on the cells that needs adjusting (one of each column is enough). Also use white-space: nowrap on all cells. that will make sure the lines don't break.

Caliche

Answer 4

Try this:

.id, .date, .action is the table cells (td).

CSS:

.id, .date, .action {
   width: 1em;
}

It worked for me.

The width:1em will not cut the text but force the width size to the minimum.

Lemuelah

Answer 5

The best way that I've found for setting table column widths is to use a table head (which can be empty) and apply relative widths for each table head cell. The widths of all cells in the table body will conform to the width of their column head. Example:

HTML

<table>
  <thead>
    <tr>
      <th width="5%"></th>
      <th width="70%"></th>
      <th width="15%"></th>
      <th width="10%"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Some text...</td>
      <td>May 2018</td>
      <td>Edit</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Another text...</td>
      <td>April 2018</td>
      <td>Edit</td>
    </tr>
  </tbody>
</table>

CSS

table {
  width: 600px;
  border-collapse: collapse;
}

td {
  border: 1px solid #999999;
}

View Result

Alternatively, you can use colgroup as suggested here.

Backblocks