CSSの "display：table"プロパティで再現された表のフォーム

Question

CSS display: table/table-row/table-cellのプロパティを持つ表を再現しようとしています。しかし、このようにして作成されたテーブルには、<form>要素が含まれているため、テーブルの構造が崩れているようです。アラインメントはオフになり、フォームを含む完全な行は前の行の最初のセルの幅などに制限されます。

このような状況でフォームが他の要素のように動作するようにすることはできますか？ CSSにdisplay: inlineというフォームを定義しましたが、それは役に立ちません。

私のコード（読みやすくするためにそれを簡体字）OPの要求を1として

form { 
 
    display: inline; 
 
} 
 

 
.calendarTable { 
 
    display: table; 
 
    margin: auto; 
 
    width: 60%; 
 
} 
 

 
.calendarRow { 
 
    display: table-row; 
 
} 
 

 
.calendarCell { 
 
    display: table-cell; 
 
    text-align: left; 
 
    padding: 10px; 
 
    vertical-align: middle; 
 
}

<div class="main"> 
 
    <div class="calendarTable"> 
 
    <div class="calendarRow"> 
 
     <p class="calendarCell">Some title</p> 
 
     <p class="calendarCell">Some title</p> 
 
     <p class="calendarCell">Some title</p> 
 
    </div> 
 

 
    <?php some php loop ?> 
 
    <form method="post"> 
 
     <div class="calendarRow"> 
 
     <p class="calendarCell"> 
 
      <some inputs> 
 
     </p> 
 
     <p class="calendarCell"> 
 
      <some inputs with formaction> 
 
     </p> 
 
     </div> 
 
     <br> 
 
    </form> 
 
    <?php end php loop; ?> 
 

 
    <form method="post"> 
 
     <div class="calendarRow"> 
 
     <p class="calendarCell"> 
 
      <some inputs> 
 
     </p> 
 
     <p class="calendarCell"> 
 
      <some inputs with formaction> 
 
     </p> 
 
     </div> 
 
    </form> 
 
    </div> 
 
</div>