web-dev-qa-db-ja.com

CSSで、残りの幅を使用する右側のテーブルで左側の固定幅の列を取得するにはどうすればよいですか？

だから私は純粋なCSSを使って、レイアウト用のテーブルを決して使わない福音書を使おうと試みました、私は本当に持っています。しかし、信じられないほどの苦痛と苦痛の後、私はあきらめようとしています。私はCSSで何かを成し遂げるためにいくらか努力しても構わないと思っています。誤解しないでください。しかし、レイアウトテーブルで実行できる最も単純なことの一部が 全く不可能 CSSでは、概念の純粋さが本当に暴走し始めてもかまいません。

さて、おそらく私は怒っているようで、私はそうです。私は無駄な時間に腹を立てています。QuarkXpressのバックグラウンドから出てきて、役に立たない固定幅のデザインを手渡してくれた人々に腹を立てています。CSSの失敗した約束に腹を立てています。しかし、私は議論を始めるつもりはありません。純粋なCSSをもう1つ試してみるか、それともひとまとめにして、好きなときにいつでもレイアウトテーブルを使用するかどうかを決定する1つの簡単な質問に対する答えを本当に知りたいです。レイアウトテーブルに戻りたくないので、実際には不可能だとしたら、これは不可能だと思います。

問題はこれです：あります とにかく 純粋なCSSレイアウトを使用して、左側に固定幅の列を配置し、その右側にデータテーブルを配置して、利用可能なスペースの残りをデータテーブルが適切に占有するようにしますか？つまり、幅100％で左側のセルに固定幅の2セルレイアウトテーブルを配置することで簡単に実現できる同じレイアウトですか？

htmlcssliquid-layout
37
chaos
<div style="width: 200px;background-color: #FFFFCC; float: left;">
Left column
</div>

<div style="margin-left: 200px; background-color: #CCFFFF">
Right column
</div>

それはそれでうまくいくはずです（明らかに実装はページのどこにあるかによって異なりますが、それがあなたが探しているコンセプトだと思います）。

48
Derek H

これはあなたが探しているものだと思います：

<table style='width: 100%;'>
  <tr>
    <td style='width: 200px;'></td>
    <td></td>
  </tr>
</table>

後でありがとう。 = P

（私は明らかに冗談を言っています...ちょっと...）

11
Paolo Bergantino

this はあなたが探しているものですか？

body {
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  height: 100%;
  max-height: 100%;
}
#framecontent {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 200px;
  /*Width of frame div*/
  height: 100%;
  overflow: hidden;
  /*Disable scrollbars. Set to "scroll" to enable*/
  background: navy;
  color: white;
}
#maincontent {
  position: fixed;
  top: 0;
  left: 200px;
  /*Set left value to WidthOfFrameDiv*/
  right: 0;
  bottom: 0;
  overflow: auto;
  background: #fff;
}
.innertube {
  margin: 15px;
  /*Margins for inner DIV inside each DIV (to provide padding)*/
}
* html body {
  /*IE6 hack*/
  padding: 0 0 0 200px;
  /*Set value to (0 0 0 WidthOfFrameDiv)*/
}
* html #maincontent {
  /*IE6 hack*/
  height: 100%;
  width: 100%;
}
<div id="framecontent">
    <div class="innertube">

      <h1>CSS Left Frame Layout</h1>
      <h3>Sample text here</h3>

    </div>
  </div>


  <div id="maincontent">
    <div class="innertube">

      <h1>Dynamic Drive CSS Library</h1>
      <p style="text-align: center">Credits: <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a>
      </p>

    </div>
  </div>

あなたの痛みを感じますが、時間を無駄にしないでください。以前よりもCSSをよく理解していると思います。それを使い続けると、利点がわかります。個人的には、CSSは熟練するために多くの練習を必要とするものの1つであることがわかりました。CSSベースのレイアウトを5年間使用していて、私は毎日面白いトリックを学んでいます。

10
Scott Muc

この質問を最新に保つために、CSS2とCSS3の両方を使用して同じことを達成できる5つの方法を次に示します。

例1：フロートとマージン

これは何年にもわたって行われてきた方法です。シンプルで効果的です。

_#example1 .fixedColumn {
    width: 180px;
    float: left;
    background-color: #FCC;
    padding: 10px;
}
#example1 .flexibleColumn {
    margin-left: 200px;
    background-color: #CFF;
    padding: 10px;
}_
_<div id="example1">

    <div class="fixedColumn">
        Fixed Column
    </div>
    <div class="flexibleColumn">
        Flexible Column
    </div>
    
</div>_

例2：CSS calc（）;

calc()は、IE9以降で動作しますが、Androidのブラウザーの一部のバージョンでのサポートは少し不安定です： http://caniuse.com/#feat=calc

_#example2.calc {
    overflow: hidden;
}
#example2.calc .fixedColumn {
    width: 180px;
    float: left;   
    background-color: #FCC;
    padding: 10px; 
}
#example2.calc .flexibleColumn {
    width: calc(100% - 220px); /*200px for the fixed column and 20 for the left and right padding */
    float: left;  
    background-color: #CFF;
    padding: 10px;
}_
_<div id="example2" class="calc">
    
    <div class="fixedColumn">
        Fixed Column
    </div>
    <div class="flexibleColumn">
        Flexible Column
    </div>
    
</div>_

例3：テーブルとしてのCSS表示

_#example3.table {
    display: table;   
    width: 100%;
}
#example3.table .fixedColumn {
    width: 180px;
    display: table-cell;   
    background-color: #FCC;
    padding: 10px;   
}
#example3.table .flexibleColumn {    
    display: table-cell; 
    background-color: #CFF;
    padding: 10px;  
}_
_<div id="example3" class="table">
    
    <div class="fixedColumn">
        Fixed Column
    </div>
    <div class="flexibleColumn">
        Flexible Column
    </div>
    
</div>_

例4：CSS3 Flexbox

Flexboxは、ブラウザー全体で驚くほど優れたサポートを提供します。 http://caniuse.com/#search=flex

_#example4.flex {
    display: flex;
}
#example4.flex .fixedColumn {
    width: 180px;
    background-color: #FCC;
    padding: 10px;  
}
#example4.flex .flexibleColumn {
    flex: 1 100%;
    flex-basis: auto;
    background-color: #CFF;
    padding: 10px; 
}_
_<div id="example4" class="flex">
    
    <div class="fixedColumn">
        Fixed Column
    </div>
    <div class="flexibleColumn">
        Flexible Column
    </div>
    
</div>_

例5：CSS3グリッド

現時点では、CSS3のgridの実装をサポートするブラウザーはIE10、IE11、およびEdge（したがって_-ms-_ブラウザープレフィックス）のみであるため、これらのブラウザーのいずれかでこれを表示してください。正しく動作します。

[〜＃〜] edit [〜＃〜]chrome実験仕様をここに含めましたChrome詳細です ここ ）で試験的な機能を有効にして表示します。

http://caniuse.com/#search=grid

_#example5.grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 200px 1fr;
    -ms-grid-rows: auto;
    grid-template-columns: 200px 1fr;
    grid-template-rows: auto;
}
#example5.grid .fixedColumn {
    -ms-grid-column: 1;
    background-color: #FCC;
    padding: 10px;
}
#example5.grid .flexibleColumn {
    -ms-grid-column: 2;
    background-color: #CFF;
    padding: 10px;
}_
_<div id="example5" class="grid">
    
    <div class="fixedColumn">
        Fixed Column
    </div>
    <div class="flexibleColumn">
        Flexible Column
    </div>
    
</div>_

5つのテクニックすべてを備えたコーデックペンは次のとおりです。

2列（1固定、1屈曲）5つの異なる方法！

4
Chris Spittles

まず、Eric MeyerのCSSブックとtheWeb上のCSSリファレンス： A List Apart をお勧めします。私は仕事でCSSを広範囲に使用しており、CSSはかなりうまくいったと思います。

それがすべて言われている状態で、うまくいくことをしてください。私はあなたが今経験した痛みを正確に経験しました。結局、テーブルを使用しなかったと言えるだけで、デザインを妥協する価値はないと考えました。

覚えておいてください：あなたはCSSをするために支払われていません-あなたは働くソフトウェアを書くために支払われます。

4
Mark Brittingham

このようなもの：

<div style="position: relative; width: 100%">
    <div style="position: absolute; left: 0; top: 0; width: 200px">
        left column
    </div>
    <div style="position: absolute; left: 200px; top: 0">
         other stuff
    </div>
</div>

もちろん、インラインではなく、別のスタイルシートにスタイルを配置する必要があります。左側の単一の固定幅の列はかなり単純ですが、テーブルで簡単に実行できる他のレイアウトが時々見られますが、私の知る限り、CSSで非常に難しいです。

1
David Z

あなたはこれらを試してみたいかもしれません：

http://www.alistapart.com/stories/practicalcss/

http://www.w3.org/2002/03/csslayout-howto

理由は次のとおりです。

http://en.wikipedia.org/wiki/Tableless_web_design

http://davespicks.com/essays/notables.html

その他のハウツー：

    div.row {
      clear: both;
      padding-top: 10px;
    }

    div.row span.label {
      float: left;
      width: 100px;
      text-align: right;
    }

    div.row span.formw {
      float: right;
      width: 335px;
      text-align: left;
    }


    <div style="width: 350px; background-color: #cc9;
      border: 1px dotted #333; padding: 5px;
      margin: 0px auto";>
      <form>
        <div class="row">
          <span class="label">Name:</span><span
            class="formw"><input type="text" size="25" /></span>
        </div>
        <div class="row">
          <span class="label">Age:</span><span
            class="formw"><input type="text" size="25" /></span>
        </div>
        <div class="row">
          <span class="label">Shoe size:</span><span
            class="formw"><input type="text" size="25" /></span>
        </div>
        <div class="row">
          <span class="label">Comments:</span><span
              class="formw">
            <textarea cols="25" rows="8">
            Go ahead - write something...
            </textarea>
          </span>
        </div>
        <div class="spacer">
          &nbsp;
        </div>
      </form>
    </div>
1
Jobo

問題の要素にdisplay：tableとdisplay：table-cellを適用することを含む答えはほぼ確実です。つまり、...いいえ。

0
Sparr

CSSがコードの全ページを取得して、テーブルを使用する数行を複製する方法が大好きです。

CSS戦争と戦った後、私は「純粋」が見る人の目にあるという結論に達し、「機能するものだけを使用しよう」というアプローチに移行しました。

CSSを使用して、見栄えを良くしてください。可能な場合はDIVとSPANを使用してください。しかし、ブラウザーのさまざまなフレーバー全体で物事が正しく並ぶように1日を費やしていることに気付いた場合は、その中のテーブルをたたいて、次に進んでください。ほとんどの人が考えているように思われるのとは逆に、心配しないでください。子犬は実際には死なないでしょう。

0
NotMe

Sparrが言うように、この要件を具体的に満たすCSSがあります。これは、さまざまな、許容できない可能性のある妥協なしに他の方法でそれを行うことは実際には不可能であり、それがdisplay:table、display:table-cellなど.

残念ながら、Internet Explorer 8より前のInternet Explorerはこれらの表示モードをサポートしていないため、問題は実際にはCSSにあるのではなく、ブラウザー（実際にはInternet Explorer、他は問題ありません）がCSSを適切にサポートしていないことです。

良い知らせは、これが変更されており、やがて適切なCSSソリューションが提供されることです。それまでの間、他の回答で妥協点を1つ選んでください。

0
Alohci