Define the width of every column in a HTML-table and show only one line of text per table-row by using the ellipsis character

A very old HTML best practice suggests that we should not use tables to structure the HTML elements inside a webpage. This solution was used extensively a decade ago, and for this reason tables got a very bad reputation in the web community. However, using tables in your HTML code for structuring and presenting a set of data is still a valid option.

When you use a table with multiple columns, you often want to define the width for each of the columns of the table.

• One reason for that could be that you want to show more context of an “important” column than the others.

• Another reason could be the fact that if you do not define the column widths, the longest value in a column will also define the width of the column. As a result the other columns are getting shrank.

Consider the following example, where no column width is defined and the text inside one cell expands the column width, so that the complete content of the cell is shown in one line:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  <table border="1">
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
    <tr>
      <td>lorem ipsum lorem ipsum lorem ipsum</td>
      <td>lorem ipsum</td>
      <td>55</td>
    </tr>
    <tr>
      <td>lorem ipsum</td>
      <td>lorem ipsum</td>
      <td>72</td>
    </tr>
  </table>

This table will look like this:

One option could be to define the width inside the col element (consider the following code), however, this element is not supported from HTML5, and thus its use should be avoided.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
  <table border="1">
    <colgroup>
      <col width="70%">
      <col width="20%">
      <col width="10%">
    </colgroup>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
    <tr>
      <td>lorem ipsum</td>
      <td>lorem ipsum</td>
      <td>55</td>
    </tr>
    <tr>
      <td>lorem ipsum</td>
      <td>lorem ipsum</td>
      <td>72</td>
    </tr>
  </table>

The width can be defined in every measurement unit that CSS supports (pixel, em, point, percentage, etc.). The table will look like this:

There is another way to define the width of a column, which complies with HTML5, by using a CSS the table-layout: fixed rule which has to be specified in the table element. You then have to define the width of each column, by applying a width in one row of the table. As a best practice apply the widths into the header row of the table. Consider the following HTML-example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  <table border="1">
    <tr>
      <th style="width: 70%">Column 1</th>
      <th style="width: 20%">Column 2</th>
      <th style="width: 10%">Column 3</th>
    </tr>
    <tr>
      <td>lorem ipsum</td>
      <td>lorem ipsum</td>
      <td>55</td>
    </tr>
    <tr>
      <td>lorem ipsum</td>
      <td>lorem ipsum</td>
      <td>72</td>
    </tr>
  </table>

and the following CSS code:

1
2
3
  table {
    table-layout: fixed;
  }

The result will look like this:

When the table-layout property is used, we can also control the behavior of a table cell, when the defined width of a column is not enough for showing the complete content of the cell in one line:

As you can see the complete text inside the cell is shown and for this reason the text wraps to a new line till it shown completely.

There might be the case that you have a use case in which each row of an array should only contain one line of text. In order the users of your application know that the text is not shown completely, you have to add three dots at the end of every text. In that case:

• The complete text could be shown either in a new webpage when you click on a table row

• or it could be shown inside a tool tip when the user hovers over the cell.

In order to hide the text which is getting wrapped into a new line, you have to add the following CSS rules in the th and td elements of the table:

1
2
3
4
5
  th, td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

After this change, the table looks like this, which is exactly what we had to implement: