Question

我正在尝试学习CSS，特别是我正试图摆脱那些易于使用的表格。

我创建了jsfiddle，看看我做了什么：

我无法将所有数据对齐到比例单元格中。请协助

<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;  
}

Answer 1

并非所有表都是邪恶的！

布局表格是，但这不是布局表格，您正在显示表格数据，例如，应该与表格一起显示的数据！

这意味着在您的案例中使用表格 完全可以接受 ，甚至正确的解决方案。

所以是的，在这种情况下使用表格。它不是布局，所以没关系：）

Answer 2

你正在创建问题而不是解决问题，因为HTML表是正确的方法，但如果有人坚持，可以在CSS中模拟HTML表格（这甚至可能是有意义的如果您的数据格式是通用XML而不是HTML）。您只需要为结构上与表行对应的元素指定display: table-row，例如您的.cartItem元素。（将所有这些元素包装在容器中也是很自然的，为此设置display: table。）

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

请参阅jsfiddle。

需要CSS帮助 - 无需表格就可以对齐数据

2 个答案:

并非所有表都是邪恶的！