やりたいこと

bootstrapのCSSが当たっているtableの行列を逆転させたい。

↓ｍｄだと最初の列が見出しになってしまいますが、書いてある文字のようにしたいのです。

|見出し|見出し|見出し|見出し|
|-|-|
|内容|内容|内容|内容|

↓

見出し	内容
見出し	内容
見出し	内容
見出し	内容

cssを追加していじるしかないのでしょうか？もし総なのであればどのようにすれば良いのでしょうか？
お教えいただけると幸いです。

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

回答1件

ベストアンサー

Bootstrap適用を前面に出される理由が不明ですが、見出しを左に寄せるだけであれば、以下のコードで対応できるかと思います。

html
1<table>
2  <tr>
3    <th>見出し</th>
4    <td>内容</td>
5  </tr>
6    <tr>
7    <th>見出し</th>
8    <td>内容</td>
9  </tr>  <tr>
10    <th>見出し</th>
11    <td>内容</td>
12  </tr>
13  <tr>
14    <th>見出し</th>
15    <td>内容</td>
16  </tr>
17</table>

もし、見出しの並び方を「PCとタブレットでは横一列、スマホでは縦一列」にしたいということであれば、Bootstrapにそのような機能はありませんので、ご自身でレスポンシブ対応を行う必要があります。「レスポンシブデザインテーブル」で検索すればCSSだけで実現している実装も見つかりますので、適宜参考にしながらコーディングすれば良いと思います。
参考までに、[CSS]レスポンシブ対応のテーブルを実装するシンプルで、賢いアイデア | コリスを基に私が実装した例を掲載します。

html
1<table class="reflow-table">
2  <thead>
3    <tr class="reflow-table_tr">
4      <th class="reflow-table_th" data-priority="1">日付</th>
5      <th class="reflow-table_th" data-priority="2">金額</th>
6      <th class="reflow-table_th" data-priority="3">科目</th>
7    </tr>
8  </thead>
9  <tbody>
10    <tr class="reflow-table_tr">
11      <td class="reflow-table_td" aria-label="日付">１月１日</td>
12      <td class="reflow-table_td price" aria-label="金額">１００円</td>
13      <td class="reflow-table_td" aria-label="科目">その１</td>
14    </tr>
15    <tr class="reflow-table_tr">
16      <td class="reflow-table_td" aria-label="日付">２月１日</td>
17      <td class="reflow-table_td price" aria-label="金額">２００円</td>
18      <td class="reflow-table_td" aria-label="科目">その２</td>
19    </tr>
20  </tbody>
21</table>
22<!-- スマホで見出しを縦一列に並べた際の見出しの文言を「aria-label」属性に設定する必要があります -->

CSS
1.reflow-table {
2  border: solid 1px black;
3  table-layout: fixed;
4  width: 100%;
5}
6.reflow-table .reflow-table_tr {
7  border: solid 1px black;
8}
9.reflow-table .reflow-table_th, .reflow-table .reflow-table_td {
10  border: solid 1px black;
11}
12
13# max-widthの切り替えポイントは適宜設定してください。
14@media screen and (max-width: 760px) {
15  .reflow-table thead {
16    display: none;
17  }
18  .reflow-table .reflow-table_tr {
19    display: block;
20  }
21  .reflow-table .reflow-table_td {
22    display: block;
23  }
24  .reflow-table .reflow-table_td:before {
25    content: attr(aria-label);
26    float: left;
27    border: solid 1px red;
28  }
29}

投稿2017/05/16 14:24

s-show

総合スコア203

jakelizzI

2017/05/17 04:19 編集

ご解答ありがとうございます。 > Bootstrap適用を前面に出される理由が不明ですが説明が不足しており申し訳ございません。既に多量のページを作成しており、全てのページがbootstrapを使用したデザインなので、見た目などを変更したくなかったため、このような質問をさせて頂きました。また、cssを新に適用させるより、bootstarpにそのような機能があればそれを使用したほうが良いとおもっていたため、bootstrapにこだわった形となってしまいました。 th tdと並べるケースは試してみたのですが、theadやtbodyが無いとbootstrapのcssが当たらず、デザインが崩れてしまいました。となると、やはりCSSで作成する他ないのですね。具体例も出してくださり、ありがとうございます！参考にさせて頂きます！

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