Help us understand the problem. What is going on with this article?

CSSだけで、tableの中にある行(row)の順番を変更して左右反転させる

やりたいこと

HTMLで作られたテーブルがあり、これを通常(デフォルト)の設定である「左から右へと行の内容が続いていく」状態をひっくりかえし、順番を入れ替えたい、しかもCSSの記述だけでどうにかしたい!という場面にあり、まぁ出来なくはないのか...と見つけた手法です。

CSSをこう書く

tr (table row)が横向きの行なので、まずこれをtransformで左右反転させます。これだけだと鏡文字になってしまい読めないので、それぞれの構成要素であるtd (table data)を再度左右反転させることで、正常に表示されるようになります。

.reversed table tr {
    transform: scale(-1, 1);
}

.reversed table td {
    transform: scale(-1, 1);
}

上記の要素以外に、th (table header)などががある場合は追記が必要です。table trという具合に子要素で指定しているのは、captionなどはそのままにしておく狙いがあります。

フルサンプル

table.html
<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <table>
    <caption>通常のテーブル</caption>
        <tr>
            <th>ヘッダー左上</th>     <th>ヘッダー中央</th>     <th>ヘッダー右上</th>
        </tr>
        <tr>
            <td>A1</td>     <td>B1</td>     <td>C1</td>
        </tr>
        <tr>
            <td>A2</td>     <td>B2</td>     <td>C2</td>
        </tr>
    </table>
    <br>
    <div class="container reversed">
    <table>
    <caption>反転しているテーブル</caption>
        <tr>
            <th>ヘッダー左上</th>     <th>ヘッダー中央</th>     <th>ヘッダー右上</th>
        </tr>
        <tr>
            <td>A1</td>     <td>B1</td>     <td>C1</td>
        </tr>
        <tr>
            <td>A2</td>     <td>B2</td>     <td>C2</td>
    </table>
    </div>
</body>
</html>

style.css
.reversed table tr {
    transform: scale(-1, 1);
}

.reversed table th {
    transform: scale(-1, 1);
}

.reversed table td {
    transform: scale(-1, 1);
}

image.png

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした