Forms in tables reproduced with css "display: table" property - html

Question

I'm trying to reproduce a table with the CSS display: table/table-row/table-cell properties. However, it seems that <form> elements contained in tables created this way mess up with the tables' structure. Alignment would be off, a full row containing a form would be limited to the width of the previous' row first cell, etc. It goes all over the place.
Is it possible to make forms behave like other elements in this situation? I defined forms as display: inline in the CSS but that doesn't help.
My code (Simplified it for readability)
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>

Answer 1

UPDATE
As per OP's request,
I wanted to know if it is possible to have forms behaving properly in this scenario.
Indeed it is possible, I'm not sure if it's valid, but it works flawlessly.
SOLUTION
Assign each <form> display:table-row
See updated Snippet.
There were <form>s wrapped around the .calendarRows
The 2nd and 3rd rows had only 2 cells each, while the 1st row had 3 cells.
If we were to apply invalid HTML to <table>, <tr>, and <td>, then they would also perform erratically as well. In this Snippet I have:
Removed the <forms>
Added 1 cell to the 2nd and 3rd rows
Added table-layout:fixed to control the table's behavior even more. Note that I have declared each cell to be 32% wide. Normally, this would be hard to accomplish because of the 3rd column having more content than the other columns.
Added outlines to demonstrate how cells are correctly aligned.
SNIPPET
.calendarTable {
display: table;
margin: auto;
width: 60%;
table-layout: fixed;
}
.calendarRow {
display: table-row;
}
.calendarCell {
display: table-cell;
text-align: left;
padding: 10px;
vertical-align: middle;
width: 32%;
}
p {
outline: 1px solid black;
}
.red {
color: red;
font-weight: 700
}
<div class="main">
<div class="calendarTable">
<form class="calendarRow">
<p class="calendarCell">Some title</p>
<p class="calendarCell">Some title</p>
<p class="calendarCell">Some title</p>
</form>
<form class="calendarRow">
<p class="calendarCell">Some new title</p>
<p class="calendarCell">Some new title</p>
<p class="calendarCell red">This cell was missing</p>
</form>
<form class="calendarRow">
<p class="calendarCell">Some new title</p>
<p class="calendarCell">Some new title</p>
<p class="calendarCell red">This cell was missing</p>
</form>
</div>
</div>