Получение ширины ячейки TD для обтекания div с указанной шириной%

Question

Вот мой текущий HTML / CSS: http://jsfiddle.net/S8Bne/

А вот скриншот с комментариями к тому, что я хотел бы попытаться сделать:

По сути, я бы хотел, чтобы ширина родительского TD динамически переносилась в зависимости от ширины вложенного div. Это возможно?

Answer 1

Ну ... как указала Шипи, то, что вы спрашиваете, изначально не имеет смысла. Но если вы действительно хотите настроить TD с помощью внутреннего DIV, вам понадобится немного JavaScript ...

Скажем, у вас есть следующая ячейка таблицы:

<td rowspan="4" id="tdwrap"> <div id="divwrap">...</div></td>

У вас могут быть следующие вызовы JavaScript:

// set cell width to its inner div width (in pixel)
$('#tdwrap').width($('#divwrap').width());

// set the div width back to its parent cell width (in pixel)
$('#divwrap').width($('#tdwrap').width());

И затем, вы можете установить ширину div:

#divwrap {
    width: 30%;
}

Таким образом, вы можете позволить ширине ячейки подстраиваться под ширину ее внутреннего div, которая основана на ширине родительской ячейки! : Р

Пример: http://jsfiddle.net/william/S8Bne/89/

Обратите внимание, что я использовал библиотеку jQuery во фрагменте кода.

Это то, что вы ищете?

Answer 2

Это всего лишь несколько советов, но по моему опыту трудно заставить Таблицы и Div хорошо играть вместе, особенно если у вас есть среда для кросс-браузерного тестирования.

Очевидно, старайтесь использовать только Div, где это возможно, если толькоСитуация с большим количеством табличных данных, тогда может быть целесообразно использовать таблицы.Пример, который вы имеете, кажется, оправдывает использование таблиц.Лично я бы попробовал удалить все элементы из таблицы и просто применить CSS к ячейкам таблицы.

Удачи.

Answer 3

Я думаю, вы слишком усложняете свою презентацию.

Вы можете нацелиться на td, как и div через JS, JQuery (если это ваша конечная цель).

Поскольку, похоже, вам нужен макет таблицы здесь: не могли бы вы просто назначить отступ для td и разрешить естественный поток контента?

Даже если вы сохраняете оболочку div: НЕ назначая ширину, div будет привязан к заполнению ячейки (это родительский элемент).

Answer 4

нажмите на скрипку ниже

http://jsfiddle.net/S8Bne/93/

<table style="table-layout: fixed;"> <tr> <td style="word-wrap:break-word">la la la la la la la la la la</td> </tr> </table>

Уведомление стиль атрибуты таблицы и тд

Answer 5

Вы можете попробовать style="width: -moz-fit-content;" для <td>