HTML table: columns with minimum width and break-word

Question

I want to display the following table:

+----+------+-------------+---------+
| id | name | description | actions |
+----+------+-------------+---------+
| .. |  ..  |     ..      |   ..    |

I want that

the first column (id) has the minutest width possible (white-space:nowrap)
the other columns (name, description) should break the words when necessary (word-wrap: break-word)
the last column has also the minutest width possible (white-space:nowrap)

What I have:

 <table class="table_standard" style="word-wrap:break-word; table-layout: fixed;">

But with this code all columns have the same width.

How can I solve this problems?

@thomasfuchs

This is how it looks with a 1920x1080 monitor:

This is how it looks with a lower screen width:

And this is how it looks with an extreme low resolution:

As you can see, I want that the browser breaks the words if the resolution is too low but it just doesn't display the complete table.

This is my current code:

<style>
    col.id          { width: 1%; }
    col.name        { width: 20%; }
    col.description     { width: 30%; }
    col.users     { width: 30%; }
    col.games     { width: 9%; }
    col.functions     { width: 9%; }
    col.actions     { width: 1%; }
    table td:nth-child(2) { word-wrap: break-word; }
    table td:nth-child(3) { word-wrap: break-word; }
    table td:nth-child(4) { word-wrap: break-word; }
</style>
<table class="table_standard" style="word-wrap: break-word">
    <colgroup>
        <col class="id">
        <col class="name">
        <col class="description">
        <col class="users">
        <col class="games">
        <col class="functions">
        <col class="actions">
    </colgroup>
    <tr>
        <th class="th_titlebar" colspan="7">Alle Gruppen</th>
    </tr>
    <tr>
        <th class="th_subtitle">ID</th>
        <th class="th_subtitle">Name</th>
        <th class="th_subtitle">Description</th>
        <th class="th_subtitle">Members</th>
        <th class="th_subtitle">Games</th>
        <th class="th_subtitle">Functions</th>
        <th class="th_subtitle">Actions</th>
    </tr>
    //loop with data from the db
</table>

Do you need `table-layout:fixed`? If you remove that, and give the columns (on the `` elements widths of `1%, 30%, auto, 1%` or something like that the table should be formatted like you want. — thomasfuchs, Sep 01 '15 at 22:31
@thomasfuchs actually, if he has to do it on the table columns and inline is nessesary, then you just need to do it on the first row (normally the th element) — Daemedeor, Sep 01 '15 at 22:54
Nope. One problem, I noticed now: If I delete the `table-layout: fixed`, the latest columns of the table cannot be seen anymore because the window ends there. — Bernd, Sep 01 '15 at 23:13
table: fixed, sets it to have all equal widths, no matter the content, you should do width: 100% — Daemedeor, Sep 01 '15 at 23:26
@Daemedeor you don't need to set it on the first row. in any case, if you want to use `table-layout:fixed`, you can set desired widths with the `colgroup` and `col` elements. — thomasfuchs, Sep 01 '15 at 23:33

royki · Answer 1 · 2015-09-01T23:17:40.787

0

Take a look here, it works as a dynamic way -

<table class="table_standard" border='1' style='position : absolute; top : 0px left : 0px; word-wrap:break-word; text-align:center; '>
        <tr>
            <th> ID </th>
            <th> Name </th>
            <th> Description </th>
            <th> Action </th>
        </tr>
        <tr>
            <td>...</td>
            <td>........</td>
            <td>................</td>
            <td>.....</td>
        </tr>        
    </table>

If you don't want dynamic column width then try the each fixed column - the following way

table, th, td {
    border: 1px solid black;
    text-align:center; 
    word-wrap:break-word;
}

<table>
  <tr>
    <th style='width:30px'>ID</th>
    <th style='width:80px'>Name</th>
    <th style='width:150px'>Description</th>
    <th style='width:75px'>Action</th>
  </tr>
  <tr>
    <td>..</td>
    <td>..</td>
    <td>..</td>
    <td>..</td>
  </tr>
</table>

edited Sep 01 '15 at 23:17

answered Sep 01 '15 at 22:42

royki

1,593
3
25
45

you don't have to make the col elements like that, you can actually put the width on the th and it should be fine.... – Daemedeor Sep 01 '15 at 22:54
you should actually put it into the style tag... because html5 doesn't support the width anymore... but then you should also not use the inline styles in general..... *shrug* – Daemedeor Sep 01 '15 at 23:00
I don't really want to set an absolute width on a column (like 80px or 10%) because the id can go to 10000 and then absolute width wouldn't fit anymore. And when I delete the `table-layout: fixed` the words aren't broken anymore. The table has a width of 100% – Bernd Sep 01 '15 at 23:02
@Daemedeor how can we do that in the style tag, it will take only one value for all `th`. – royki Sep 01 '15 at 23:05
that's how you use a style tag – Daemedeor Sep 01 '15 at 23:07
ahh ok. I thought you are asking to put in the css file. Yes I missed the `style` tag – royki Sep 01 '15 at 23:09
it should be in a css file though. I sometimes just do it inline when prototyping out a page, but the final output should be in the css file, though i don't know what the reason is not. the better idea is to use table tr th:nth-child(1), table tr td:nth-child(1) { word-wrap: nowrap } on, though that doesn't get the table to use the "least amount of space possible" which as long as he isn't using table:fixed should be a source of errors.... – Daemedeor Sep 01 '15 at 23:12

score 0 · Answer 2 · answered Sep 01 '15 at 23:40

0

In HTML5, use the colgroup element, which contains col elements that define the desired widths.

<colgroup>
  <col class="id">
  <col class="name">
  <col class="description">
  <col class="actions">
</colgroup>

Insert the colgroup element directly under the table element.

You can then just use CSS to define column widths:

col.id          { width: 100px; }
col.name        { width: 200px; }
col.description { width: 300px; }
col.actions     { width: 100px; }

And so on. This is for a table with fixed layout. If you want the browser to dynamically adjust for the table's contents (it's unclear from your question if you want to), you can just omit the table-layout property (or set it to auto), and also use the colgroup as above to define widths. This time around, it's basically merely "hints" to the browser how to format this:

col.id          { width: 1%; }
col.name        { width: 30%; }
col.actions     { width: 1%; }

Omitting the description column should assign the rest of the width that's available to the column.

Hope this helps!

answered Sep 01 '15 at 23:40

thomasfuchs

5,386
2
18
38

Okay this looks nice but how can I include `word-wrap: break-word`? – Bernd Sep 02 '15 at 12:12
I'd set it for your `` elements, for example: `table td:first-child { word-wrap: break-word; }` if you want `word-wrap: break-word` in the first column – thomasfuchs Sep 02 '15 at 16:08
I edited my first post/question and added some pictures of my problem. I also added the code which I currently use. – Bernd Sep 04 '15 at 12:57
@Bernd: you'll have to specify a table width, e.g. `width:100%` on the table element – thomasfuchs Sep 06 '15 at 21:49
@Bernd: there's a few other SO questions/answers on this topic, e.g. http://stackoverflow.com/questions/6666532/how-to-force-table-cell-td-content-to-wrap – thomasfuchs Sep 06 '15 at 21:50

HTML table: columns with minimum width and break-word

2 Answers2