将表格单元格拆分为HTML格式的两列

Question

我有下表:

<table border="1">
  <tr>
    <th scope="col">Header</th>
    <th scope="col">Header</th>
    <th scope="col">Header</th>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <td>Split this one into two columns</td>
  </tr>
</table>

我希望将包含" 将这一个拆分成两列 "的单元格分成两个单元格/列.我该怎么做？

小提琴

Answer 1

喜欢这个http://jsfiddle.net/8ha9e/1/

添加colspan="2"到第3行<th>,然后<td>在第2行中有4 个.

<table border="1">
  <tr>
    <th scope="col">Header</th>
    <th scope="col">Header</th>
    <th scope="col" colspan="2">Header</th>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <!-- The following two cells will appear under the same header -->
    <td>Col 1</td>
    <td>Col 2</td>
  </tr>
</table>

Answer 2

我来到这里是因为我遇到了类似的问题.

@MrMisterMan的答案,以及其他人,真的很有帮助,但边界打败了我的游戏.所以,我做了一些研究来找到使用rowspan.

这就是我所做的,我想这可能会帮助其他人面对类似的事情.

<table style="width: 100%; margin-top: 10px; font-size: 0.8em;" border="1px">
    <tr align="center" >
        <th style="padding:2.5px; width: 10%;" rowspan="2">Item No</th>
        <th style="padding:2.5px; width: 55%;" rowspan="2">DESCRIPTION</th>
        <th style="padding:2.5px;" rowspan="2">Quantity</th>
        <th style="padding:2.5px;" colspan="2">Rate per Item</th>
        <th style="padding:2.5px;" colspan="2">AMOUNT</th>
    </tr>
    <tr>
        <th>Rs.</th>
        <th>P.</th>
        <th>Rs.</th>
        <th>P.</th>
    </tr>
</table>

Answer 3

你有两个选择.

1. 在标题中使用额外的列,并<colspan>在标题中使用拉伸两个或更多列的单元格.
2. <table>在td您想要的额外列中插入2列.

Answer 4

<td>将要拆分的内容更改为如下所示：

<td><table><tr><td>split 1</td><td>split 2</td></tr></table></td>