html - 多个表格中的 CSS 定位

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

希望对您有所帮助!