HTML таблицы: столбцы с минимальной шириной и переключающих слова

Question

Я хочу, чтобы отобразить следующую таблицу:

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

Я хочу, чтобы

• первый столбец (идентификатор) имеет мельчайшие ширину возможно (пробел: nowrap)
• другие столбцы (имя, описание) должны сломать слова при необходимости (слово-обертывание: слово-перерыв)
• Последний столбец также имеет ширину возможной мельчайшие (Пробельные: Nowrap)

Что у меня есть:

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

Но с этим кодом все столбцы имеют одинаковую ширину.

Как я могу решить эту проблему?

@thomasfuchs

Вот как это выглядит с 1920х1080 монитор:

Вот как это выглядит с меньшей шириной экрана:

И это, как это выглядит с крайне низким разрешением:

Как вы можете видеть, я хочу, чтобы браузер прерывал слова, если разрешение слишком низкое, но оно просто не отображает полную таблицу.

Это мой текущий код:

<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

Посмотрите здесь, он работает как динамический способ -

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

Если вы не хотите динамический столбец ширину, затем попробуйте каждую фиксированную колонку - следующим образом:

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 (или установить его на auto), а также использовать группу, как указано выше, для определения ширины. На этот раз, это в основном просто «подсказки» в браузере, как отформатировать это:

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

Опуская столбец описания следует назначить остальную часть ширины, которая доступна в колонке.

Надеюсь, это поможет!