質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

3回答

893閲覧

HTML 結合について

limitman80

総合スコア40

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/06/10 03:03

htmlの結合でcolspanを指定しているのですが、なぜか結合できません。

html

1 <table id="stable" class="table table-striped table-bordered"> 2 <thead> 3 <tr class=""> 4 <th class="thc1">選択</th> 5 <th class="thc2">部門</th> 6 <th class="thc3" colspan="2">役職</th> 7 <th class="thc4">氏名</th> 8 <th class="thc5">性別</th> 9 <th class="thc6">年齢</th> 10 </tr> 11 </thead> 12 <tbody> 13 <tr class="listData"> 14 <td class="tdc1 checkboxParent"></td> 15 <td class="tdc2 textData"></td> 16 <td class="tdc3 textData"></td> 17 <td class="tdc4 textData"></td> 18 <td class="tdc5 textData"></td> 19 <td class="tdc6 textData"></td> 20 <td class="tdc7 textData"></td> 21 </tr> 22 </tbody> 23 </table> 24

CSS

1main #stable td{ 2 font-size: 1.4rem; 3 height: 2.3em; 4 overflow-wrap : break-word; 5} 6main #stable thead{ 7 width: 100%; 8 display: block; 9} 10main #stable tbody{ 11 width: 100%; 12 height: 28.56em; 13 display: block; 14 overflow-y: scroll; 15 word-wrap: break-word; 16} 17.thc1, .tdc1 { 18 min-width: 4em; 19 max-width: 4em; 20}

tbodyの部分は実際には100行ほど存在しており、jsで各項目に対してデータをセットしています。

javascript

1 case "PartSName": //部門 2 $('#stable tr.listData:eq(' + rowNum + ') td:eq(1)').text(json[i][key]); 3 break; 4 case "PositionCode": //役職コード 5 $('#stable tr.listData:eq(' + rowNum + ') td:eq(2)').text(json[i][key]); 6 break; 7 case "PositionSName": //役職 8 $('#stable tr.listData:eq(' + rowNum + ') td:eq(3)').text(json[i][key]); 9 break; 10 case "MemberName": //氏名 11 $('#stable tr.listData:eq(' + rowNum + ') td:eq(4)').text(json[i][key]); 12 break; 13 case "Sex": //性別 14 $('#stable tr.listData:eq(' + rowNum + ') td:eq(5)').text(json[i][key]); 15 break; 16 case "Age": //年齢 17 $('#stable tr.listData:eq(' + rowNum + ') td:eq(6)').text(json[i][key]); 18 break; 19

CSSの設定のどれかが影響しているのでしょうか?
わかる方がいればアドバイスをいただけると助かります。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/06/10 03:28

画面キャプチャなど現象が分かる情報もご提示ください。
m.ts10806

2019/06/10 03:38

あと、半端な状態のJavaScriptのコードを提示されても誰も再現確認できないので せめて再現確認可能な最小構成の「動くコード」をご提示ください。
x_x

2019/06/10 04:22

CSS に全角空白が使われているので修正願います。
guest

回答3

0

問題なく結合されている様に見えます。

イメージ説明

投稿2019/06/10 04:28

foobar810

総合スコア217

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

普通にヘッダ部分のthが結合されています

投稿2019/06/10 03:21

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

display を変更しているから幅を指定しないとだめでしょうね。
ヘッダ固定は過去にたくさんの質問があるので参考にしてください。
https://teratail.com/questions/160851
https://teratail.com/questions/150020

投稿2019/06/10 04:24

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問