我想知道如何制作这个表格单元格

Question

我正在尝试创建此表：

早些时候，我在下面这样做了：

table { border-collapse: collapse; }
td, th { border: solid #777 1px; }

<table>
  <tr>
    <th rowspan="2" style="text-align: center; vertical-align: middle;">title1</th>
    <th colspan="7" style="text-align: center;">grade</th>
  </tr>
  <tr style="text-align: center;">
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
  <tr>
    <td rowspan="3">title_1</td>
    <td>sub_1</td>
    <td>sub_2</td>
    <td>sub_3</td>
  </tr>
</table>

但我无法制作title_1 / sub_1行，sub_2行，sub_3行或num和1111个单元格。我怎么能这样做？

Answer 1

我不知道我是否理解您的问题，但如果您正在寻找图片中显示的 html表格，则此处是参考。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <table class="table table-bordered">
    <thead></thead>
    <tbody>
      <tr>
        <th colspan="2" rowspan="2">title1</th>
        <th colspan="7">grade</th>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
      </tr>
      <tr>
        <td rowspan="3">title_1</td>
        <th>sub_1</th>
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr>
        <th>sub_2</th>
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr>
        <th>sub_3</th>
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr>
        <th colspan="2">num</th>
        <td colspan="7">111</td>
      </tr>
    </tbody>
  </table>
</div>