Question

我正在尝试将所有表列限制为50px。我试图在css中设置自动换行和最大宽度 html中的style =“ max-width：50px”，如其他评论所建议。但是列的宽度大于50px。

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/

Answer 1

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

Answer 2

在表元素上max-width的定义始终不清楚。不同的浏览器已经做到了，但仍然做得不同。最可靠的方法是将max-width应用于表单元格内的其他元素：

<th><div style="max-width: 50px">...</div></td>

Answer 3

您也可以使用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>

如何设置表格列的最大宽度？

3 个答案: