Как мне указать, что HTML-ячейка должна иметь минимальную ширину, необходимую для отображения всего ее содержимого

Question

В следующем примере

<table style="width: 100%;"><tr>
   <td>First Cell</td>
   <td>Second Cell</td>
</tr></table>

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

Я использую GWT HorizontalPanel для этого, так что если есть трюк HTML, CSS или GWT. Пожалуйста, дайте мне знать.

Спасибо

Answer 1

Предполагая, что «ширина, достаточная для отображения содержимого первой ячейки» относится к ширине, необходимой для отображения содержимого без разрывов строк, вы можете использовать что-то вроде этого:Нет гарантии, что это продолжит работать, поскольку требование, чтобы ячейка имела ширину 100%, но при этом включала другую ячейку с ненулевой шириной, является невозможным требованием.Но браузеры в настоящее время делают то, что кажется наиболее близким к требованию.

Answer 2

Вы можете получить макет, к которому вы стремитесь, без таблиц, как объясняется в этом вопросе:

• xHTML / CSS: как сделать внутренний div получающим ширину 100% минус другой divширина

HTML

<div class="two-columns">
   <div class="fit-to-contents">First Cell</div>
   <div class="fill-remaining-space">Second Cell</div>
</div>

CSS

.two-columns {
    overflow: hidden;/* Contains descendant floats */
}

.two-columns .fit-to-contents {
    float: left;
    background: #ffd;
}

.two-columns .fill-remaining-space {
    overflow: hidden;
    background: #fdf;
}

Я не уверен, что это действительно подходит для вашего варианта использования, хотяМне нужно увидеть контекст.

Answer 3

Только не указывайте ширину вообще (ни в таблице, ни в ячейках) и используйте white-space: nowrap в ячейках таблицы.

Answer 4

Поместите стиль width:1px в первую ячейку.Затем таблица сделает первую ячейку как можно более узкой, не вызывая переполнения.

Поскольку «максимально узкая» - это ширина слова «Первая», в этом случае вы можете добавитьwhite-space:nowrap тоже, в противном случае в двух строках будут отображаться «First» и «Cell».

Jsfiddle

Answer 5

Таблицы заботятся о себе в HTML.Нет необходимости заставлять ячейку иметь определенный размер.

Что вы действительно пытаетесь сделать?

Какую версию HTML вы используете?(Совет: перейдите на HTML5 и CSS!)