修改HTML表格的单元格

我有一个使用CSS风格的HTML表格。该表由两行组成，但上排仅需要3列，而下排有5列。修改HTML表格的单元格

<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在第一行的作用。但是，当我移除时，它确实会使单元的位置变得松动。

来源

2011-06-21 GobiasKoffi

你想要这样的东西？ http://jsfiddle.net/79wey/ –

@Kyle未定义：这就是我想要的，但做似乎没有在我的情况下工作。 – GobiasKoffi

任何你可以使用'DIV'的机会？ –

Colspan设置单元格应该跨越的列数。这里有3个标题单元格，第一个跨越2列，第二个跨越1，第三跨越2（在三个标题单元格下面最多添加5列）。

它看起来像你想在上面和下面4列的3个单元格，正确吗？如果是这样，您需要使第三个标题单元格为colspan = 1，它将像下面的列一样是76px宽。

希望这会有所帮助！

来源

2011-06-21 18:42:17 Michelle

它可能会帮助您了解colspan添加border =“1”到TABLE标记的功能。这将向您展示第1行的第1列如何扩展以覆盖其下方的两行。有时对它的工作进行可视化比一些基于文本的解释更好。

来源

2011-06-21 18:48:06

我觉得米歇尔很好地解决了你的表问题，我只是根据你的静态布局添加了两行不同的单元格宽度，你是否考虑过在容器中使用两个简单的浮动div行？我想你会有更多的灵活性和简单的代码。

来源

2011-06-21 18:49:58 DShultz

修改HTML表格的单元格

回答

相关问题