tableがうまく整えられないのですが、どうしたらよろしいでしょうか。

上記のイメージの形を目指して、
下記のコードを書いてみたのですが、うまくいきません。
特に下２行のwidthがイメージのように配分できません。
どのように記述したらよろしいでしょうか。

お手数おかけしますが、よろしくお願いします。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4   <meta charset="UTF-8">
5   <title>Document</title>
6   <style media="screen" type="text/css">
7.sougei-table{
8  height: 200px;
9  width: 340px;
10  border: solid 1px ;
11  border-collapse: collapse;
12  table-layout: fixed;
13  box-sizing: border-box;
14}
15.sougei-country{
16  background-color: #009587;
17  color: #fff;
18  border: solid 1px #090909;
19  width: 170px;
20  box-sizing: border-box;
21}
22.sougei-city{
23  color: #009587;
24  border: solid 1px #090909;
25  width: 170px;
26  box-sizing: border-box;
27}
28.sougei-image{
29  float:left;
30}
31.sougei-description{
32   margin-left:100px;
33}
34.sougei-description ul{
35  list-style-position:inside;
36  list-style:circle;
37}
38.sougei-text td{
39  text-align: center;
40}
41.sougei-kukan{
42   background-color:#aaaaaa;
43   color:#fff;
44   border: solid 1px #090909;
45   box-sizing: border-box;
46}
47.kukan-part1{
48    width: 100px;
49}
50.kukan-part2{
51    width: 120px;
52}
53.sougei-price1{
54   font-size: 14px;
55   border: solid 1px #090909;
56   box-sizing: border-box;
57}
58.sougei-price2{
59   color:#BA3823;
60   border: solid 1px #090909;
61   box-sizing: border-box;
62}
63   </style>
64
65<body>
66  <table class="sougei-table">
67  <tbody>
68  <tr>
69  <td class="sougei-country" colspan="7" >テスト</td>
70  <td class="sougei-city" colspan="7" >テスト</td>
71  </tr>
72  <tr>
73  <td colspan="14" style="border: solid 1px #090909;">
74  <div class="sougei-image">
75    <img src="" alt="仮" width="100px" height="70px" />
76  </div>
77  <div class="sougei-description">
78    <ul>
79    <li>区間</li>
80    <li>ガイド</li>
81    </ul>
82  </div>
83  </td>
84  </tr>
85  <tr class="sougei-text">
86  <td colspan="4" class="sougei-kukan kukan-part1">区 間</td>
87  <td colspan="6" class="sougei-kukan kukan-part2">テスト 〜 テスト</td>
88  <td colspan="6" class="sougei-kukan kukan-part2">テスト 〜 テスト</td>
89  </tr>
90  <tr class="sougei-text">
91  <td class="sougei-price1 kukan-part1" colspan="4">送迎料金</td>
92  <td class="sougei-price2 kukan-part2" colspan="6">￥00,600 〜 </td>
93  <td class="sougei-price2 kukan-part2" colspan="6">￥0,600 〜 </td>
94  </tr>
95  </tbody>
96  </table>
97
98</body>
99</html>
100

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

回答3件

ベストアンサー

これでどうでしょう？

HTML
1<table class="sougei-table">
2  <tbody>
3    <tr>
4      <td class="sougei-country" colspan="5">テスト</td>
5      <td class="sougei-city" colspan="5">テスト</td>
6    </tr>
7    <tr>
8      <td colspan="10" style="border: solid 1px #090909;">
9        <div class="sougei-image">
10          <img src="" alt="仮" width="100px" height="70px" />
11        </div>
12        <div class="sougei-description">
13          <ul>
14            <li>区間</li>
15            <li>ガイド</li>
16          </ul>
17        </div>
18      </td>
19    </tr>
20    <tr class="sougei-text">
21      <td colspan="2" class="sougei-kukan kukan-part1">区 間</td>
22      <td colspan="4" class="sougei-kukan kukan-part2">テスト 〜 テスト</td>
23      <td colspan="4" class="sougei-kukan kukan-part2">テスト 〜 テスト</td>
24    </tr>
25    <tr class="sougei-text">
26      <td class="sougei-price1 kukan-part1" colspan="2">送迎料金</td>
27      <td class="sougei-price2 kukan-part2" colspan="4">￥00,600 〜 </td>
28      <td class="sougei-price2 kukan-part2" colspan="4">￥0,600 〜 </td>
29    </tr>
30  </tbody>
31</table>

投稿2017/05/08 13:30

root_jp

総合スコア4666

KyutoYosihama

2017/05/09 01:33

返答ありがとうございます。 imageの形にだいぶ近づきました。自分のcolspanの計算が合ってなかったみたいです。

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

colspanの足し算が合っていないからっていうオチ？

追記：
とはいえ、テーブルなので、テキスト量によって、どうしてもサイズを守ってくれないので、
最悪、テーブルを使わないってことも考えた方が良いかもしれません。

HTML
1<div class="box">
2  <h3><strong>てすと</strong><em>テスト</em></h3>
3  <div>
4    <dl>
5      <dt>画像</dt>
6      <dd>
7        <ul><li><span>区間</span>　テスト</li><li>ガイド　テスト</li></ul>
8      </dd>
9    </dl>
10  <div>
11  <dl>
12    <dt><span>区間</span></dt>
13    <dd>テスト～テスト</dd>
14    <dd>テスト～テスト</dd>
15  </dl>
16  <dl>
17    <dt><span>料金</span></dt>
18    <dd>￥00,000～</dd>
19    <dd>￥0,000～</dd>
20  </dl>
21</div>