質問編集履歴

2

html, cssコードの追加

2019/04/12 12:36

投稿

kazoogon
kazoogon

スコア281

test CHANGED
File without changes
test CHANGED
@@ -61,3 +61,123 @@
61
61
  上記コードに変更後は画像のようになり、chromeでもfirefoxでもborderが効かない
62
62
 
63
63
  ![イメージ説明](e0f5e59790621adb40936b1d30937bc3.png)
64
+
65
+
66
+
67
+ コードの追記
68
+
69
+ ---
70
+
71
+ html
72
+
73
+ ```
74
+
75
+ <table>
76
+
77
+ <thead>
78
+
79
+ <tr>
80
+
81
+ <th>本文</th>
82
+
83
+ <th>リミット</th>
84
+
85
+ <th>その他</th>
86
+
87
+ </tr>
88
+
89
+ </thead>
90
+
91
+
92
+
93
+ <tbody>
94
+
95
+ <tr>
96
+
97
+ <td>本文内容</td>
98
+
99
+ <td>リミット内容</td>
100
+
101
+ <td>その他内容</td>
102
+
103
+ </tr>
104
+
105
+ </tbody>
106
+
107
+ </table>
108
+
109
+ ```
110
+
111
+ css
112
+
113
+ ```
114
+
115
+ table {
116
+
117
+ box-sizing: border-box;
118
+
119
+ width: 100%;
120
+
121
+ line-height: 0;
122
+
123
+ border-bottom: none;
124
+
125
+ border-collapse: collapse;
126
+
127
+ border-spacing: 0;
128
+
129
+
130
+
131
+ > thead {
132
+
133
+ > tr {
134
+
135
+ height: 30px;
136
+
137
+ background-color: #f1f1f1;
138
+
139
+
140
+
141
+ > th {
142
+
143
+ line-height: 14px;
144
+
145
+ padding: 8px 7px 8px 4px;
146
+
147
+ text-align: left;
148
+
149
+ text-decoration: none;
150
+
151
+
152
+
153
+ &:first-child {
154
+
155
+ padding-left: 8px;
156
+
157
+ -webkit-border-top-left-radius: 15px;
158
+
159
+ -moz-border-radius-topleft: 15px;
160
+
161
+ border-radius-topleft: 15px;
162
+
163
+ }
164
+
165
+
166
+
167
+ &:last-child {
168
+
169
+ -webkit-border-top-right-radius: 15px;
170
+
171
+ -moz-border-radius-topright: 15px;
172
+
173
+ border-radius-topright: 15px;
174
+
175
+ }
176
+
177
+ }
178
+
179
+ }
180
+
181
+ }
182
+
183
+ ```

1

追記

2019/04/12 12:36

投稿

kazoogon
kazoogon

スコア281

test CHANGED
File without changes
test CHANGED
@@ -33,3 +33,31 @@
33
33
  ---
34
34
 
35
35
  IE11,10 ・ Edge ・ Operaではborder-radiusは効いています
36
+
37
+
38
+
39
+ 追記
40
+
41
+ ---
42
+
43
+ ```
44
+
45
+ -webkit-border-top-left-radius: 15px;
46
+
47
+ -moz-border-radius-topleft: 15px;
48
+
49
+ border-radius-topleft: 15px;
50
+
51
+
52
+
53
+ -webkit-border-top-right-radius: 15px;
54
+
55
+ -moz-border-radius-topright: 15px;
56
+
57
+ border-radius-topright: 15px;
58
+
59
+ ```
60
+
61
+ 上記コードに変更後は画像のようになり、chromeでもfirefoxでもborderが効かない
62
+
63
+ ![イメージ説明](e0f5e59790621adb40936b1d30937bc3.png)