将表格单元格拆分为 HTML 中的两列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19115560/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Splitting a table cell into two columns in HTML
提问by user1038814
I have the following table:
我有下表：
<table border="1">
<tr>
<th scope="col">Header</th>
<th scope="col">Header</th>
<th scope="col">Header</th>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
<td>Split this one into two columns</td>
</tr>
</table>
And I wish to split the cell which contains "Split this one into two columns" into two cells/columns. How do I go about this?
我希望将包含“将此一分为二列”的单元格拆分为两个单元格/列。我该怎么做？
回答by punkrockbuddyholly
Like this http://jsfiddle.net/8ha9e/1/
像这样http://jsfiddle.net/8ha9e/1/
Add colspan="2"to the 3rd <th>and then have 4 <td>'s in your second row.
添加colspan="2"到第 3 个<th>，然后<td>在第二行中有 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"> </th>
<td> </td>
<!-- The following two cells will appear under the same header -->
<td>Col 1</td>
<td>Col 2</td>
</tr>
</table>
回答by pratyay
I came here for a similar problem I was facing with my table headers.
我来这里是因为我的表格标题遇到了类似的问题。
@MrMisterMan's answer, as well as others, were really helpful, but the borders were beating my game. So, I did some research to find the use rowspan.
@MrMisterMan 和其他人的回答真的很有帮助，但边界击败了我的游戏。所以，我做了一些研究以找到使用rowspan。
Here's what I did and I guess it might help others facing something similar.
这就是我所做的，我想它可能会帮助其他人面临类似的事情。
<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>回答by kumarharsh
You have two options.
你有两个选择。
- Use an extra column in the header, and use
<colspan>in your header to stretch a cell for two or more columns. - Insert a
<table>with 2 columns inside thetdyou want extra columns in.
- 在标题中使用额外的列，并
<colspan>在标题中使用以将单元格拉伸为两列或更多列。 <table>在td您想要额外的列中插入一个2 列。
回答by cameronjonesweb
Change the <td>to be split to look like this:
<td>将要拆分的内容更改为如下所示：
<td><table><tr><td>split 1</td><td>split 2</td></tr></table></td>
回答by GMZ
is that what your looking for?
这就是你要找的吗？
<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"> </th>
<td> </td>
<td>Split this one</td>
<td>into two columns</td>
</tr>
</table>
回答by Donovan Charpin
Use this example, you can split with the colspanattribute
使用这个例子，你可以用colspan属性分割
<TABLE BORDER>
<TR>
<TD>Item 1</TD>
<TD>Item 1</TD>
<TD COLSPAN=2>Item 2</TD>
</TR>
<TR>
<TD>Item 3</TD>
<TD>Item 3</TD>
<TD>Item 4</TD>
<TD>Item 5</TD>
</TR>
</TABLE>
More examples at http://hypermedia.univ-paris8.fr/jean/internet/ex_table.html.
更多示例见http://hypermedia.univ-paris8.fr/jean/internet/ex_table.html。
回答by Surendra K
Please try the following way.
请尝试以下方法。
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>0</td>
</tr>
<tr>
<td>February</td>
<td></td>
</tr>
<tr>
<td colspan="2">Sum: 0</td>
</tr>
</table>
