0

我有一堆控件，每行呈现一个（如中继器）。每个控件都呈现自己的表格。所以输出看起来像这样：

<div>
    <table><tr><td>Product1</td><td>Produce1 Description 1</td></tr></table>
    <table><tr><td>Product1</td><td>Produce1 Description 1</td></tr></table>
    <table><tr><td>Product1</td><td>Produce1 Description 1</td></tr></table>
</div>

问题是我得到的结果如下所示：

Shoes      Shoes Description
Black T-Shirt      Black Medium Sized T-Shirt
Green Jeans    Green Medium sized Jeans

我需要在每个渲染控件上使第一个和第二个表格单元格的大小相同。是否可以在不硬编码显式像素量的情况下做到这一点（因为可以调整窗口大小）？

谢谢

4

2 回答 2

1

不要为每一行创建单独的表。将它们合并到一个大表中，只要确保正确关闭它们，行仍然会增量呈现。就像是：

<div>
    <table>
    <tr><td>Product1</td><td>Produce1 Description 1</td></tr>
    <tr><td>Product1</td><td>Produce1 Description 1</td></tr>
    <tr><td>Product1</td><td>Produce1 Description 1</td></tr>
    </table>
</div>

另一种方法（可能更简洁）是使用CSS表格：

<div class = "tablecontainer">
    <div class = "rowcontainer"><div class = "cell">Product 1</div><div class = "cell">Product 1 Description</div></div>
     <div class = "rowcontainer"><div class = "cell">Product 2</div><div class = "cell">Product 2 Description</div></div>
    <div class = "rowcontainer"><div class = "cell">Product 3</div><div class = "cell">Product 3 Description</div></div>
</div>

CSS：

.tablecontainer {
    display: table;
}
.rowcontainer {
    display: table-row;
}
.cell {
    display: table-cell;
}

我希望这有帮助！

于 2012-08-24T16:51:12.013 回答
0

这是适用于我的解决方案：

<html>
<head>
<style type="text/css">         
    .FirstColumn    
        { 
            width: 40%; 
            display:inline-block;
        }
    .SecondColumn    
        {
            width: 60%; 
            display:inline-block;
        }
</style>
</head>
<body>
    <form id="form1" runat="server">     
        <div style="width:100%">
            <div style="width:100%">
                <span class="FirstColumn">Some long product name.</span><span class="SecondColumn">Product 1 Descriptione.</span>
            </div>
            <div style="width:100%">
                <span class="FirstColumn">Product name.</span><span class="SecondColumn">Product 1 Long Descriptione.</span>
            </div>
            <div style="width:100%">
                <span class="FirstColumn">Product.</span><span class="SecondColumn">Product 1 Suprt Long Descriptione.</span>
            </div>
        </div>  
</body>
</html>
于 2012-08-30T18:03:54.787 回答