У меня возникла проблема с созданием правильной компоновки таблиц.HTML-таблица таблиц HTML

Мне нужна таблица, имеющая определенную ширину, с 3 столбцами (без проблем до сих пор). Проблема в том, что мне нужен второй столбец, который должен быть только шириной его содержимого, и не больше, и этот столбец должен динамически адаптироваться к этому контенту.

Остальные две должны занимать остальную часть ширины стола.

Пример:

--------------------------------------------------------------------------------- 
|        |Here is the main text|       | 
---------------------------------------------------------------------------------

источник

2013-12-19 Dino Prašo

Что вы пробовали? – TreeTree

только css или js принято? Одна ширина для всех ячеек столбца (2, конечно) или 1 по ширине? – kevpoccs

@kevpoccs js будет принят, но я хотел бы сделать это с помощью css. И есть только одна строка, если вы имеете в виду это ... –

DEMO FIDDLE

HTML

<table> 
    <tr> 
     <td>Row 1 Col 1</td> 
     <td>Row 1 Col 2</td> 
     <td>Row 1 Col 3</td> 
    </tr> 
</table>

CSS

table { 
    width:100%; 
} 
td { 
    border:1px solid grey; 
} 
td:nth-child(2) { 
    width:1px; 
    white-space:nowrap; 
}

источник

2013-12-19 14:35:07 SW4

действительно хорошо @ExtPro – kevpoccs

Это работает в jsfiddle, но это делает nt в моем проекте :( –

@ DinoPrašo, таблица maxes до 100% от родителя, поэтому вам может потребоваться добавить 'html, body {width: 100%;}' например, к вашему CSS- или применить ширину к элементу таблица оказывается в пределах – SW4

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" 
bordercolor="#111111" width="100%" id="AutoNumber1"> 
    <tr> 
     <td width="33%">&nbsp;</td> 
     <td width="33%">&nbsp;</td> 
     <td width="34%">&nbsp;</td> 
    </tr> 
    <tr> 
     <td width="100%" colspan="3">&nbsp;</td> 
    </tr> 
</table>

источник

2013-12-19 14:27:19 Yunus

Средний столбец просто соответствует его содержимому – kevpoccs

Ширина не должна фиксироваться :( Она должна быть в точности по ширине содержимого, а пиксель не шире –

Что вы делаете с фиксированным? – Yunus

Необходимо назначить мин-высоту к каждому тд элементы.
Попробуйте этот Jfiddle.
JSfiddle

источник

2013-12-19 14:33:12

использование в HTML Объединение столбцов
см fiddel @http://jsfiddle.net/8HtZu/

<table style="width:100%;text-align:center;border:2px solid #800" border="1px"> 
    <tr> 
     <td colspan="3">Title</td> 
    </tr> 
    <tr> 
     <td>Data</td> 
     <td>Data</td> 
     <td>Data</td> 
    </tr> 
    <tr> 
     <td>Data</td> 
     <td>Data</td> 
     <td>Data</td> 
    </tr> 
</table>

источник

2013-12-19 14:33:42 Nilay

это не помогает, я думаю ... – kevpoccs

Надеемся, что это будет делать трюк

HTML:

<table> 
<tr> 
    <td>Test</td> 
    <td class="dynamic">This is some longer text</td> 
    <td>some other stuff;</td> 
</tr> 
<tr> 
    <td>&nbsp;</td> 
    <td class="dynamic">This is some longer text and longer;</td> 
    <td>some other stuff</td> 
</tr> 
</table>

CSS:

table 
{ 
    border: 1px solid #000; 
} 
table td 
{ 
    border: 1px solid #000; 
} 

td 
{ 
    width: 33.3%; 
} 

td.dynamic 
{ 
    width: 1px; 
    white-space: nowrap; 
}

Демо: http://jsfiddle.net/vdFwF/

источник

2013-12-19 14:34:58

Важным является установка 'width' в' 1px' и тот факт, что в таблицах он интерпретируется слабо как 'min-width' из-за старого Например, добавление «table-layout: fixed» в таблицу может нарушить это. –

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" 
bordercolor="#111111" width="100%" id="AutoNumber1"> 

<tr> 
    <td width="100%" colspan="3"> 
<center>your content </center> 
</td> 
</tr> 
</table>

источник

2013-12-19 14:36:39 Yunus

HTML-таблица таблиц HTML

ответ

DEMO FIDDLE

Смежные вопросы