Question

在CSS表格中，我有一个id=inner-table的常规表。 CSS表格有display:table，似乎内部表被视为CSS表外部的单元格。因此，第一列扩展到内表的宽度。如何防止内部表的行为类似于外部CSS表的单元格？我已经尝试为内部表设置display: block，但这不起作用。这是代码：

＆＃13;

    .Table {
      display: table;
    }
    .Title {
      display: table-caption;
      text-align: center;
      font-weight: bold;
      font-size: larger;
    }
    .Heading {
      display: table-row;
      font-weight: bold;
      text-align: center;
    }
    .Row {
      display: table-row;
    }
    .Cell {
      display: table-cell;
      border: solid;
      border-width: thin;
      padding-left: 5px;
      padding-right: 5px;
    }

＆＃13;

<body>
<div class="Table">
  <div class="Title">
    <p>This is a Table</p>
  </div>
  <div class="Heading">
    <div class="Cell">
      <p>Heading 1</p>
    </div>
    <div class="Cell">
      <p>Heading 2</p>
    </div>
    <div class="Cell">
      <p>Heading 3</p>
    </div>
  </div>
  <div class="Row">
    <div class="Cell">
      <p>Row 1 Column 1</p>
    </div>
    <div class="Cell">
      <p>Row 1 Column 2</p>
    </div>
    <div class="Cell">
      <p>Row 1 Column 3</p>
    </div>
  </div>

  <div id='inner-table'>
    <table>
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
        </tr>
      </thead>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>B</td>
      </tr>
      <tr>
        <td>C</td>
        <td>D</td>
        <td>B</td>
      </tr>
    </table>
  </div>

  <div class="Row">
    <div class="Cell">
      <p>Row 2 Column 1</p>
    </div>
    <div class="Cell">
      <p>Row 2 Column 2</p>
    </div>
    <div class="Cell">
      <p>Row 2 Column 3</p>
    </div>
  </div>
</div>

</body>

＆＃13;

Answer 1

在.Table之前关闭第一个#inner-table的div，而不是在Row div之后关闭它：

<强> Demo

<div class="Table">
    <div class="Title">
        <p>This is a Table</p>
    </div>
    <div class="Heading">
        <div class="Cell">
            <p>Heading 1</p>
        </div>
        <div class="Cell">
            <p>Heading 2</p>
        </div>
        <div class="Cell">
            <p>Heading 3</p>
        </div>
    </div>
    <div class="Row">
        <div class="Cell">
            <p>Row 1 Column 1</p>
        </div>
        <div class="Cell">
            <p>Row 1 Column 2</p>
        </div>
        <div class="Cell">
            <p>Row 1 Column 3</p>
        </div>
    </div>
</div>
<div id='inner-table'>
    <table>
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
            </tr>
        </thead>
        <tr>
            <td>A</td>
            <td>B</td>
            <td>B</td>
        </tr>
        <tr>
            <td>C</td>
            <td>D</td>
            <td>B</td>
        </tr>
    </table>
</div>
<div class="Row">
    <div class="Cell">
        <p>Row 2 Column 1</p>
    </div>
    <div class="Cell">
        <p>Row 2 Column 2</p>
    </div>
    <div class="Cell">
        <p>Row 2 Column 3</p>
    </div>
</div>

Answer 2

我需要的是内表来跨越外表的多个列。从我所看到的，在CSS中没有办法做到这一点。因此，我在表格中使用了一个表格，内部表格位于colspan td内：

＆＃13;

<html>

<body>

  <table>
    <th>
      <tr>
        <td>
          <p>Heading 1</p>
        </td>
        <td>
          <p>Heading 2</p>
        </td>
        <td>
          <p>Heading 3</p>
        </td>
      </tr>
    </th>

    <tr>
      <td>
        <p>Row 1 Column 1</p>
      </td>
      <td>
        <p>Row 1 Column 2</p>
      </td>
      <td>
        <p>Row 1 Column 3</p>
      </td>
    </tr>

    <tr>
      <td colspan='3'>
        <table>
          <thead>
            <tr>
              <th>Column 1</th>
              <th>Column 2</th>
              <th>Column 3</th>
            </tr>
          </thead>
          <tr>
            <td>A</td>
            <td>B</td>
            <td>B</td>
          </tr>
          <tr>
            <td>C</td>
            <td>D</td>
            <td>B</td>
          </tr>
        </table>
      </td>
    </tr>

    <tr>
      <td>
        <p>Row 2 Column 1</p>
      </td>
      <td>
        <p>Row 2 Column 2</p>
      </td>
      <td>
        <p>Row 2 Column 3</p>
      </td>
    </tr>
  </table>

</body>

</html>

＆＃13;

在CSS表中显示表

2 个答案: