0

私は CSS を学ぼうとしています。特に、とても使いやすいテーブルから離れようとしています。

私が何をしたかを見るためにjsfiddleを作成しました：

http://jsfiddle.net/HMtSY/

すべてのデータを比例セルに配置することはできません。手伝ってください

<div class="cartItem">
    <span class="cartProductTitle">Product</span> <span class="cartProductModel">
    Model</span> <span class="cartProductPrice">Price</span>
    <span class="cartProductQty">Qty</span> </div>
<div class="cartItem">
    <span class="cartProductTitle">This is the product title</span>
    <span class="cartProductModel">mdsdre12es</span>
    <span class="cartProductPrice">9.95</span> <span class="cartProductQty">1</span>
</div>
<div class="cartItem">
    <span class="cartProductTitle">Product 2</span>
    <span class="cartProductModel">mds12es</span> <span class="cartProductPrice">
    1119.95</span> <span class="cartProductQty">199</span> </div>
<div class="cartItem">
    <span class="cartProductTitle">This is the product title product 100000</span>
    <span class="cartProductModel">as</span> <span class="cartProductPrice">9.95</span>
    <span class="cartProductQty">22221</span> </div>

//CSS

.cartItem
{
    display: table-cell;    
    padding: 5px; 
    width: 600px;
    min-width: 600px;        
    float:left ; 
}
.cartProductTitle
{   
    display: table-cell;    
    padding: 5px; 
    width: 350px;
    min-width: 350px;
}
.cartProductModel
{   
    display: table-cell;    
    padding: 5px; 
    width: 150px;
    min-width: 150px;
}
.cartProductPrice
{   
    display: table-cell;    
    padding: 5px;    
    width: 30px;
    min-width: 30px;  
}
.cartProductQty
{   
    display: table-cell;    
    padding: 5px; 
    width: 30px;
    min-width: 30px;  
}
4

2 に答える 2

6

すべてのテーブルが悪いわけではありません!

レイアウト用のテーブルはありますが、これはレイアウト用のテーブルではありません。テーブルと一緒に表示されるべきデータのように、表形式のデータを表示しています!

これは、あなたの場合にテーブルを使用することは完全に受け入れられ、正しい解決策でさえあることを意味します。

はい、この場合はテーブルを使用してください。レイアウトではないので、大丈夫です:)

于 2012-11-10T09:48:11.500 に答える
1

ここでは HTML テーブルが適切なアプローチであるため、問題を解決するのではなく、問題を作成していますが、誰かが主張する場合は、CSS で HTML テーブルをシミュレートすることができます (データ形式が HTML ではなく一般的な XML である場合、これは意味があるかもしれません)。 ）。display: table-rowあなたの場合の要素のように、テーブルの行に構造的に対応する要素を指定するだけです.cartItem。(また、そのようなすべての要素を、 を設定したコンテナにラップするのも自然ですdisplay: table。)

.cartitem { display: table-row }そのため、設定を設定して削除するだけfloatです。すべての幅の設定を削除して、ブラウザーが列の幅を決定できるようにするのは自然なことです。これは、(HTML または CSS でエミュレートされた) テーブルを使用する基本的な利点の 1 つです。さらに、各行の最後の 2 つのセルには数値データが含まれているため、右揃えにする必要があります。

jsfiddleを参照してください。

于 2012-11-10T11:07:51.647 に答える