tableの横幅を100%にする方法

PR 2017/11/7

このトピックには4件の返信、2人の参加者があり、最後にわいひらにより8年、 10ヶ月前に更新されました。

4件の返信スレッドを表示中

投稿者

投稿
- 2017年11月7日 2:42 PM #56782
  のりたま
  ゲスト
  お世話になっております。
  初歩的な質問で申し訳ないですけれど宜しくお願いします。
  固定ページに横幅100%のテーブルを配置したくてこちらを参考にしていますがどうしても横幅が100%になりません。
  
  固定ページに
```
<table class="w100">
<tr>
<th>aaa</th>
<th>bbb</th>
</tr>
<tr>
<td>xxx</td>
<td>yyy</td>
</tr>
</table>
```
  と記入。
  
  子テーマのstyle.cssに
```
.w100 {
  width: 100%;
  border-collapse: collapse;
}

.w100 th,
.w100 td {
  border: 1px solid #ccc;
}
```
  と記入しました。
  
  どの様にしたら横幅100%のテーブルにできるでしょうか？
  ご教授のほど、よろしくお願いします。
  
  http://www.wordpresstest.shop/
- 2017年11月7日 4:47 PM #56783
  こんぶ
  ゲスト
  横から失礼します！　以下のように「.w100」の「width」に「!important」をつけると100%で表示されると思いますよ！（＾＾）
```
.w100 {
width: 100% !important;
border-collapse: collapse;
}
```
- 2017年11月7日 5:48 PM #56784
  かうたっく
  ゲスト
  横幅を100%にする場合、テーブルに入れる文字列によってずいぶん見た目が変わると思います。一応追記。
  
  ・文字列が日本語ではないもの：例えばURLとかローマ字の文字列の場合　はみ出します。その場合.w100にword-break: break-all;が必要になりそうです。
  
  ・thやtdの文字数によって見た目が変わる事もあるので、困った人用に書いておきますね。
```
<tr>
<th>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</th>
<th>bbb</th>
</tr>
```
  ひどい例ですけど、この場合aaaaaaaaa……を囲むthにclass名を付けて
```
<tr>
<th class="w40">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</th>
<th>bbb</th>
</tr>
```
  テーブルの幅100%!importantのaaaaaa・・・文字列を40%にしたい場合.w40 { width: 40%; }
  
  30%にしたい場合.w30 { width: 30%; }HTMLは下記の感じ
```
<tr>
<th class="w30">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</th>
<th>bbb</th>
</tr>
```
  と指定すれば思った通りのレイアウトになりそうです。
  
  ※border-collapse: collapse;とborder: 1px solid #ccc;は親テーマにあるので指定が無くても平気ですよ＾＾　※分かりやすいタイトルだったので、今後の検索者さん用に追記させていただきました❦
- 2017年11月7日 6:44 PM #56785
  
  のりたま
  ゲスト
  
  こんぶ様
  ありがとうございます。できました！
  本当に感謝です。
  CSSの優先順位とか良く分かってないですけれど＾＾；
  無事に横幅100%にする事ができました。
  
  これは子テーマに記述したテーブルのスタイルよりも親テーマのテーブルのスタイルが優先されていたのを「!important」を使って強引に子テーマ優先にしたという事でしょうか？
  
  すみません。
  また、質問をしてしまって＾＾；
  
  かうたっく様
  有用な情報ありがとうございます。
  良いですね、この技！
  うまく表示する事ができました、この技は是非使わせてもらいます。
- 2017年11月7日 7:08 PM #56787
  わいひら
  キーマスター
  そうですね。!importantを利用するとCSSの優先度を最上位に上げることができます。
  http://www.xml.vc/kiso/!important.html
  
  importantを利用しない場合は、以下のように高いCSAセレクタで上書きすることもできます。
```
.article table.w100 {
    width: 100%;
}
```
投稿者

投稿