Как установить максимальную ширину столбцов таблицы? - PullRequest
Новая
       0

Как установить максимальную ширину столбцов таблицы?

1 голос
/ 28 апреля 2020

Я пытаюсь ограничить все столбцы таблицы 50px. Я попытался установить перенос слов, max-width в css и style = "max-width: 50px" в html, как предложено в других комментариях. Но столбцы становятся шире, чем 50 пикселей. 

table.rg-table td {
  padding: 0.35em;
  font-size: 0.9em;
  word-wrap: break-word;
  max-width:50px;   
}

<th  style="max-width: 50px;">Col 1</th>

https://jsfiddle.net/Smolo/fr7ezcqL/

Ответы [ 3 ]

1 голос
/ 28 апреля 2020

Добавьте table-layout: fixed к table и width: 50px к th. 

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
      font-size: 16px;
      line-height: 1.4;
    }
    
    .rg-container {
      margin: 0 auto;
      padding: 1em 0.5em;
      color: #222;
    }
    
    caption {
      margin-bottom: 1em;
      text-align: left;
    }
    
    table {
      width: 650px;
      margin-bottom: 0.5em;
      font-size: 1em;
      border-collapse: collapse;
      border-spacing: 0;
      table-layout: fixed;
    }
    
    thead {
      border-bottom: 3px solid #ddd;
    }
    
    tr {
      border-bottom: 1px solid #ddd;
      color: #222;
    }
    
    tbody tr:hover {
      background-color: #dcf1f0 !important;
    }
    
    .zebra tr:nth-child(even) {
      background-color: #f6f6f6;
    }
    
    th {
      font-weight: bold;
      padding: 0.35em;
      font-size: 0.9em;
      text-align: center;
      width: 50px;
    }
    
    td {
      padding: 0.35em;
      font-size: 0.9em;
      word-wrap: break-word;
      text-align: right;
    }
    
    td:hover {
      font-weight: bold;
    }
    
    td:nth-of-type(2),
    td:nth-of-type(5),
    td:nth-of-type(8),
    td:nth-of-type(11) {
      text-align: center
    }
  </style>
</head>

<body>
  <div class="rg-container">
    <table id="abc" class="rg-table zebra">
      <caption>Alpha Beta Gamma</caption>
      <thead>
        <tr>
          <th>Col 1</th>
          <th>Col 2</th>
          <th>Col 3</th>
          <th>Col 4</th>
          <th>Col 5</th>
          <th>Col 6</th>
          <th>Col 7</th>
          <th>Col 8</th>
          <th>Col 9</th>
          <th>Col 10</th>
          <th>Col 11</th>
          <th>Col 12</th>
          <th>Col 13</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><b>27.04.20</b></td>
          <td>XXX</td>
          <td>08:00</td>
          <td>09:15</td>
          <td>XXX</td>
          <td>09:30</td>
          <td>12:00</td>
          <td>XXX</td>
          <td>13:00</td>
          <td>15:00</td>
          <td>XXX</td>
          <td>15:15</td>
          <td>18:00</td>
        </tr>
        <tr>
          <td><b>28.04.20</b></td>
          <td>XXX</td>
          <td>08:00</td>
          <td>09:15</td>
          <td>XXX</td>
          <td>09:30</td>
          <td>12:00</td>
          <td>XXX</td>
          <td>13:00</td>
          <td>15:00</td>
          <td>XXX</td>
          <td>15:15</td>
          <td>18:00</td>
        </tr>
        <tr>
          <td><b>29.04.20</b></td>
          <td>XXX</td>
          <td>08:00</td>
          <td>09:15</td>
          <td>XXX</td>
          <td>09:30</td>
          <td>12:00</td>
          <td>XXX</td>
          <td>13:00</td>
          <td>15:00</td>
          <td>XXX</td>
          <td>15:15</td>
          <td>18:00</td>
        </tr>
      </tbody>
    </table>
  </div>
0 голосов
/ 28 апреля 2020

Определение max-width для элементов таблицы всегда было неясным. Разные браузеры сделали это и до сих пор делают это по-разному. Самый надежный способ сделать это - применить max-width к дополнительному элементу внутри ячейки таблицы: 

<th><div style="max-width: 50px">...</div></td>
0 голосов
/ 28 апреля 2020

Вы также можете использовать CSS

<style>
table.rg-table td {
  padding: 0.35em;
  font-size: 0.9em;
  word-wrap: break-word;
  max-width: 50px;   
}
</style>
<th class="rg-table"> Col 1 </th>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...