как вырезать ячейки таблицы до конца текста в html

Question

Я довольно новичок в HTML и CSS, поэтому борюсь с проблемой пробелов между ячейками.

Я пытаюсь остановить пространство ячеек, когда текст заканчивается, хотя все мои попытки не сработали и онлайн-ресурсов тоже нет. Это мой код:

h1 {
  color: blue;
}

table {
  border-collapse: collapse;
}

table, th, td {
  text-align: left;
  border: 1px solid black;
  border-spacing: 0;
  padding: 0;
}

th {
  background-color: skyblue;
}

<h1>Packing Note</h1>
<table style="width:60%" cellspacing="0.2" cellpadding="0.2">
 <tr>
    <th>Quantity</th>
    <th>Item Name</th>
    <th>Sent</th>
    <th>To Follow</th>
  </tr>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
</table>

Я попробовал border-collapse, который предлагается онлайн, который не работал. Я также пробовал отступы и ширину, которые не изменили его.

Любая помощь будет оценена.

Answer 1

style = "width: 60%" cellspacing = "0.2" cellpadding = "0.2"

Попробуйте удалить это из элемента таблицы, и это может дать вам желаемый результат. Поскольку эта строка имеет более высокий приоритет, чем ваш код таблицы стилей.