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>

Answer 1

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>

Answer 2

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

将colgroup元素直接插入table元素下。

然后您可以使用CSS来定义列宽：

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

等等。这适用于具有fixed布局的表格。如果您希望浏览器动态调整表格的内容（如果您愿意，可以从您的问题中弄清楚），您可以省略table-layout属性（或将其设置为{{ 1}}），并使用上面的colgroup来定义宽度。这一次，它基本上只是提示＆＃34;浏览器如何格式化：

auto

省略说明列应指定列可用的剩余宽度。

希望这有帮助！

HTML table: columns with minimum width and break-word

2 个答案: