划分表格行

Question

我有一个非常基本的问题。但我无法正常工作。

这是我的表结构。

<table style="width:100%;">
   <tr style="background-color:#000;">
      <td style="color:#fff;">
        Fruits
      </td>
   </tr>
   <tr>
      <td>
        Lychee
      </td>
      <td>
        Mango
      </td>
      <td>
        Papaya
      </td>
      <td>
        Banana
      </td>
   </tr>
</table>

如何将输出设为

Answer 1

使用the colspan attribute。 Colspan允许一个td跨越多列。

<table style="width:100%;">
   <tr style="background-color:#000;">
      <td style="color:#fff;" colspan="4">
        Fruits
      </td>
   </tr>
   <tr>
      <td>
        Lychee
      </td>
      <td>
        Mango
      </td>
      <td>
        Papaya
      </td>
      <td>
        Banana
      </td>
   </tr>
</table>

Answer 2

使用<td style="color:#fff;" colspan="4">

请参阅小提琴https://jsfiddle.net/DIRTY_SMITH/3oo2jmko/1/

<table style="width:100%;">
   <tr style="background-color:#000;">
      <td style="color:#fff;" colspan="4">
        Fruits
      </td>
   </tr>
   <tr>
      <td>
        Lychee
      </td>
      <td>
        Mango
      </td>
      <td>
        Papaya
      </td>
      <td>
        Banana
      </td>
   </tr>
</table>