0

1行に1つずつレンダリングされるコントロールがたくさんあります（リピーターのように）。各コントロールは独自のテーブルをレンダリングします。したがって、出力は次のようになります。

<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

レンダリングされた各コントロールで1番目と2番目のテーブルセルを同じサイズにする必要がありますが、明示的なピクセル量をハードコーディングせずにこれを行うことはできますか（ウィンドウのサイズを変更できるため）？

ありがとう

4

2 に答える 2

1

行ごとに個別のテーブルを作成しないでください。それらを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 に答える