CSS Ошибка заполнения таблицы, когда текст переходит на следующую строку

Question

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

Но мне нужно вот так с отступом:

Кажется, проблема возникает только при использовании процентов в моем свойстве заполнения.

td,
th {
  padding: 32px;
}

<table id="table">
  <tr>
    <th>Book</th>
    <th>Author</th>
  </tr>
  <tr>
    <td>Let Us C</td>
    <td>Balagurusamy</td>
  </tr>
</table>

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

td,
th {
  padding: 3.2%;
}

<table id="table">
  <tr>
    <th>Book</th>
    <th>Author</th>
  </tr>
  <tr>
    <td>Let Us C</td>
    <td>Balagurusamy</td>
  </tr>
</table>

Есть какие-нибудь идеи, как я могу использовать процент и при этом получать контент, оставаясь на одной линии?

PS: я попробовал cellpading атрибут, но он явно не поддерживается в HTML5.

Редактировать: Использование white-space: nowrap заставило текст перекрываться с границами:

Answer 1

table {
  border-collapse: collapse;
}

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

<table id="table" border=1>
  <tr>
    <th>Book</th>
    <th>Author</th>
  </tr>
  <tr>
    <td>Let Us C</td>
    <td>Balagurusamy</td>
  </tr>
</table>

Answer 2

Вы можете использовать это в вашем CSS.

 display: inline-block;
 word-break: break-word;

, или вы также можете использовать это, если оно работает для вас.

word-break: break-word;
white-space: unset !important;