CSSで文字をテーブルの上に表示したい

前提・実現したいこと

すごく初歩的ですが、CSSの表示で悩んでいます。
以下のような画面があるのですが、2019年,2020年をテーブルの上に表示させたいです。
CSSを色々いじってもうまくいかず、
ご教授いただければと思います。

完成イメージは以下のような感じです。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja" xmlns:sec="http://www.thymeleaf.org/extras/spring-security4">
3<link href="/css/top.css" rel="stylesheet"></link>
4<head>
5<meta charset="UTF-8">
6</head>
7<body>
8<div id="contents">
9        <a href="/history/4/2019">2019年</a><br>
10        <a href="/history/4/2020">2020年</a><br>
11    <table class="user_data_table">
12                <tr><th>A</th><th>B</th><th>C</th><th>D</th></tr>
13    </table>
14</div>
15</body>
16</html>

該当のソースコード

css
1#contents{
2  display: flex;
3  display: -moz-flex;
4  display: -o-flex;
5  display: -webkit-flex;
6  display: -ms-flex;
7  flex-direction: row;
8  -moz-flex-direction: row;
9  -o-flex-direction: row;
10  -webkit-flex-direction: row;
11  -ms-flex-direction: row;
12}
13
14.user_data_table{
15  width:95%;
16}

試したこと

cssにfloatを追加してもうまくいきませんでした。。。

m.ts10806

2019/12/07 03:06 編集

Thymeleafのようですが直接関係ないのであればブラウザ表示時のソースから取得できるHTMLを提示された方がアドバイスを得やすくなります。

takahiro00

2019/12/07 03:19

はい！ソース変えました！

m.ts10806

2019/12/07 03:22

あと念のため、目標とするレイアウトを図示いただければと。「上に乗せたい」だけだと立体的に捉えられなくもないですし、どのような位置関係を望んでいるか不明瞭なところもあります。

takahiro00

2019/12/07 03:42

レイアウトつけました！

行動規範の内容に同意します

回答1件

ベストアンサー

flexboxを使うなら、折り返しを許可すればいいかと。

css
1#contents{
2  display: flex;
3  flex-direction: row;
4  flex-wrap: wrap; /* 折り返し許可 */
5}
6#contents a{
7  width: 30%;  /* 幅を設定 */
8  text-align: center;
9}
10
11.user_data_table{
12  width:95%;
13  border: 1px solid;
14}