Изменить ячейки таблицы HTML

Question

У меня есть таблица HTML, стилизованная с использованием CSS. Таблица состоит из двух строк, но в верхнем ряду нужно только 3 столбца, а в нижнем - 5 столбцов.

<table class="xp-flt-leg-sum" name="flightLegSummary">
    <tbody>
        <!--Row 1-->
        <tr class="xp-flt-ctyttl-fnt" name="from2City">
            <!--Col1 -->
            <td colspan="2" class="flightLegSummary xp-fl-md-lg"><span id="departureCity0">Seattle</span></td>
            <!--Col2 -->
            <td colspan="1" class="xp-fl-md-lg"><span id="arrivalCity0">New York</span></td>
            <!--Col3 -->
            <td colspan="2">
                <span id="connectingCity-0-0" class="xp-connecting-cities">
                    Charlotte                                         
                 </span>
            </td>
        </tr>
        <tr class="xp-flt-arptttl-fnt">
            <!--Col1 -->
            <td class="xp-flt-mdl-leg-col1 ">
                <span id="departureAirport0">SEA&nbsp;</span>
                <span id="departureTime0">
                    10:15pm
                </span>
            </td>
            <!--Col2 -->
            <td class="xp-flt-mdl-leg-colicn ">
                <span class="xp-flt-mdl-drctn-icn" id="directionIcon0"><!-- --></span>
            </td>
            <!--Col3 -->
            <td class="xp-flt-mdl-leg-col2 ">
                <span id="arrivalAirport0">LGA&nbsp;</span>
                <span id="arrivalTime0">
                    9:45am
                </span>
                <span style="display:inline-block;" id="addedDays">
                            +1&nbsp;Tag
                </span>
            </td>
            <!--Col4 -->
            <td class="xp-flt-mdl-leg-col3">
                <span class="xp-flt-leg-stop-span" id="flight0StopCount">
                    1&nbsp;Stopp
                </span>
            </td>
            <!--Col5 -->
            <td class="xp-flt-mdl-leg-col4">
                <span id="flightDuration0">8Std.&#8203;30Min.</span>
            </td>
       </tr>

    </tbody>
</table>

Ниже CSS контролирует таблицу.

.xp-fl-md-lg {
    vertical-align: bottom !important;
}
.flightLegSummary {
    width: 111px;
}
#flightLegOutterCont .xp-flt-arptttl-fnt {
    color: #333333;
    font-size: 12px;
    font-weight: bold;
    line-height: 10px;
}

#flightModuleControl .xp-flt-mdl-leg-col1 {
    max-width: 52px;
    min-width: 52px;
    padding-bottom: 1px;
    padding-top: 6px;
}

#flightModuleControl .xp-flt-mdl-leg-colicn {
    max-width: 15px;
    padding-bottom: 1px;
    padding-top: 6px;
    text-align: center;
}
#flightModuleControl .xp-flt-mdl-leg-col2 {
    padding-bottom: 1px;
    padding-top: 6px;
    width: 110px;
}

#flightModuleControl .xp-flt-mdl-leg-col3 {
    padding-bottom: 1px;
    padding-right: 7px;
    padding-top: 5px;
    width: 76px;
}
#flightModuleControl .xp-flt-mdl-leg-col4 {
    padding-bottom: 1px;
    padding-top: 6px;
    width: 54px;
}

Проблема, с которой я сталкиваюсь, заключается в том, что я хочу изменить все следующие ячейки на определенную ширину:

<Row1,Col1> 98px wide
<Row1,Col2> 130px wide
<Row2,Col1> 86px wide
<Row2,Col2> 12px wide
<Row2,Col3> 130px wide
<Row2,Col4> 76px wide

Я изо всех сил, и я не могу изменить строки, чтобы получить желаемую ширину. Кроме того, я не понимаю роль colspan для первого ряда. Однако, когда я удаляю, это действительно портит расположение ячеек.

Answer 1

Это может помочь вам понять функциональность colspan для добавления border = "1" в тег TABLE.Это покажет вам, как столбец 1 строки 1 расширяется, чтобы охватить два столбца строки под ним.Иногда визуализация его работы лучше, чем набор текстовых объяснений.

Answer 2

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

Answer 3

Colspan устанавливает количество столбцов, которое должна охватывать ячейка. Здесь у вас есть 3 ячейки заголовка, первый из них охватывает 2 столбца, второй - 1 и третий - 2 (добавление до пяти столбцов под тремя ячейками заголовка).

Похоже, вы хотите 3 ячейки сверху и 4 столбца снизу, правильно? Если это так, вам нужно сделать 3-ю ячейку заголовка colspan = 1, и она будет шириной 76 пикселей, как столбец под ней.

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