Question

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

Answer 1

这对我有用：您需要将width：100％设置为表格，并将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>

Answer 2

html标记没有“ max-width”属性，只有“ width”属性。 HTML5也不再支持使用html属性定义样式：您应该使用CCS来设置html样式。

此外，表格元素无论如何都不能采用最大宽度或最小宽度属性。违反直觉的是，只需在列上设置宽度即可获得所需的行为。

以下内容应使描述列的最大宽度为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，则可以通过将原始代码中的“最大宽度”更改为“宽度”来实现。

HTML表格-设置没有CSS的列的最大宽度

2 个答案: