Как предотвратить расширение клетки от более широкой клетки в ряду под ней - PullRequest
Новая
       37

Как предотвратить расширение клетки от более широкой клетки в ряду под ней

0 голосов
/ 08 сентября 2011

Я использую стиль Yahoo YUI на своих страницах.

У меня есть следующий HTML-код: 

<table>
    <tr>
        <td>Text1</td>
        <td>Text2</td>
        <td>Text3</td>
    </tr>
    <tr>
        <td>Text4</td>
        <td colspan="2">Text5 Text6 Text7 Text 8</td>
    </tr>
</table>

Второй столбец второй строки шире, чем два столбца, содержащие Text2 и Text3. Теперь, потому что если это ячейка, содержащая Text3, не находится рядом с ячейкой, содержащей Text2 Мне нужно, чтобы это было так, но похоже, что оно разделяет пространство между Text2 и Text3 (из-за более длинного столбца под ним.

Я думал, что если сделать colspan из 2, это предотвратит это, но это не работает. Я только хочу, чтобы ячейка, содержащая Text3, занимала остальное пространство. Так что я ищу что-то вроде: 

Text1  Text2  Text3
Text4  Text5  Text6  Text7  Text8

... а не: 

Text1  Text2         Text3
Text4  Text5  Text6  Text7  Text8

Я не хочу указывать ширину.

Ответы [ 2 ]

1 голос
/ 08 сентября 2011

Одним из способов достижения этого является отображение встроенных ячеек таблицы: 

td{display:inline;}

Демо: http://jsfiddle.net/eGs6h/1/

В качестве альтернативы вы можете перемещать ячейки таблицы влево. 

td{float:left;}

Демо: http://jsfiddle.net/eGs6h/2/

Я сам предпочитаю встроенный метод.

0 голосов
/ 08 сентября 2011

Вы также можете просто использовать <TD ALIGN="left"> для Text3 td.

ОБНОВЛЕНИЕ:

Хорошо ... Понятно ... В основном, таблицы автоматически изменяют размер содержимого, так что вы даливаш html будет растягивать верхние правые 2 ячейки (как вы описали) ... К сожалению, без определения их размера вы будете вынуждены заставить их выглядеть правильно.Вероятно, есть несколько способов сделать это, но 1 способ - поместить Text2 и Text3 в ячейку, которая в настоящее время содержит только Text2.Другим способом было бы добавить еще одну ячейку td ... 

<table border=1>
<tr>
<td>Text1</td><td>Text2</td><td>Text3</td><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr><tr>
<td>Text4</td><td colspan=4>Text5 Text6 Text7 Text8</td>
</tr>
</table>

В этом случае вы бы добавили достаточно неразрывных пробелов (), чтобы растянуть правую ячейку.

Table Image

Надеюсь, это поможет ...

...