41136


文面を改めました。  
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のスタイルシートに指定してみても、やはり問題の列（ラベル）は拡張されてしまいました。

【ＨＴＭＬ】

[code]

    <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>
    
[/code]

【ＣＳＳ】

[code]

    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;
    }
    
[/code]


CC BY-SA 3.0
2018-01-14T06:06:52.583
40950
2018-01-22T13:37:26.523
2018-01-22T07:40:15.587
25696
25696
question
html css
CSS のwidth定義（%指定）について、親要素・兄弟要素との関係をおさらいしたい


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

  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` プロパティで制御します。


CC BY-SA 3.0
2018-01-19T05:37:45.613
41082
2018-01-19T05:37:45.613
3475
40950
answer


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

例:

[code]

    table {
        table-layout: fixed;
        width: 100%;
        ...
    }
    
[/code]


CC BY-SA 3.0
2018-01-22T13:37:26.523
41136
2018-01-22T13:37:26.523
3475
40950
answer