如何在CSS表格行中插入多個表單？

Question

我正在使用HTML表格結構構建Wishlist/Cart表格，並且我需要爲每個表格行插入多個表格。但是以下解決方案都不是有效的，因爲不允許在表格的結構中放置表格標籤，並且會破壞表格的結構。

<table> 
    <thead> 
    <tr> 
     <th>1st column</th> 
     <th>2nd column</th> 
     <th>3rd column</th> 
    </tr> 
    </thead> 
    <tbody> 
    <form id="1st_row_form"> 
     <tr> 
     <td><input value="1 1"></td> 
     <td><input value="1 2"></td> 
     <td><input value="1 3"></td> 
     </tr> 
    </form> 
    <form id="2nd_row_form"> 
     <tr> 
     <td><input value="2 1"></td> 
     <td><input value="2 2"></td> 
     <td><input value="2 3"></td> 
     </tr> 
    </form> 
    </tbody> 
</table> 

或：

<table> 
    <thead> 
    <tr> 
     <th>1st column</th> 
     <th>2nd column</th> 
     <th>3rd column</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <form id="1st_row_form"> 
     <td><input value="1 1"></td> 
     <td><input value="1 2"></td> 
     <td><input value="1 3"></td> 
     </form> 
    </tr> 
    <tr> 
     <form id="2nd_row_form"> 
     <td><input value="2 1"></td> 
     <td><input value="2 2"></td> 
     <td><input value="2 3"></td> 
     </form> 
    </tr> 
    </tbody> 
</table> 

Answer 1

，我發現這個解決方案，使用CSS表格完美的作品對我來說：

<div style="display:table;width:100%;"> 
    <div style="display: table-header-group"> 
    <div style="display:table-row;"> 
     <div class="table-cell">1st column</div> 
     <div class="table-cell">2nd column</div> 
     <div class="table-cell">3rd column</div> 
    </div> 
    </div> 
    <div style="display: table-row-group;"> 
    <form id="1st_row_form" style="display:table-row;"> 
     <div class="table-cell"><input value="1 1"></div> 
     <div class="table-cell"><input value="1 2"></div> 
     <div class="table-cell"><input value="1 3"></div> 
    </form> 
    <form id="2nd_row_form" style="display:table-row;"> 
     <div class="table-cell"><input value="2 1"></div> 
     <div class="table-cell"><input value="2 2"></div> 
     <div class="table-cell"><input value="2 3"></div> 
    </form> 
    </div> 
</div>