HTMLのテーブルを縦に表示したい

Question

前提・実現したいこと

thymeleafでJavaから取得したデータで動的にテーブルを作成してるのですが、
テーブルを下の図のような縦？の表示にしたいです。
ご教授いただければと思います。

該当のソースコード

以下がソースになります。

		<div id="user_edit">
		<table>
			<tbody><tr th:each="obj2 : ${employeeList}">
				<td th:text="${obj2.userId}"></td>
				<td th:text="${obj2.imageNm}"></td>
				<td th:text="${obj2.FullNm}"></td>
				<td th:text="${obj2.selfIntroSent}"></td>
			</tr>
			</tbody>
		</table>
		</div>

以下が実際にブラウザに表示されるソースです。

		<div id="user_edit">
		<table>
			<tbody><tr>
				<td>17</td>
				<td>17.gif</td>
				<td>yyyy</td>
				<td>テストテストテスト</td>
			</tr><tr>
				<td>18</td>
				<td>18.gif</td>
				<td>kkkk</td>
				<td>テストテストテスト</td>
			</tr>
			</tbody>
		</table>
		</div>

試したこと

ここに問題に対して試したことを記載してください。

<tr>を全てのtdにつけたりしたのですが、うまくいかず、

Answer 1

以下のCSSで解決しました。

table {
    width: auto;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    border-collapse: collapse;
    border-spacing: 0;
}
th, td {
        display: block;
        width: auto;
        padding: 1em;
        text-align: center;
        border-top: 1px solid #eee;
        border-left: 1px solid #eee;
        border: none;
}
thead {
    display: flex;
    float: left;
}
thead th:first-child:before {
   content: ' ';
   padding: 1em;
}
tbody {
    display: flex;
    width: auto;
}
tbody .employee tr {
    display: flex;
    flex-direction: column;
}