Почему colspan не применяется, как ожидалось

У меня есть таблица в соответствии с ниже. Второй ряд определил три столбца, один с colspan=8, а остальные с colspan=1. Тем не менее, ячейки не растягиваются в соответствии с colspan, «ширина» немного больше для второй ячейки и самая широкая для третьего.Почему colspan не применяется, как ожидалось

<table class="floating simpletable"> 
    <tbody> 
     <tr><td colspan="10">1st row</td></tr> 
     <tr><td colspan="8">Column 1 -&gt; Least wide</td><td colspan="1">2nd</td><td colspan="1">3rd</td></tr> 
     <tr><td colspan="10">3rd row</td></tr> 
     <tr><td colspan="1">1st cell</td><td colspan="9">4th row</td></tr> 
    </tbody> 
</table>

В чем проблема и как ее исправить?

источник

2012-02-13 Nicsoft

Где находится строка, содержащая 10 ячеек? – ZippyV

Это первая строка. Должен ли я определять строку с 10 ячейками? – Nicsoft

-1 для чего? Прокомментируйте, пожалуйста! – Nicsoft

Ширина ячеек зависит от содержимого ячейки, настроек HTML и CSS для ширины, браузера и, возможно, фазы луны. Атрибут colspan просто определяет, сколько столбцов (следовательно, сколько слотов в сетке для таблицы) занимает ячейка.

Если вы видите последнюю ячейку строки 2 как самую широкую, то, вероятно, причина в том, что у нее больше всего содержимого (или для нее есть настройка ширины). Ваш демо-код не демонстрирует такого поведения.

Если вы не хотите, чтобы ширина столбца соответствовала требованиям к размеру ячеек, установите ширину явно в CSS (или в HTML). Перед этим лучше всего удалить все ненужные осложнения из структуры таблицы. Если ваш демо-код отражает всю структуру, то столбцы с 2 по 8 являются ненужным делением, то есть они могут быть преобразованы в один столбец. Демонстрация (с бедными стиле пикселей шириной только для определенности):

<table class="floating simpletable" border> 
    <col width=100><col width=100><col width=100> 
    <tbody> 
     <tr><td colspan="4">1st row</td></tr> 
     <tr><td colspan="2">span 1</td><td>span 2</td><td>span 3 </td></tr> 
     <tr><td colspan="4">3rd row</td></tr> 
     <tr><td>span</td><td colspan="3">other span</td></tr> 
    </tbody> 
</table>

без переписывания как это, я боюсь, что ваша таблица нарушает модель таблицы в формате HTML, поскольку в настоящее время не существует ячейка, которая начинается в колонке 3 или столбец 4 или ...

источник

2012-02-13 09:00:21

Мой пример - тот, который не работает. Но ваше предложение, добавив один тег для каждого столбца, решило его. Я добавил десять из них и установил ширину = 10% для каждого. Благодаря! Но в вашем примере вы добавили только три , разве это не должно быть четыре из них, так как вы используете colspan = 4? – Nicsoft

В моей демонстрации последний столбец просто берет то, что ему нужно. Для достижения того, на что вы рассчитываете, вы можете использовать (при использовании моей разметки) ''. Ваш подход из десяти столбцов, каждый 10% ширины, вероятно, не является надежным, поскольку он не устраняет проблему модели таблицы. –

Хорошо, я понимаю, почему вы оставили последний стол. Но, читая о модели таблицы, клиент должен использовать , чтобы определить количество столбцов, поэтому я думаю, что это не так, если у каждого столбца есть один . Не могли бы вы объяснить, почему мой путь не так прочен, как ваш путь? Возможно, мне не хватает понимания модели таблицы ... – Nicsoft

colspan определяет, сколько столбцов перекрывает ячейки, а не размер этих столбцов. Используйте свойство CSS width, чтобы указать ширину объектов.

источник

2012-02-13 08:17:47 Quentin

На самом деле это не ячейки, я имею в виду, просто моя фраза, которая, возможно, была немного неясной. Я исправлю это. – Nicsoft

Почему colspan не применяется, как ожидалось

ответ

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