HTMLテーブルのセルを変更します。

Question

CSSを使用してスタイル付けされたHTMLテーブルがあります。表は2行で構成されていますが、上の行には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は、セルのスパン数を設定します。ここには3つのヘッダーセルがあり、最初の2列の列、2列目の1列、3列目の2列（3つのヘッダーセルの下に5列まで追加）があります。

3つのセルが上に、4つの列が下になるように見えますか？もしそうなら、3番目のヘッダーセルをcolspan = 1にする必要があり、その下の列のように幅が76pxになります。

希望すると便利です。

Answer 2

colspanの機能を理解して、border = "1"をTABLEタグに追加するのに役立つかもしれません。これは、行1の列1がその下の行の2つの列をカバーするようにどのように展開されているかを示します。時には、それの動作を視覚化することは、テキストベースの説明よりも優れています。

Answer 3

私はミッシェルがあなたのテーブルの問題を明確にしたと思っています。セル幅の異なる2行の静的レイアウトに基づいて追加するだけです。私はあなたがより柔軟で簡単なコードを持っていると思います。