Question

我有一堆控件，每行渲染一次（如转发器）。每个控件都会呈现自己的表。所以输出看起来像这样：

<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

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

由于

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

我希望有所帮助！

Answer 2

这是我的案例中的解决方案：

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

CSS在多个表中定位

2 个答案: