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

Question

У меня есть таблица в соответствии с ниже.Во второй строке определены три столбца: один с colspan=8, а другие с colspan=1.Тем не менее, ячейки не растянуты в соответствии с 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>

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

Answer 1

Ширина ячеек зависит от содержимого ячеек, настроек 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 или ...

Answer 2

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