回答編集履歴
2
コメントへの回答
test
CHANGED
|
@@ -75,3 +75,51 @@
|
|
|
75
75
|
詳しくは以下リンクをご覧ください
|
|
76
76
|
|
|
77
77
|
[優先順位](http://creator.aainc.co.jp/archives/4947)
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
以下、コメントの下記に対しての追記
|
|
82
|
+
|
|
83
|
+
> width:140pxの指定で固定幅になりました。ただ、classで指定しmonからwedとfriはwidth: calc((100% - 140px) * 0.15) thuとsatはwidth: calc((100% - 140px) * 0.2)指定しデベロッパーツールでもその通りに適用されているのですが、いずれも可変で同じ大きさになります。thuとsatは相対的に少し大きめにしたのですが、間違いをご指摘いただけませんか。
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
困ったらMDN等のリファレンスを見るようにしましょう。
|
|
88
|
+
|
|
89
|
+
[calcのMDN](https://developer.mozilla.org/ja/docs/Web/CSS/calc)には以下とあります。
|
|
90
|
+
|
|
91
|
+
> 自動レイアウトおよび固定レイアウトのテーブルで列・列グループ・行・行グループ・セルの幅や高さに対してパーセンテージを含む数式を指定すると、 auto が指定されたものとして扱います。
|
|
92
|
+
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
この場合は以下とすることでやりたいことができるでしょう。
|
|
96
|
+
|
|
97
|
+
```css
|
|
98
|
+
|
|
99
|
+
.mon,.tue,.wed,.fri {
|
|
100
|
+
|
|
101
|
+
width: 15%;
|
|
102
|
+
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
.thu, .sat {
|
|
108
|
+
|
|
109
|
+
width: 20%;
|
|
110
|
+
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
なぜ、親要素の`100%`から`140px`を引かなくてよいのかという疑問があるかもしれませんが、そこは私は憶測でしか回答できません。すみません。(調べましたが、正確な仕様としての記述が見つかりませんでした。)
|
|
118
|
+
|
|
119
|
+
恐らく、`display:table`の仕様で子要素の絶対値を優先するような決まりがあるのだと思います。
|
|
120
|
+
|
|
121
|
+
(親要素に`display:block`を指定すると相対値が優先される)
|
|
122
|
+
|
|
123
|
+
まあ、この辺は私は感覚で指定してしまっていてこういうもんなんだと覚えてしまってますが。
|
|
124
|
+
|
|
125
|
+
気になるのであれば、新しく質問してもよいかもしれませんね。
|
1
分かりやすいように加筆
test
CHANGED
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
|
|
27
27
|
|
|
28
28
|
|
|
29
|
-
上とあり
|
|
29
|
+
上とありますが、可変かつ他の行より大きくしたい場合は、`%`で指定するのが正しいです、
|
|
30
30
|
|
|
31
31
|
`px`で指定をすると、他の行が指定の幅以下の場合は大きく見えるかもしれませんが、それ以上になった際に逆に小さく見えてしまいます。
|
|
32
32
|
|
|
@@ -41,3 +41,37 @@
|
|
|
41
41
|
今回、`width:100%`を指定したため、要素は画面の幅(厳密にいうと`table`の親要素の`div`要素)いっぱいに広がります。しかし、上記の全ての`table-cell`で絶対値`px`の指定をしている為、`table`の幅に対する要素の幅が足りなくなっています。
|
|
42
42
|
|
|
43
43
|
その為、足りない部分に無理やり幅を増やして表示され、可変に見えているのです。
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
以下追記、
|
|
48
|
+
|
|
49
|
+
また、現状の指定だと、そもそも
|
|
50
|
+
|
|
51
|
+
```css
|
|
52
|
+
|
|
53
|
+
.thu, .sat {
|
|
54
|
+
|
|
55
|
+
width: 70px;
|
|
56
|
+
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
の指定は無視されるはずです、それは、cssのセレクタに優先順位と呼ばれるものがあるからで、
|
|
62
|
+
|
|
63
|
+
```css
|
|
64
|
+
|
|
65
|
+
thead th:not(:first-child) {
|
|
66
|
+
|
|
67
|
+
width: 44px;
|
|
68
|
+
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
の指定のほうが優先順位が高く、値が上書きされている為です。
|
|
74
|
+
|
|
75
|
+
詳しくは以下リンクをご覧ください
|
|
76
|
+
|
|
77
|
+
[優先順位](http://creator.aainc.co.jp/archives/4947)
|