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 表格（如果您的数据格式是通用 XML 而不是 HTML，这甚至可能是有意义的）。您只需要指定display: table-row在结构上与表行相对应的.cartItem元素，例如您的案例中的元素。（将所有此类元素包装在您为其设置的容器中也是很自然的display: table。）

所以只需设置.cartitem { display: table-row }和删除float设置。删除所有宽度设置是很自然的，让浏览器确定列的宽度，这是使用表格（在 HTML 中或在 CSS 中模拟）的基本优势之一。此外，每行的最后两个单元格应右对齐，因为它们包含数字数据。

见jsfiddle。

于 2012-11-10T11:07:51.647 回答