teratail
回答率
85.48%
質問するログイン新規登録

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

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

新規登録して質問してみよう
ただいま回答率
85.48%
トップHTMLに関する質問
HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1884閲覧

HTMLのテーブルの横の長さが変わってしまう。

TaruOrder
TaruOrder

総合スコア76

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2015/11/02 07:40

0

0

HTMLの<td>を"css"の方で、"width:105px" で設定するよう書いているのですが
調べてみると 106pxになっていたり105pxになっていたりとしてずれてしまいます。
このようなときはどう対処すれば良いのでしょうか教えてください。

---css--
.table1{
border-collapse:collapse;
text-align:center;
line-height:1.5;
}

.tr1{
border:1px solid;
width:105px;
}

.td1 {
border:1px solid;
width:105px;
}

#sHead {
position:absolute;
background-color:aquamarine;
width:424px;

}

#sHead2{
position:relative;
background-color:aquamarine;
}

interval {
height:auto;
width:100%;
}

--HTML--

<table class="table1"> <thead id="sHead"> <tr class="tr1"> <td class="td1" id="C1">Column1</td> <td class="td1" id="C2">Column2</td> <td class="td1" id="C3">Column3</td> <td class="td1" id="C4">Column4</td> 
                </tr>
            </thead>
            <tbody>
                <tr class="tr1">
                    <td class="td1">NULL</td>
                    <td class="td1">NULL</td>
                    <td class="td1">NULL</td>
                    <td class="td1">NULL</td>
                </tr>
                <tr class="tr1">
                    <td class="td1">Data1</td>
                    <td class="td1">Data2</td>
                    <td class="td1">Data3</td>
                    <td class="td1">Data4</td>
                </tr>
                <tr class="tr1">
                    <td class="td1">Data1</td>
                    <td class="td1">Data2</td>
                    <td class="td1">Data3</td>
                    <td class="td1">Data4</td>
                </tr>
                <tr class="tr1">
                    <td class="td1">Data1</td>
                    <td class="td1">Data2</td>
                    <td class="td1">Data3</td>
                    <td class="td1">Data4</td>
                </tr>
                <tr class="tr1">
                    <td class="td1">Data1</td>
                    <td class="td1">Data2</td>
                    <td class="td1">Data3</td>
                    <td class="td1">Data4</td>
                </tr>
                <tr class="tr1">
                    <td class="td1">Data1</td>
                    <td class="td1">Data2</td>
                    <td class="td1">Data3</td>
                    <td class="td1">Data4</td>
                </tr>
                <tr class="tr1">
                    <td class="td1">Data1</td>
                    <td class="td1">Data2</td>
                    <td class="td1">Data3</td>
                    <td class="td1">Data4</td>
                </tr>
                <tr class="tr1">
                    <td class="td1">Data1</td>
                    <td class="td1">Data2</td>
                    <td class="td1">Data3</td>
                    <td class="td1">Data4</td>
                </tr>
                <tr class="tr1">
                    <td class="td1">Data1</td>
                    <td class="td1">Data2</td>
                    <td class="td1">Data3</td>
                    <td class="td1">Data4</td>
                </tr>
                <tr class="tr1">
                    <td class="td1">Data1</td>
                    <td class="td1">Data2</td>
                    <td class="td1">Data3</td>
                    <td class="td1">Data4</td>
                </tr>
                <tr class="tr1">
                    <td class="td1">Data1</td>
                    <td class="td1">Data2</td>
                    <td class="td1">Data3</td>
                    <td class="td1">Data4</td>
                </tr>
                <tr class="tr1">
                    <td class="td1">Data1</td>
                    <td class="td1">Data2</td>
                    <td class="td1">Data3</td>
                    <td class="td1">Data4</td>
                </tr>
                <tr class="tr1">
                    <td class="td1">Data1</td>
                    <td class="td1">Data2</td>
                    <td class="td1">Data3</td>
                    <td class="td1">Data4</td>
                </tr>
                <tr class="tr1">
                    <td class="td1">Data1</td>
                    <td class="td1">Data2</td>
                    <td class="td1">Data3</td>
                    <td class="td1">Data4</td>
                </tr>
                <tr class="tr1">
                    <td class="td1">Data1</td>
                    <td class="td1">Data2</td>
                    <td class="td1">Data3</td>
                    <td class="td1">Data4</td>
                </tr>
                <tr class="tr1">
                    <td class="td1">Data1</td>
                    <td class="td1">Data2</td>
                    <td class="td1">Data3</td>
                    <td class="td1">Data4</td>
                </tr>
                <tr class="tr1">
                    <td class="td1">Data1</td>
                    <td class="td1">Data2</td>
                    <td class="td1">Data3</td>
                    <td class="td1">Data4</td>
                </tr>
                <tr class="tr1">
                    <td class="td1">Data1</td>
                    <td class="td1">Data2</td>
                    <td class="td1">Data3</td>
                    <td class="td1">Data4</td>
                </tr>
                <tr class="tr1">
                    <td class="td1">Data1</td>
                    <td class="td1">Data2</td>
                    <td class="td1">Data3</td>
                    <td class="td1">Data4</td>
                </tr>
                <tr class="tr1">
                    <td class="td1">Data1</td>
                    <td class="td1">Data2</td>
                    <td class="td1">Data3</td>
                    <td class="td1">Data4</td>
                </tr>
                <tr class="tr1">
                    <td class="td1">Data1</td>
                    <td class="td1">Data2</td>
                    <td class="td1">Data3</td>
                    <td class="td1">Data4</td>
                </tr>

            </tbody>
        </table>

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

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

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

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

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

guest

回答2件

0

やはりなぜか1セル目だけ-1pxされます

theadの部分ですね。先ほどの私の回答では、thead部分は検証しておらず、
tbodyのみの検証でした。

上記について改めて確認したところ、こちらでは-1pxではなく、
-2px、もしくは-3pxの状態で確認されました。

#sHead に position:absolute していますが、これが不要かと。
tbody の 1行目のセル（tr）が、theadに重なっており、かつwidthが意図しないサイズになっています。

イメージ説明

#sHead に position:absolute を削除したところ、下記スクショの状態が確認されました。

イメージ説明

投稿2015/11/02 11:04

編集2015/11/02 11:05
ikki57
ikki57

総合スコア290

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

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

TaruOrder
TaruOrder

2015/11/04 02:54

解答ありがとうございます！ できました！！か
TaruOrder
TaruOrder

2015/11/04 03:48

あと一つ質問なのですが... サイトを縮小させ過ぎると、theadだけ長さが変わってしまいます... theadは、ブラウザのスクロールに合わせてtableの上をスライドする仕組みにしています。 なので、position:absolute;を指定してjQueryでtop。leftを指定してスライドしてます。 なにか、よい方法はあるでしょうか...
guest

0

ベストアンサー

  • 設定したborderの太さが、セルのwidthに加算されている。
  • デフォルトのpaddingが、セルのwidthに加算されている。

このため、cssで設定した 105px + 1px * 2（borderの幅の2px） + 2px（デフォルトの余白） = 109px
になっている、と思われます。

下記、テスト結果です。

テーブルのセル（td）に、borderがあるセルと、無いセルを比較

イメージ説明

  • borderがあるセル
    • 109px

イメージ説明

  • borderが無いセル
    • 107px

テーブルのセル（td）に、padding 0 を設定する

イメージ説明

  • borderがあるセル
    • 107px

イメージ説明

  • borderが無いセル
    • 105px // --> 意図した通りのサイズ

よって

イメージ説明

テーブルのセル（td）に

css
1padding: 0;
2box-sizing: border-box;

を設定すればよいかと思います。

また、下記ページにて、各テーブルのテストが行われているのでご参考までに。
http://www.d-spica.com/try/table-width.html

投稿2015/11/02 09:46

ikki57
ikki57

総合スコア290

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

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

TaruOrder
TaruOrder

2015/11/02 10:10

解答ありがとうございます。 tdに padding: 0; box-sizing: border-box;を追加したのですが、やはりなぜか1セル目だけ-1pxされます....
ikki57
ikki57

2015/11/02 10:58

画像の添付ができないので、新しい回答で返信します
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問

トップHTMLに関する質問

HTMLのテーブルの横の長さが変わってしまう。