我在创建与其上方的行不同的行时遇到问题。 我想要一行有 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>
我尝试使用边框来指示它是否有效。
最佳答案
关于html - 制作不相同的表行(表中表中的表),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55867729/