Question

我必须在不影响原始表的情况下在另一个表的两行之间显示一个表？这是否可以使用HTML或CSS？

Answer 1

这可能会对您有所帮助：

<!DOCTYPE html>
<html>
<head>
<style>
  table, th, td {
      border: 1px solid black;
      border-collapse: collapse;
  }
  th, td {
      padding: 5px;
  }
</style>
</head>
<body>

<table>
<tr>
    <td>This cell contains a list
      <ul>
        <li>apples</li>
        <li>bananas</li>
        <li>pineapples</li>
      </ul>
    </td>
    <td>HELLO</td>
  </tr>
  <tr>
    <td colspan='2'>This cell contains a table:
      <table>
        <tr>
          <td>A</td>
          <td>B</td>
        </tr>
        <tr>
          <td>C</td>
          <td>D</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>This cell contains a list
      <ul>
        <li>apples</li>
        <li>bananas</li>
        <li>pineapples</li>
      </ul>
    </td>
    <td>HELLO</td>
  </tr>
</table>

</body>
</html>

Answer 2

根据您要完成的操作，您可以添加另一行，其中包含所需列的td和colspan，然后将表格放入其中。

祝你好运

table {
  border-collapse: collapse;
  border: 1px solid black;
}

td {
  width: 100px;
  border: 1px solid black;
  padding: 5px;
}

#table1 {
  background: crimson;
}

#table2 {
  background: green;
}

<table id="table1">
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td colspan=2>
  <table id="table2">
        <tr>
          <td>1</td>
          <td>2</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
        </tr>
      </table>
    </td>
  </tr>    
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
</table>

Answer 3

您可以轻松地使用css flexbox以您喜欢的任何方式实现表格结构。有关演示

，请参阅我的codepen链接

<div id="table1" class="table">
  <div id="row1" class="row">
    <div class="column outer-col">table1 row 1 col1</div>
    <div class="column outer-col">table1 row 1 col2</div>
  </div>
  <div id="table2" class="table">
    <div class="row">
      <div class="column inner-col">table2 row 1 col1</div>
      <div class="column inner-col">table2 row 1 col2</div>
      <div class="column inner-col">table2 row 1 col3</div>
    </div>
    <div class="row">
      <div class="column inner-col">table2 row 2 col1</div>
      <div class="column inner-col">table2 row 2 col2</div>
      <div class="column inner-col">table2 row 2 col3</div>
    </div>
  </div>
  <div id="row2" class="row">
    <div class="column outer-col">table1 row 2 col1</div>
    <div class="column outer-col">table1 row 2 col2</div>
  </div>
</div>

.table {
  display: flex;
  flex-direction: column;
}

#table1 {
  border: 1px solid;
}
.row {
  border: 1px solid;
  display: flex;
  flex-direction: row;
}
.column {
  height: 100%;
  border-left: 1px solid;
  width: 100%;
}
.inner-col {
  background-color: green;
}
.outer-col {
  background-color: yellow;
}

我可以在html中有一个可以出现在另一个表的两行之间的表吗？

3 个答案: