teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

5

更新

2020/07/12 02:17

投稿

LBciel.
LBciel.

スコア18

title CHANGED
File without changes
body CHANGED
@@ -36,6 +36,21 @@
36
36
  .t1-1, .t2-1 {max-width: 5%;}
37
37
  .t1-2, .t2-2 {max-width: 45%;}
38
38
  ```
39
+ **タブのコード**
40
+ ```html
41
+ <div class="tab_wrap">
42
+ <div class="tab_area">
43
+ <label class="tab_label active" for="tab1">1大学</label>
44
+ <label class="tab_label" for="tab2">2大学</label>
45
+ <label class="tab_label" for="tab3">3大学</label>
46
+ </div>
47
+ <div class="panel_area">
48
+ <div id="panel1" class="tab_panel active">
49
+ <table class="t1">
50
+ <tr><th class="t1-1">3年生</th><th class="t1-2">イベント</th></tr>
51
+ <tr><td class="t1-1">4月1週</td><td class="t1-2">新学期開始</td></tr>
52
+ ```
53
+
39
54
  ![イメージ説明](2ebd8e357d8a2c09771f4067f960e744.jpeg)
40
55
 
41
56
  タブが無ければ解決策

4

更新

2020/07/12 02:17

投稿

LBciel.
LBciel.

スコア18

title CHANGED
File without changes
body CHANGED
@@ -50,7 +50,7 @@
50
50
  他のサイトで教えて頂きました。
51
51
  bodyの中にmainを追加してこちらのcssで希望通りの構成になりました。
52
52
 
53
- **注**:こちらには記載していませんがタブがある場合は同じ結果にならない様でしたので、いろいろ試してみたいと思います。わからない場合はまた更新すると思います。
53
+ **注**:こちらには記載していませんが作成しているタブ有りの状態で同じ結果になりませんでしたので、いろいろ試してみたいと思います。わからない場合はまた更新すると思います。
54
54
 
55
55
  環境
56
56
  ---

3

更新

2020/07/12 02:02

投稿

LBciel.
LBciel.

スコア18

title CHANGED
File without changes
body CHANGED
@@ -37,6 +37,21 @@
37
37
  .t1-2, .t2-2 {max-width: 45%;}
38
38
  ```
39
39
  ![イメージ説明](2ebd8e357d8a2c09771f4067f960e744.jpeg)
40
+
41
+ タブが無ければ解決策
42
+ ---
43
+ ```css
44
+ main{display:flex;}
45
+ table {border-collapse: collapse; flex:1;}
46
+ th, td {border: solid; padding: 0.5em;}
47
+ .t1-1, .t2-1 {width: 5%;}
48
+ .t1-2, .t2-2 {width: 45%;}
49
+ ```
50
+ 他のサイトで教えて頂きました。
51
+ bodyの中にmainを追加してこちらのcssで希望通りの構成になりました。
52
+
53
+ **注**:こちらには記載していませんがタブがある場合は同じ結果にならない様でしたので、いろいろ試してみたいと思います。わからない場合はまた更新すると思います。
54
+
40
55
  環境
41
56
  ---
42
57
  windows10

2

更新

2020/07/12 02:00

投稿

LBciel.
LBciel.

スコア18

title CHANGED
@@ -1,1 +1,1 @@
1
- テーブルのwidth設定
1
+ HTML テーブルのwidth設定
body CHANGED
File without changes

1

画像修正

2020/07/12 00:33

投稿

LBciel.
LBciel.

スコア18

title CHANGED
File without changes
body CHANGED
@@ -36,7 +36,7 @@
36
36
  .t1-1, .t2-1 {max-width: 5%;}
37
37
  .t1-2, .t2-2 {max-width: 45%;}
38
38
  ```
39
- ![イメージ説明](1b59c674fc66b955bdaf3b4772fd7350.jpeg)
39
+ ![イメージ説明](2ebd8e357d8a2c09771f4067f960e744.jpeg)
40
40
  環境
41
41
  ---
42
42
  windows10