2

文面を改めました。
td要素にlabel要素を含む列で、当該td列の幅を超える文字数が格納されると、現況は幅が自動拡張されてしまいます。(文字が見切れた表示を期待していますが)

以下現況のHTMLであり

・上から3つ目のTDが問題の列で、divで囲み、Overflowの定義を追加したものの状況は変わりません。
⇒どういった対策が適策ですか?ちなみにtableにtable-layout: fixed;を設定しても変わりなしです。overflow:auto;がtableを囲むdivに設定してある理由は、行追加(右端のボタン押下)を可能にした仕様であるため=縦スライドバーを自動で出す為のものです。
この設定をなしにしても状況変わらず列は拡張されます。

・各tdに設定した%のwidthは当方が視覚的に適当に設定したものです。
tdの子要素側にもwidthを設定している要素がありますが、これも視覚的に適当に当方が設定したものです。恥ずかしながら必要性もわからず対応しています。
『tdに%で幅を指定する場合』本来どういった方針で子要素側の幅の設定を施していく&必要性があるのでしょうか?
box-sizing:border-boxをtdのスタイルシートに指定してみても、やはり問題の列(ラベル)は拡張されてしまいました。

【HTML】

<div class="appLines">
    <table>
        <tr class="appLineDummy">
            <td style="width: 8.3%;"><button class="cdsrch" type="button"><img src="img/検索.png"></button><input type="text" name="cd[]" style="width: 62%; ime-mode: inactive;" /></td>
            <td style="width: 29%;" class="extd"><label name="name" style="width: 100%;"></label><input type="hidden" name="name_inp[]" /></td>
            <td style="width: 10%;" class="extd"><div style="overflow: hidden"><label name="capa"></label></div><input type="hidden" name="capa_inp[]" /></td>
            <td style="width: 8%;" class="extd"><label name="scond"></label><input type="hidden" name="scond_inp[]" /></td>
            <td style="width: 14%;"><button class="lotsrch" type="button"><img src="img/検索.png"></button><input type="text" name="lot[]" style="width: 100%; ime-mode: inactive;" readonly /></td>
            <td style="width: 5%;"><input type="text" name="amount[]" style="width: 82%; ime-mode: inactive;" /></td>
            <td style="width: 7%;" class="extd_kin"><label name="unitp"></label><input type="hidden" name="unitp_inp[]" /></td>
            <td style="width: 11%;" class="extd_kin"><label name="totalp"></label><input type="hidden" name="totalp_inp[]" /></td>
            <td style="width: 2%;" class="extd"><label class="errmark"></label></td>
            <td style="width: 1%;"><button class="rowins" type="button">+</button></td>
            <td style="width: 1%;"><button class="rowdel" type="button">-</button></td>
        </tr>
    </table>
</div>

【CSS】

body {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    background-color: #f5f3eb;
    font-family: meiryo ,sans-serif;
}

table {
    border-collapse: collapse;
}

button {
    height: 1.6em;
    vertical-align: bottom;
    padding: 0;
}
button:hover {
    cursor: pointer ;
    color: #f00 ;
}

.tcdsrch, .scdsrch, .cdsrch, .lotsrch {
    background: none;
}


.wrapper {
    margin: 0 auto 0 auto;
    width: 970px;
}

.appLines {
    overflow:auto;
    height: 15.44em;
}


/* 列内容は基本 真ん中に内容を表示したい */
td {
    text-align: center;
    white-space: nowrap;

    border-top-color: #CCCCCC;
    border-top-style: solid;
    border-left-color: #CCCCCC;
    border-left-style: solid;
    border-right-color: #CCCCCC;
    border-right-style: solid;
    border-bottom-color: #CCCCCC;
    border-bottom-style: solid;

    line-height: 1em;
    padding: 0;
}

/* 例外の列は左詰めで内容を表示し、背景は白にしたい */
td.extd {
    text-align: left;
    background-color: #FFFFFF;
    color: #0000FF;
}
2
  • marginと同じようにpaddingも0が指定されていますか? Commented 2018年1月14日 7:56
  • @伽語蓮弥 指定していないです。
    – saya24
    Commented 2018年1月14日 7:58

2 件の回答 2

3

テーブルセル幅をパーセント指定したい場合は、table-layout: fixed の指定とともに、width を指定する必要があります。そうしないと、セルの幅を計算するための基準となる包含ブロックの幅が定まりません。

例:

table {
    table-layout: fixed;
    width: 100%;
    ...
}
1
  • 途中で質問内容が変更してしまい申し訳ありませんでした。 自分の中でスタイルが子要素にまで継承されるケースとされないケースをしっかり意識し、伽語蓮弥さんがいうように paddingの性質をよく理解していれば よりスムーズに解決を導くことができたと思います。 途中で問合わせ内容が変わってしまったのはこのためでした。重ねてお詫び申し上げます。 上記認識の上、table-layout: fixed;とwidth: 100%;をテーブルに対し設定を施したことで 納得のいくレイアウトを導けたのだと思います。 ご支援をありがとうございました。
    – saya24
    Commented 2018年1月23日 5:14
2

問題を再現できる完全なコードを示すとより回答しやすいと思います。

  1. input要素のマージンだと思われます。マージンは親要素の値を継承しません。
  2. 完全なスタイルがわからないので推測ですが、box-sizing プロパティはデフォルトで content-box なため、width プロパティの値はボーダーとパディングを除いた幅を指定することになります。そのため、td と input の width が同じなら、マージンとボーダーとパディングのぶんだけはみ出します。
    box-sizing: border-box を指定すると、width プロパティはボーダーの外側の幅を指定するようになります。
  3. input要素のマージンを0、box-sizing: border-box を指定して td と input が同じ width になるよう指定します。
  4. tdの幅が決まっている場合は、labelの表示がはみ出します。
    overflow プロパティや text-overflow プロパティで制御します。
4
  • ご教示をありがとうございます。お礼のご挨拶が遅れて申し訳ありませんでした。 現在lableを収めたtd幅が勝手に拡張されてしまう事態に悩んでいます。 4の回答を頂きましたので 早速当該td中のlabelを、divで囲みoverflowプロパティ:hiddenの対策で 回避しようとしました。 しかし状況変わらずlabel幅・td幅が拡張されてしまっております。 tdのwidthを親要素由来の%で指定する方式では、列幅の固定は効かないものなのでしょうか? (ちなみに問題のlabel要素のwidth指定を、親要素の範囲内で!という意味合いから 100%を指定して検証してみたところ、 こちらの手立ても効果なし。勝手にラベルの列幅が拡張されてしまう状況に変わりありませんでした)
    – saya24
    Commented 2018年1月21日 18:22
  • 問題が再現する完全なコードを提示してください。
    – int32_t
    Commented 2018年1月21日 23:20
  • 本文に現況HTML/CSSを書きなおしました、ご確認頂ければ幸いです。
    – saya24
    Commented 2018年1月22日 6:58
  • 元の質問とは別の質問になってしまって、この回答は意味のないものになってしまいました…
    – int32_t
    Commented 2018年1月22日 13:26

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。