Ширина ‹td› уже, когда я использую в нем ‹br› на фиксированной ширине ‹стола›. Почему?

У меня есть этот фрагмент кода HTML (в действительном документе с использованием строгого типа документа):

<p>Without &lt;br /&gt;</p>
<table border="1" width="220">
<tbody>
    <tr>
        <td>lorem</td>
        <td>ipsum</td>
        <td>lorem ipsum</td>
        <td>lorem</td>
        <td>ipsum</td>
    </tr>
</tbody>
</table>

<p>With &lt;br /&gt;</p>
<table border="1" width="220">
<tbody>
    <tr>
        <td>lorem</td>
        <td>ipsum</td>
        <td>lorem<br>ipsum</td>
        <td>lorem</td>
        <td>ipsum</td>
    </tr>
</tbody>
</table>

Это отображается так в любом браузере:

скриншот

Обратите внимание, что третий ‹td› в первой таблице шире только потому, что я не использовал там тег ‹br›. В остальном код для двух таблиц идентичен.

Я хотел бы найти способ отобразить таблицу, как во втором примере, но без использования тега ‹br›.

Уточнение

Я не могу указать ширину ячеек, поскольку они могут содержать любое количество символов.


html line-breaks
person Wabbitseason    schedule 28.09.2010    source источник
comment
Это может быть заведомо неудобно, чтобы сделать правильно; даже с очень точным стилем таблицы часто кажутся самостоятельными.   -  person Spudley    schedule 28.09.2010
comment
При использовании стандартного алгоритма автоматической разметки таблицы вы полностью зависите от браузера в том, как он решит выделить «запасную» ширину таблицы. Для этого не существует единого стандартного алгоритма (тот, что в спецификации CSS2 является «ненормативным»), и браузеры делают разные вещи; IE, в частности, делает ряд странных вещей. Извини. Если вам нужен действительно надежный рендеринг, единственный путь вперед — это table-layout: fixed.   -  person bobince    schedule 28.09.2010
comment
На самом деле table-layout: fixed ухудшил все в IE, даже в IE8, хотя немного помог в других браузерах. Пока кажется, что без тега <br> не обойтись.   -  person Wabbitseason    schedule 28.09.2010

Ответы (5)


arrow_upward
2
arrow_downward

Похоже, это давняя проблема / вопрос - к сожалению, у меня нет решения, чтобы предложить только эту ссылку от 2005 года, которая доказывает, что кто-то боролся с этим уже тогда. :)

http://www.velocityreviews.com/forums/t162343-how-to-prevent-unnecessary-table-resizing.html

person OpaCitiZen    schedule 28.09.2010

arrow_upward
2
arrow_downward

Вы установили фиксированную ширину элемента таблицы, но не ширину TD.

Обе таблицы наверняка будут иметь одинаковую ширину, но относительная ширина каждой ТД будет меняться в зависимости от ее содержимого.

Чтобы получить TD одинаковой ширины, вы можете установить его ширину в процентах (20% для каждого из ваших пяти столбцов):

<table border="1" width="220">
<tbody>
    <tr>
        <td width="20%">lorem</td>
        <td width="20%">ipsum</td>
        <td width="20%">lorem ipsum</td>
        <td width="20%">lorem</td>
        <td width="20%">ipsum</td>
    </tr>
</tbody>
</table>

Я проверил это в своем браузере (Firefox), и это работает.

person Tomas Narros    schedule 28.09.2010
comment
Это определяет ширину каждой ячейки как равную. Я не могу этого сделать, ячейки могут иметь произвольное содержимое. Спасибо за подсказку. - person Wabbitseason; 28.09.2010
comment
@Wabbitseason: тогда я не понял вашего вопроса: вы хотите, чтобы ваши ячейки были одинакового размера, или вы хотите установить фиксированную ширину, или вы хотите, чтобы ширина TD устанавливалась динамически? - person Tomas Narros; 28.09.2010
comment
Я не хочу ничего делать с ТД. Все, что я хочу, это избежать использования тега ‹br›. После того, как ‹таблица› отображается, она автоматически разбивает на несколько строк содержимое самых широких ячеек, но браузеры (возможно) неправильно вычисляют ширину этих ячеек, если я не использую ‹br›. - person Wabbitseason; 28.09.2010
comment
В порядке. Но дело не в том, что они не делают ничего неправильного: они устанавливают относительную ширину в зависимости от содержимого каждой колонки, как и положено. - person Tomas Narros; 28.09.2010
comment
У меня есть ощущение, что это может быть ошибка, а не функция. Кажется, что ширина ячейки рассчитывается с помощью символа пробела, который должен был быть автоматически заменен на разрыв строки (у которого не должно быть ширины). - person Wabbitseason; 28.09.2010

arrow_upward
0
arrow_downward

Попробуйте указать ширину для ‹ td >.

person CristiC    schedule 28.09.2010
comment
Я не могу. Ячейки могут содержать любую строку. - person Wabbitseason; 28.09.2010
comment
Извините, это не вариант. Я добавил уточнение к вопросу. - person Wabbitseason; 28.09.2010

arrow_upward
0
arrow_downward

Я попробовал вашу таблицу в Firefox и, как я сомневался, между левой границей и строкой Lorem Ipsum нет пробела. Единственный пробел находится справа (между правой границей и строкой), когда слово ipsum переносится на следующую строку. Пожалуйста, взгляните на картинку, которую я прикрепил, чтобы получить более четкое представление о том, что я говорю.

альтернативный текст

Это связано с тем, что слово «Lorem» отделяется от слова «ipsum» пробелом, и когда происходит перенос, браузер сохраняет пробел, также называемый пробелом. Опираясь только на html и css, я не думаю, что существует контекст переноса, когда браузер отклоняет пустое пространство при переносе. Вам придется сделать это или написать функцию в javascript, которая будет манипулировать строкой и устранять пробел (или заменять его на ‹ br />. Что касается пробела в левой части скриншота, попробуйте пересмотреть свой код. и убедитесь, что нет лишних полей или отступов, которые заполняют это пустое пространство.

person Yash    schedule 28.09.2010

arrow_upward
0
arrow_downward

Если вам нужна эстетика пробелов, вы можете добавить небольшой отступ (2px или 3px) к td, например:

td {
  padding: 3px;
}

Это должно помочь ячейкам выглядеть более ровными с точки зрения пробелов.

person Jeff    schedule 28.09.2010