CSS完全設計ガイドを参考にしながらテーブルを作っています。
下記のソースコードで、
メディアクエリ適用時にラッパークラス.bl_vertTable
にてborder-right-width: 0
と指定して、
.bl_vertTable th:last-child
および.bl_vertTable td:last-child
で改めてborder-right-width: 1px;
と指定しているのですが、なぜわざわざ疑似クラスで指定しなおしているのでしょうか?
html
1<head> 2 <link rel="stylesheet" type="text/css" href="css/reset.css"> 3 <link rel="stylesheet" type="text/css" href="css/chap6Table.css"> 4 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 5</head> 6 7<div class="bl_vertTable"> 8 <table> 9 <thead> 10 <tr> 11 <th>名前</th> 12 <th>所属</th> 13 <th>職種</th> 14 <th>得意分野</th> 15 </tr> 16 </thead> 17 <tbody> 18 <tr> 19 <td> 20 本名 太郎 21 </td> 22 <td> 23 株式会社ムショク/株式会社NEET_STAR_Corp 24 </td> 25 <td> 26 テクニカルディレクター/シニアエンジニア 27 </td> 28 <td> 29 CSS設計、HubSpot CMS 30 </td> 31 </tr> 32 <tr> 33 <td> 34 本名 花子 35 </td> 36 <td> 37 株式会社ムショク/株式会社NEET_STAR_Corp 38 </td> 39 <td> 40 テクニカルディレクター/シニアエンジニア 41 </td> 42 <td> 43 CSS設計、HubSpot CMS 44 </td> 45 </tr> 46 <tr> 47 <td> 48 Taro Honmyo 49 </td> 50 <td> 51 株式会社ムショク/株式会社NEET_STAR_Corp 52 </td> 53 <td> 54 テクニカルディレクター/シニアエンジニア 55 </td> 56 <td> 57 CSS設計、HubSpot CMS 58 </td> 59 </tr> 60 </tbody> 61 </table> 62</div> 63<!-- /.bl_vertTable -->
css
1.bl_vertTable { 2 border: 1px solid #ddd; 3} 4.bl_vertTable table { 5 width: 100%; 6 text-align: center; 7 table-layout: fixed; 8} 9/*テーブル 要素 ラッパー*/ 10.bl_vertTable thead tr { 11 background-color: #efefef; 12} 13/*テーブル 見出し 要素*/ 14.bl_vertTable th { 15 padding: 15px; 16 border-right: 1px solid #ddd; 17 border-bottom: 1px solid #ddd; 18 font-weight: bold; 19 vertical-align: middle; 20} 21/*テーブル 中身 要素*/ 22.bl_vertTable td { 23 padding: 15px; 24 border-right: 1px solid #ddd; 25 border-bottom: 1px solid #ddd; 26 vertical-align: middle; 27} 28.bl_vertTable th:last-child, 29.bl_vertTable td:last-child { 30 border-right-width: 0; 31} 32.bl_vertTable tbody tr:last-child td { 33 border-bottom-width: 0; 34} 35/*メディアクエリ適用時 border-widthを消す理由*/ 36@media screen and (max-width:768px) { 37 .bl_vertTable { 38 border-right-width: 0; 39 overflow-x:auto; 40 } 41 .bl_vertTable table { 42 width: auto; 43 min-width: 100%; 44 } 45 .bl_vertTable th, 46 .bl_vertTable td { 47 white-space: nowrap; 48 } 49 .bl_vertTable th:last-child, 50 .bl_vertTable td:last-child { 51 border-right-width: 1px; 52 } 53}
回答1件
あなたの回答
tips
プレビュー