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...

IIRC, you set their widths to 0, and they'll adjust. I'll try and post an answer if true. — Madara's Ghost, Sep 30 '11 at 16:51
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. — Erik Funkenbusch, Sep 30 '11 at 16:52

score 18 · Answer 1 · edited Jun 20 '20 at 09:12

18

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;
}

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 30 '11 at 16:58

Joseph Marikle

76,418
17
112
129

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. – Sablefoste Jun 07 '16 at 21:13

score 5 · Answer 2 · answered Sep 30 '11 at 16:59

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>

score 3 · Answer 3 · edited Jul 23 '18 at 08:23

3

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.

edited Jul 23 '18 at 08:23

answered Oct 30 '13 at 12:43

robcaa

31
1

score 3 · Answer 4 · answered Sep 30 '11 at 17:01

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.

eicksl · Answer 5 · 2018-11-02T15:17:34.907

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.

Adjusting table cell width

5 Answers5

Demo

HTML

CSS

Linked