td内的Html表tr

我正在尝试在HTML中创build一个表格。 我有以下devise来创build。 我在<td> <tr>里面添加了一个<tr> ，但不知怎的，表格不是按照devise创build的。

任何人都可以build议我怎么做到这一点？

我无法创buildName1 | Price1部分。

Answer 1

您必须在td内添加一个完整的表格

  <table> <tr> <td> <table> <tr> <td> ... </td> </tr> </table> </td> </tr> </table> 

Answer 2

把桌子放进桌子是完全无效的做法。 另外，你不能把tr放入td中。 你需要使用colspan和rowspan 。 检查这个小提琴 。

HTML：

 <table width="100%"> <tr> <td>Name 1</td> <td>Name 2</td> <td colspan="2">Name 3</td> <td>Name 4</td> </tr> <tr> <td rowspan="3">ITEM 1</td> <td rowspan="3">ITEM 2</td> <td>name1</td> <td>price1</td> <td rowspan="3">ITEM 4</td> </tr> <tr> <td>name2</td> <td>price2</td> </tr> <tr> <td>name3</td> <td>price3/td> </tr> </table> 

和一些CSS：

 table { border-collapse: collapse } td { border: 1px solid #000000 } 

Answer 3

你可以解决没有嵌套表。

  <table border="1"> <thead> <tr> <th>ABC</th> <th>ABC</th> <th colspan="2">ABC</th> <th>ABC</th> </tr> </thead> <tbody> <tr> <td rowspan="4">Item1</td> <td rowspan="4">Item1</td> <td colspan="2">Item1</td> <td rowspan="4">Item1</td> </tr> <tr> <td>Name1</td> <td>Price1</td> </tr> <tr> <td>Name2</td> <td>Price2</td> </tr> <tr> <td>Name3</td> <td>Price3</td> </tr> <tr> <td>Item2</td> <td>Item2</td> <td colspan="2">Item2</td> <td>Item2</td> </tr> </tbody> </table> 

Answer 4

试试这个代码

 <table border="1" width="100%"> <tr> <td>Name 1</td> <td>Name 2</td> <td colspan="2">Name 3</td> <td>Name 4</td> </tr> <tr> <td rowspan="3">ITEM 1</td> <td rowspan="3">ITEM 2</td> <td>name</td> <td>price</td> <td rowspan="3">ITEM 4</td> </tr> <tr> <td>name</td> <td>price</td> </tr> <tr> <td>name</td> <td>price</td> </tr> </table> 

Answer 5

把另一个表格放在td元素里面。

 <table> <tr> ... </tr> <tr> <td>ABC</td> <td>ABC</td> <td> <table> <tr> <td>name1</td> <td>price1</td> </tr> ... </table> </td> <td>ABC</td> </tr> ... </table> 

Answer 6

完整的例子：

  <table border="1" style="width:100%;"> <tr> <td>ABC</td> <td>ABC</td> <td>ABC</td> <td>ABC</td> </tr> <tr> <td>Item 1</td> <td>Item 1</td> <td><table border="1" style="width: 100%;"> <tr><td>Name 1</td><td>Price 1</td></tr> <tr><td>Name 2</td><td>Price 2</td></tr> <tr><td>Name 3</td><td>Price 3</td></tr> </table></td> <td>Item 1</td> </tr> <tr> <td>Item 2</td> <td>Item 2</td> <td>Item 2</td> <td>Item 2</td> </tr> <tr> <td>Item 3</td> <td>Item 3</td> <td>Item 3</td> <td>Item 3</td> </tr> </table> 

Answer 7

只需在你想要的td添加一个新table 。 例如： http : //jsfiddle.net/AbE3Q/

 <table border="1"> <tr> <td>ABC</td> <td>ABC</td> <td>ABC</td> <td>ABC</td> </tr> <tr> <td>Item1</td> <td>Item2</td> <td><table border="1"> <tr><td>qweqwewe</td><td>qweqwewe</td></tr> <tr><td>qweqwewe</td><td>qweqwewe</td></tr> <tr><td>qweqwewe</td><td>qweqwewe</td></tr> </table></td> <td>Item3</td> </tr> <tr> </tr> <tr> </tr> <tr> </tr> <tr> </tr> </table> 

Answer 8

 <table border="1px;" width="100%" > <tr align="center"> <td>Product</td> <td>quantity</td> <td>Price</td> <td>Totall</td> </tr> <tr align="center"> <td>Item-1</td> <td>Item-1</td> <td> <table border="1px;" width="100%"> <tr align="center"> <td>Name1</td> <td>Price1</td> </tr> <tr align="center"> <td>Name2</td> <td>Price2</td> </tr> <tr align="center"> <td>Name3</td> <td>Price3</td> </tr> <tr> <td>Name4</td> <td>Price4</td> </tr> </table> </td> <td>Item-1</td> </tr> <tr align="center"> <td>Item-2</td> <td>Item-2</td> <td>Item-2</td> <td>Item-2</td> </tr> <tr align="center"> <td>Item-3</td> <td>Item-3</td> <td>Item-3</td> <td>Item-3</td> </tr> </table>