HMTLでテーブルをレスポンシブ化したい

Question

前提・実現したいこと

javaから取得したデータをHTMLでテーブルにしているのですが、
HTMLで作成したテーブルをレスポンシブ化して画面サイズに合わせて横に表示する個数を変化させたいです。
CSSを色々いじったのですが上手くいかず、ご教授いただければと思います

該当のソースコード

<table class="sample">
			<tbody><tr th:each="obj2 : ${employeeList}">
				<td><img th:src="'/emp-icon/' + ${obj2.imageNm}" class="profile_img"></td>
				<td th:text="${obj2.FullNm}"></td>
				<td th:text="${obj2.selfIntroSent}"></td>
			</tr>
			</tbody>
		</table>

img.profile_img {
width: 150px;
height: 150px;
border-radius: 50%;
background-position: left top;
}

table.sample {
	width: auto;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    border-collapse: collapse;
    border-spacing: 0;
   display: block;
   border: none;
}
table.sample tr {
   display: inline;
}
table.sample td {
   margin-bottom: 8px;
   display: block;
   width: auto;
   padding: 1em;
   text-align: center;
   border-top: 1px solid #eee;
   border-left: 1px solid #eee;
   border: none;
}

.sample thead {
    display: flex;
    float: left;
}

.sample thead .sample th:first-child:before {
   content: ' ';
   padding: 1em;
}

.sample tbody {
    display: flex;
    width: auto;
}

試したこと

以下のサイトを参考にしてCSSのレスポンシブ化をしたのですが、上手くいかず。、、、
リンク内容

Comments

[m.ts10806]

Thymeleaf関係なく静的HTMLで実現してからThymeleafに反映されては？
CSSがきくのは結局ブラウザに出力された静的HTMLですし、モックが先だと思います。

[kyoya0819]

画面幅を小さくしたときに、trの幅は変えますか？絶対的な値で

[takahiro00]

trの幅は変えずに個数だけ変えたいです。
画面に入りきらないものは改行させるイメージで考えています

Answer 1

テーブルを使って実装するのではなく、Flexbox を使うべき案件のように思います。

Comments

[takahiro00]

なるほどFlexbox調べてみました。
こちらの方が良いかもですね