如何将div放在表中

Question

我想在表格中加<div>，但<div>必须包含2个单元格和2行：

例如我想提出：

(WonderWidget ,2ND Quarter)
(WonderWidget ,3ND Quarter)
(MegaWidget ,2ND Quarter)
(MegaWidget ,3ND Quarter)

进入<div>是可能的吗？

Answer 1

嗨，这很容易，而且很有可能。只需使用colspan和rowspan

即可

<强>代码：

<style>
table, table * {
    border: 1px solid #000;
}
</style>
<table>
    <thead>
        <tr>
            <th>PRODUCT</th>
            <th>1ST QUARTER</th>
            <th>2ND QUARTER</th>
            <th>3RD QUARTER</th>
            <th>4TH QUARTER</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>SupaWidget</td>
            <td>$x</td>
            <td>$x</td>
            <td>$x</td>
            <td>$x</td>
        </tr>
        <tr>
            <td>WonderWidget</td>
            <td>$x</td>
            <td colspan="2">$x</td>
            <td>$x</td>
        </tr>
        <tr>
            <td>MegaWidget</td>
            <td>$x</td>
            <td colspan="2">$x</td>
            <td>$x</td>
        </tr>
        <tr>
            <td>HyperWidget</td>
            <td>$x</td>
            <td>$x</td>
            <td>$x</td>
            <td>$x</td>
        </tr>
    </tbody>
</table>

访问此jsFiddle。

Answer 2

<td colspan="2" rowspan="2">
    <div>WonderWidget </div>
</td>

Answer 3

试试这个：

<table>
 <thead>
  <tr>
    <th>header1</th><th>header2</th><th>header3</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td colspan = "2">
     <div class="myStyle">
      Entry for headers 1 and 2
     </div>
   </td>
   <td>
     Entry for header 3
   </td>
  </tr>
 </tbody>
</table>

添加的rowpans可以遵循相同的原则

另外，请检查http://www.w3schools.com/tags/att_td_rowspan.asp

Answer 4

记住！ div只能在td中保留在表中。因此，您需要将td设为“大”，分为两行和两列。

这里我做了一个明确的例子：http://jsfiddle.net/ZLpay/，就像这样：

 <tr>
    <td>WonderWidget</td>
    <td>$x</td>
    <td colspan="2" rowspan="2">$x</td>
    <td>$x</td>
 </tr>