【CSS】ddが複数行になる場合に、背景色も考慮しつつ整えたい

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

背景色を元の通りに保ったまま、複数行にも耐えられる表を作るには
どこを修正すべきでしょうか？

どうか宜しくお願い致します。

Lhankor_Mhy

2016/06/25 02:11

IE10以下に対応する必要はありますか？

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

回答2件

ベストアンサー

本当はflex-boxを使うのがよさそうなんですが、IE対応を考えてinline-blockで書いてみました。

CSS
1.company-table {
2    padding-top: 10px;
3    padding-left: 10px;
4    width: 100%;
5    height: auto;
6    box-sizing: border-box; /*これを追加*/
7}
8.company-table dl { /*これを追加*/
9    background-color: #add8e6;
10    width: 100%;
11    height: auto;
12}
13.company-table dt {
14    width: 20%;
15    min-width: 6em;
16    background-color: #add8e6;
17    padding-top: 10px;
18    padding-bottom: 10px;
19    padding-left: 10px;
20    float: left;
21    clear: both;
22    font-size: 90%;
23    line-height: 1.6;
24    box-sizing: border-box; /*これを追加*/
25}
26.company-table dd {
27    background-color: #dcdcdc;
28    padding-top: 10px;
29    padding-left: 10px;
30    padding-right: 4px;
31    padding-bottom: 10px;
32    font-size: 90%;
33    line-height: 1.6;
34    text-indent: 10px;
35    width:80%; /*これを追加*/
36    display:inline-block; /*これを追加*/
37    margin:0; /*これを追加*/
38    box-sizing: border-box; /*これを追加*/
39}