Как сделать таблицу с минимальной шириной, без перехода данных на новую строку?

Question

У меня есть таблица с данными.Однако строки в каждой ячейке различаются по длине.Я знаю, что данные никогда не будут длиннее 50 символов.Как я могу сделать таблицу наименьшей возможной ширины.Я попытался установить с в процентах, но это только делает это в процентах от экрана.Если я укажу ширину в пикселях, строка переместится в новую строку.

<style>
table {
    width: 100%;
    border: 1px solid #000;
}

td, th {
    width: 100%;
    border: 1px solid #000;
}
</style>

<table>
    <tr>
        <th>First Name</th>
        <th>Jason</th> 
    </tr>
    <tr>
        <td>Last Name</td>
        <td>Smith</td> 
    </tr>
    <tr>
        <td>Country</td>
        <td>Australia</td> 
    </tr>
</table>

Answer 1

Для простого решения используйте опцию max-width с ch единицей.И white-space: nowrap - как это:

table {
  border-collapse: collapse;
  width: 100%
}

td, th {
  max-width: 50ch; /* 50 characters */
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid #000;
}

<table>
  <tr>
    <th>First Name</th>
    <th>Jason</th> 
  </tr>
  <tr>
    <td>Last Name</td>
    <td>Smith</td> 
  </tr>
  <tr>
    <td>example - lorem ipsum dolor sit amet, consetetur sadipscing elitr , sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</td>
    <td>lorem ipsum dolor sit amet, consetetur sadipscing elitr , sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</td> 
  </tr>
</table>

Answer 2

https://jsbin.com/hodusadike/edit?html,output

Попробуйте приведенный выше пример.Сохранение table-layout: auto !important; для таблицы и width: auto !important; даст вам нужный результат.Я не пробовал использовать Firefox или IE (хорошо работает в Chrome и Safari).

Я рекомендую использовать его либо с .class, либо с #id, так как приведенный выше код изменит каждую таблицу на вашем сайте сэто спецификации.

Ура.