GobiasKoffi GobiasKoffi - 1 month ago 19
CSS Question

Modify cells of HTML table

I have an HTML table which is styled using CSS. The table is composed of two rows, but the upper row only has need of 3 columns whereas the bottom row has 5 columns.

<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>


Below is the CSS controlling the table.

.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;
}


The problem that I'm facing is that I want to modify all the following cells to be a certain width:

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


I've been struggling, and I can't seem to modify the rows to be the desired width. Also, I don't understand the role of colspan for the first row. When I remove however, it really screws up the positioning of the cells.

Answer

Colspan sets the number of columns a cell should span. Here you have 3 header cells, the first spanning 2 columns below it, the second spanning 1, and the third spanning 2 (adding up to five columns below the three header cells).

It looks like you want 3 cells on top and 4 columns below, correct? If so you need to make the 3rd header cell be colspan=1 and it will be 76px wide like the column below it.

Hope this helps!

Comments