画像のようなtableのレイアウトは実装可能ですか？

WordPressブログにて↑画像のようなtableレイアウトを実装したいです。

今回のみ適用させたいので「classの直下」にCSSを当てたいのですが、↓画像のようになってしまいます…。

どうすれば１枚目の画像のような結果を得られるでしょうか？それとも、そもそもtableとして実現不可でしょうか？

html
1<table>
2<tbody>
3<tr class="test">
4<th>テキスト</th>
5<td><img src="" alt="" /></td>
6</tr>
7
8<tr class="test">
9<th>テキスト</th>
10<td><img src="" alt="" /></td>
11</tr>
12</tbody>
13</table>

css
1@media screen and (max-width: 767px) {
2.test > th,
3.test > td {
4display: block;
5}
6}
7
8@media screen and (min-width: 768px) {
9.test > th,
10.test > td {
11width: 50%;
12}
13}

ご回答いただいてからの追記

以下の方法で実装できました！

html
1<table>
2    <thead class="test">
3        <tr>
4            <th>テキスト</th>
5        </tr>
6        <tr>
7            <td><img src="" alt="" /></td>
8        </tr>
9    </thead>
10    <tbody class="test">
11        <tr>
12            <th>テキスト</th>
13        </tr>
14        <tr>
15            <td><img src="" alt="" /></td>
16        </tr>
17    </tbody>
18</table>

css
1@media screen and (min-width: 768px) {
2.test {
3        display: table-cell;
4    }
5}

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

回答1件

ベストアンサー

<tr>を分ければよいかと思いました。

html
1<table>
2<tbody>
3<tr class="test">
4　<th>テキスト</th>
5</tr>
6<tr>
7　<td><img src="" alt="" /></td>
8</tr>
9
10<tr class="test">
11　<th>テキスト</th>
12</tr>
13<tr>
14　<td><img src="" alt="" /></td>
15</tr>
16</tbody>
17</table>