制作不相同的表行（表内表内表）

Posted 2023-03-06

【中文标题】制作不相同的表行（表内表内表）

【英文标题】：Making non identical table rows (table within table within table)

【发布时间】：2019-09-15 23:23:46

【问题描述】：

我在创建与其上方不同的行时遇到问题。 我想要一行有 3 个单元格，然后在这一行下方延伸到行尾，依此类推。第一行 - 3 个单元格，第二行 - 1 个长单元格（长度等于上述三个单元格）并重复。

这是我使用的 html & CSS 模板

#table 
  margin: 0px;
  margin-left: 585px;
  margin-top: 50px;
  z-index: 2;
  width: 385;
  border-collapse: collapse;


.divStyle 
  /* in charge of the scroller*/
  width: 385px;
  height: 428px;
  overflow: auto;


.innerTables 
  width: 360;
  border-collapse: collapse;
  vertical-align: middle;


.productionTable tr td 
  width: 360px;
  border: 2px solid black;


.innerTables tr td,
th 
  margin: 0px;
  padding: 0px;
  width: 120px;


.innerTables tr td 
  border: 1px solid black;

<table id='table'>
  <tr>
    <td>
      <table class='innerTables'>
        <tr>
          <th>Building</th>
          <th>Amount</th>
          <th>1 Per</th>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <div class='divStyle'>
        <table class='innerTables'>
          <tr>
            <td>Fishery</td>
            <td class='inputText' id="fishery"></td>
            <td>800 Farmers</td>
          </tr>
          <tr>
            <td colspan="0">
              <table class='productionTable'>
                <tr>
                  test
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </div>
    </td>
  </tr>
</table>

我尝试使用边框来指示它是否有效。

This is what I try to achieve

This is what I achieve

【问题讨论】：

你不能只使用 colspan 吗？

想要得到什么并不容易理解。也许您可以详细说明或添加图片。

已编辑，但以下答案有所帮助，谢谢

【参考方案1】：

使用 colspan 扩大列的宽度

我为你做了一个小提琴https://jsfiddle.net/vzy97s2a/

                    <tr>
                      <td colspan="3">
                        wider
                      </td>
                    </tr>

【参考方案2】：

我会说使用colspan="3" 作为其他答案，但是如果您希望它是动态的并且您不想将colspan 添加到每个表格单元格中，您可以尝试使用这种方法

.row
    display: flex;


.column
    border: 1px solid red;


.table> .row:nth-child(odd) > .column
    width: 33.3%;
    flex-grow: 1;


.table> .row:nth-child(even) > .column
    width: 100%;

<div class="table">
    <div class="row">
        <div class="column">test</div>
        <div class="column">test</div>
        <div class="column">test</div>
    </div>
    <div class="row">
        <div class="column">test</div>
    </div>
    <div class="row">
        <div class="column">test</div>
        <div class="column">test</div>
        <div class="column">test</div>
    </div>
    <div class="row">
        <div class="column">test</div>
    </div>
</div>

【参考方案3】：

最好的方法是 colspan 或 rowspan。在那里阅读更多 https://www.w3schools.com/tags/att_td_rowspan.asp

<tr>
 <td colspan="3">
  <table class='productionTable'>

【参考方案4】：

你可以使用 colspan 属性代替

<table id='table'>
    <tr>
        <td>
            <table class='innerTables'>
                <tr>
                    <th>Building</th>
                    <th>Amount</th>
                    <th>1 Per</th>
                </tr>
                <tr>
                    <td>Fishery</td>
                    <td class='inputText' id="fishery"></td>
                    <td>800 Farmers</td>
                </tr>
                <tr>
                  <td colspan="3">
                    Test
                  </td>
                </tr>
            </table>
        </td>
    </tr>
</table>