Question

我有一张如下表（左侧） - 如何让它像右边那样？

enter image description here

    <table>
        <thead>
          <tr>
              <td colspan='3' rowspan='2'>Lorem</td>
              <td>1</td>
          </tr>
          <tr>
              <td>2</td>
          </tr>
          <tr>
              <td>A</td>
              <td>B</td>
              <td>C</td>
          </tr>
       </thead>
    </table>

Answer 1

像这样：

<table>
  <thead>
    <tr>
      <td colspan='3'>Lorem</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
  </tbody>
</table>

Answer 2

这是你的代码!!

<强> HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/all.css"/>
    <title>STACKOVERFLOW</title>
</head>
<body>
<table>
    <tr>
        <td colspan="3">Lorem</td>
    </tr>
    <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
    </tr>
</table>
</body>
</html>

<强> CSS

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

Answer 3

<table>
        <thead>
          <tr>
              <td colspan='3'>Lorem</td>

          </tr>

          <tr>
              <td>A</td>
              <td>B</td>
              <td>C</td>
          </tr>
       </thead>
    </table>

HTML表rowspan

3 个答案: