尽管给出了宽度，但无法更改 HTML table 的列大小

Question

我有一个 table 设置为 ?

我需要更改列的大小。这些是列名，我已将宽度设置为 30 和 70。但它没有改变。它现在显示为 50:50.

table {
  width: 100%;
}

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

th,
td {
  padding: 10px;
  text-align: left;
  align-content: center;
  width: 25px;
}

th {
  background-color: #eeeeee;
}

td {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 38px;
  align-content: center;
}

<table height="100">
  <tr>
    <th width="30">Control Name</th>
    <th width="70">Image</th>
  </tr>
</table>

Answer 1

您可以制作类并将它们设置在您的单元格上。您可能会比我在我的示例中更好地命名它们，但这只是关于如何做到这一点的提示。

table {
  width: 100%;
}

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

th,
td {
  padding: 10px;
  text-align: left;
  align-content: center;
  width: 25px;
}

th {
  background-color: #eeeeee;
}

td {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 38px;
  align-content: center;
}

.cell-width-30 {
  width: 30%;
}

.cell-width-70 {
  width: 70%;
}

<table height="100">
  <tr>
    <th class="cell-width-30">Control Name</th>
    <th class="cell-width-70">Image</th>
  </tr>
</table>

尽管给出了宽度，但无法更改 HTML table 的列大小

Cannot change the HTML table's column sizes despite of giving width

html

css

html-table

styling