Невозможно изменить размеры столбцов таблицы HTML, несмотря на ширину ввода

Question

У меня есть таблица, которая имеет значение?

Мне нужно изменить размер столбцов. Это имена столбцов, и я установил ширину 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>