Html Table - 设置没有 CSS 的列的最大宽度答案

【问题标题】：Html Table - Set Maximum width of a column without CSSHtml Table - 设置没有 CSS 的列的最大宽度
【发布时间】：2019-02-25 10:03:48
【问题描述】：

需要将 html 表中“描述”列的“最大值”设置为百分比。当我尝试使用 'width' 时，'Description' 列将占用 30%，而描述的长度也小于 30%。所以需要设置 'max-width' 而不是 'width' 。但是以下代码不起作用。你能帮我么。

 <table style='font-family: Arial; font-size: 14px;' border='0' cellpadding='5'>
  <tbody>
    <tr>
      <th align='left'>Number</th>
      <th align='left' max-width='30%'>Description</th>
      <th align='left'>Company</th>
      <th align='left'>Next Number</th>
      <th align='left'>Name</th>
    </tr>
    <tr>
      <td>123456</td>
      <td>Testing max width Testing max width Testing max width Testing max width Testing max width Testing max width Testing max width Testing max width </td>
      <td>ABCDE</td>
      <td>123456</td>
      <td>ABCDE</td>
    </tr>
  </tbody>
</table>

【问题讨论】：

stackoverflow.com/questions/8465385/… 的可能重复项
How can I set the max-width of a table cell using percentages?的可能重复
试试css 和th:nth-child(2) { width: 30% ;}

标签： html

【解决方案1】：

这对我有用：您需要将 width:100% 设置为 table 并将 min-width 设置为 description 列。

 <table style='font-family: Arial; font-size: 14px; width:100%;' border='0' cellpadding='5'>
      <tbody>
        <tr>
          <th align='left'>Number</th>
          <th align='left' style="max-width:30%; min-width:200px;">Description</th>
          <th align='left'>Company</th>
          <th align='left'>Next Number</th>
          <th align='left'>Name</th>
        </tr>
        <tr>
          <td>123456</td>
          <td>Testing max width Testing max width Testing max width Testing max width Testing max width Testing max width Testing max width Testing max width </td>
          <td>ABCDE</td>
          <td>123456</td>
          <td>ABCDE</td>
        </tr>
      </tbody>
    </table>

【讨论】：

【解决方案2】：

html 标签没有“最大宽度”属性，只有“宽度”属性。 HTML5 也不再支持使用 html 属性来定义样式：您应该使用 CCS 来设置您的 html 样式。

此外，表格元素无论如何都不能采用 max-width 或 min-width 属性。与直觉相反，只需在列上设置宽度即可为其提供您想要的行为。

以下内容应使描述列的最大宽度为 30%，如果任何行中都没有数据，则将该列缩小到“描述”一词的宽度。

<style>
table {
  font-family: Arial;
  font-size: 14px;
  border: 0;
}
th {
  padding: 5px;
  text-align: left;
}
.description {
  width: 30%;
}
</style>

<table>
  <tbody>
    <tr>
      <th>Number</th>
      <th class="description">Description</th>
      <th>Company</th>
      <th>Next Number</th>
      <th>Name</th>
    </tr>
    <tr>
      <td>123456</td>
      <td>Testing max width Testing max width Testing max width Testing max width Testing max width Testing max width Testing max width Testing max width </td>
      <td>ABCDE</td>
      <td>123456</td>
      <td>ABCDE</td>
    </tr>
  </tbody>
</table>

如果出于某种原因您绝对必须使用 HTML 属性而不是 CSS，您只需将原始代码中的“max-width”更改为“width”即可。

【讨论】：