CSS初心者です。
以下のCSSとHTMLにて背景色有りの表を作りました。
CSS
CSS
1.company-table { 2 padding-top: 10px; 3 padding-left: 10px; 4 width: 100%; 5 height: auto; 6} 7.company-table dt { 8 width: 20%; 9 min-width: 6em; 10 background-color: #add8e6; 11 padding-top: 10px; 12 padding-bottom: 10px; 13 padding-left: 10px; 14 float: left; 15 clear: both; 16 font-size: 90%; 17 line-height: 1.6; 18} 19.company-table dd { 20 background-color: #dcdcdc; 21 padding-top: 10px; 22 padding-left: 10px; 23 padding-right: 4px; 24 padding-bottom: 10px; 25 font-size: 90%; 26 line-height: 1.6; 27 text-indent: 10px; 28 29} 30
html
1<section class="company"> 2 <div class="container"> 3 <div class="row"> 4 <div class="col-sm-12"> 5 <h2 class="company-heading">会社情報</h2> 6 </div> 7 <div class="row"> 8 <div class="col-sm-12"> 9 10 <div class="company-table"> 11 <dl> 12 <dt>会社名</dt> 13 <dd>テスト株式会社</dd> 14 <dt>業種</dt> 15 <dd>製造業</dd> 16 <dt>沿革</dt> 17 <dd> 18 <ul> 19 <li>H23 創業</li> 20 <li>H24 設備導入</li> 21 <li>H26 社屋引っ越し</li> 22 </ul> 23 </dd> 24 </dl> 25 </div> 26 </div> 27 </div> 28 29 </div> 30</section> 31
ところが、上記ですとddが複数行の際にレイアウトが崩れました。
その画像が以下です↓
なので以下などを参考にしてCSSを修正しました。
定義リスト[dl]のdt/ddを横並びにする方法
CSS
1.company-table { 2 padding-top: 10px; 3 padding-left: 10px; 4 width: 100%; 5 height: auto; 6} 7.company-table dt { 8 width: 20%; 9 min-width: 6em; 10 background-color: #add8e6; 11 padding-top: 10px; 12 padding-bottom: 10px; 13 padding-left: 10px; 14 float: left; 15 /*clear: both;*/ /*これをコメントアウト*/ 16 font-size: 90%; 17 line-height: 1.6; 18 19 20clear: left; /*これを追加*/ 21 22 23} 24.company-table dd { 25 background-color: #dcdcdc; 26 padding-top: 10px; 27 padding-left: 10px; 28 padding-right: 4px; 29 padding-bottom: 10px; 30 font-size: 90%; 31 line-height: 1.6; 32 text-indent: 10px; 33 34 float: left; /*これを追加*/ 35 36}
セルのズレは解消されましたが、
今度は、背景色が変になりました・・・orz
背景色を元の通りに保ったまま、複数行にも耐えられる表を作るには
どこを修正すべきでしょうか?
どうか宜しくお願い致します。
IE10以下に対応する必要はありますか?
回答2件
あなたの回答
tips
プレビュー