3

固定サイズの列に表示したいデータの行があります。例えば：

Name     City       Number
Adam     Anaheim    714 555 5555
Bob      Barstow    760 555 5555
...      ...        ...

ただし、列のデータの1つが大きすぎて収まらない場合があります。その場合は、行全体ではなく、隣接するセルにできるだけ影響を与えないようにします。

これが私が欲しいものです：

Name     City       Number
Adam     Anaheim    714 555 5555
Bob      Barstow    760 555 5555
Constantine  Canyon 805 555 5555  # Notice how phone number is still aligned :)

これが私が望まないものです：

Name     City       Number
Adam     Anaheim    714 555 5555
Bob      Barstow    760 555 5555
Constantine  Canyon     805 555 5555  # Notice how phone number is also shifted :(

HTML / CSSでこれを行うにはどうすればよいですか（javascriptは使用しないでください）？

これは、機能しないソリューションを備えたjsbinです。ここで、遊んで自分の目で確かめることができます。

更新これは、N列の場合に受け入れられた回答の要約です。

最初のN-1列は、DIV style = "display：inline-block"内にラップする必要があります。その最小幅は、最初のN-1列の合計幅です。次に、そのDIV内で、最初のN-2列を、最小幅が最初のN-2列の合計幅である同様のdiv内にラップする必要があります。これをずっと続けてください...

きれいではありませんが、機能し、小さなNでも管理できます。

4

2 に答える 2

1

良い質問。私は通常のテーブルでそれを行う方法を見つけることができませんでした (ラッパー要素が必要なため、IE が適切に動作しないため)、以下のソリューションでは div を使用します。

これを試して：

<!DOCTYPE html>
<title>Test Case</title>
<style type="text/css">
    body { font-size:11px; font-family: "Courier New"; }
    * { margin:0; padding:0; }

    .col, .span { display:inline-block; }
    .col1 { min-width:12ex; }
    .span2 { min-width:30ex; }
    .span3 { min-width:40ex; }

    /* IE6 */
    * html .col { display:inline; padding-right:1ex; }
    * html .span { display:inline; white-space:nowrap; }
    * html .col1 { width:12ex; }
    * html .span2 { width:30ex; }
    * html .span3 { width:40ex; }

    /* IE7 */
    *:first-child+html .col { display:inline; padding-right:1ex; }
    *:first-child+html .span { display:inline; }
</style>
<div class="table">
  <div class="row">
    <div class="span2 span">
      <div class="col1 col">Name</div>
      <div class="col">City</div>
    </div>
    <div class="col">Number</div>
  </div>
  <div class="row">
    <div class="span2 span">
      <div class="col1 col">Adam</div>
      <div class="col">Anaheim</div>
    </div>
    <div class="col">714 555 5555</div>
  </div>
  <div class="row">
    <div class="span2 span">
      <div class="col1 col">Bob</div>
      <div class="col">Barstow</div>
    </div>      
    <div class="col">760 555 5555</div>
  </div>
  <div class="row">
    <div class="span3 span">
      <div class="span2 span">
        <div class="col1 col">Constantine</div>
        <div class="col">Canyon</div>
      </div>         
      <div class="col">805 555 5555</div>
    </div>         
    <div class="col"># Notice how phone number is still aligned :)</div>
  </div>
</div>

ラッパー「span4」、「span5」などを使用して、このアイデアをさらに列に拡張する方法は明らかです。

于 2010-11-14T19:02:51.073 に答える
0

td < 内で div を使用することをお勧めしますtd><div class="mydiv">your content</div></td>

次に、css.mydiv {overflow:auto;}を指定すると、テーブルを台無しにすることなく、必要なときにスクロールが追加されます。

編集 - テーブルの代わりに div を使用していることを確認しました。なぜこれ？

いずれの場合でも、プロパティdisplay:table; display:table-row;を使用してdisplay:table-cell;表形式のデータを表すことができます。

ここに例http://jsbin.com/evoka3/3

于 2010-11-14T11:33:35.633 に答える