3

4x3 テーブルを使用して ItemTemplate を作成しようとしています。最初の列に画像が含まれ、他の列のセルに画像に関する情報が含まれるようにします。以下のコードを使用していますが、1 行目は画像の下部にレンダリングされ、2 行目はその下にレンダリングされます。私は何を間違っていますか？

前もって感謝します。

<LayoutTemplate>
        <table runat="server" cellpadding="2" id="tblBooks" style="">
          <tr runat="server">
              <td runat="server">
                  <table ID="itemPlaceholderContainer" runat="server" border="0" style="">
                      <tr ID="itemPlaceholder" runat="server">
                      </tr>
                  </table>
              </td>
          </tr>
            <tr runat="server">
                <td runat="server" style="">
                    <asp:DataPager ID="DataPager1" runat="server">
                        <Fields>
                            <asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True" 
                                ShowNextPageButton="False" ShowPreviousPageButton="False" />
                            <asp:NumericPagerField />
                            <asp:NextPreviousPagerField ButtonType="Button" ShowLastPageButton="True" 
                                ShowNextPageButton="False" ShowPreviousPageButton="False" />
                        </Fields>
                    </asp:DataPager>
                </td>
            </tr>
        </table>
    </LayoutTemplate>
<ItemTemplate>
         <tr runat="server">
            <td rowspan="4">
                <asp:Image ID="Image1" runat="server" ImageUrl='<%# String.Format("~\\Static\\Images\\BookCovers\\{0}", Eval("CoverImageSmall")) %>' Height="120" Width="90"/>
            </td>
            <td colspan="2" style="font-size:large; padding-bottom:5px; padding-left:10px; color:Black;">
                <asp:Label runat="server" ID="TitleLabel" Text='<%# Eval("Title") %>' />
            </td>  
         </tr>
         <tr runat="server">
            <td colspan="2" style="padding-left:10px;">
                <asp:Label runat="server" ID="FirstNameLabel" Text='<%# Eval("FirstName") %>' />
                <asp:Label runat="server" ID="LastNameLabel" Text='<%# Eval("LastName") %>' />
            </td>
         </tr>
         <tr runat="server">
            <td colspan="2" style="padding-left:10px;">
            </td>
         </tr>
         <tr runat="server">
            <td>
            </td>
            <td>
            </td>
         </tr>
    </ItemTemplate>

編集:より明確にするために、私が求めている結果は次のようになります:

______________________________________________
|               |___________Title_____________|
|    Image      |____________Name_____________|
|               |______Value_____|____Value___|
|_______________|______Value_____|____Value___|

しかし、私が得るのはこれです：

______________________________________________
| _____________ |                             |
||   Image    | |                             |
||            | |                             |
||____________| |___________Title_____________|
|               |____________Name_____________|
|               |______Value_____|____Value___|
|_______________|______Value_____|____Value___|

CSS がリセットされます。

4

2 に答える 2

2

行スパンは自動的に列を作成し、他のすべての行/セルがその周りに追加されます。すべての colspans と最後の行の 2 番目の td を削除できます。

<ItemTemplate>
     <tr runat="server">
        <td rowspan="4">
            <asp:Image ID="Image1" runat="server" ImageUrl='<%# String.Format("~\\Static\\Images\\BookCovers\\{0}", Eval("CoverImageSmall")) %>' Height="120" Width="90"/>
        </td>
        <td style="font-size:large; padding-bottom:5px; padding-left:10px; color:Black;">
            <asp:Label runat="server" ID="TitleLabel" Text='<%# Eval("Title") %>' />
        </td>  
     </tr>
     <tr runat="server">
        <td style="padding-left:10px;">
            <asp:Label runat="server" ID="FirstNameLabel" Text='<%# Eval("FirstName") %>' />
            <asp:Label runat="server" ID="LastNameLabel" Text='<%# Eval("LastName") %>' />
        </td>
     </tr>
     <tr runat="server">
        <td style="padding-left:10px;">
        </td>
     </tr>
     <tr runat="server">
        <td>
        </td>
     </tr>
</ItemTemplate>

更新: 提供された jsfiddle に基づいて、リセット css スタイルシートによって適用される vertical-align:baseline 属性の使用に問題があることを示しています。その CSS 属性が削除されるか、タイトル セルが vertical-align:bottom のようなものにオーバーライドされると、期待どおりに表示されます。http://jsfiddle.net/9HsvF/10/を参照してください

于 2013-01-31T17:45:01.150 に答える
0

簡単なコードを書き留めました
<tr>
  <td>Image Code</td>
  <td colspan="2">Title</td>
</tr>
<tr>
  <td rowspan="3"><td>
  <td colspan="2">Name</td>
</tr>
<tr>
  <td>Value1<td>
  <td>Value2</td>
</tr>
<tr>
  <td>Value1<td>
  <td>Value2</td>
</tr>
。コードでこれを試してください。希望どおりに動作することを願っています。

于 2013-02-02T20:41:50.893 に答える