ListView控件 - 的ItemTemplate表造型 [英] ListView - ItemTemplate table styling
问题描述
我想创建使用4x3的表一个ItemTemplate。我想的第一列包含一个图像,并在有关图像的其它列的信息的单元。我现在用的是code以下,但第1排在呈现图像的底部和下面的第二排。我在做什么错了?
I am trying to create an ItemTemplate using a 4x3 table. I want the first column to contain an image and the cells in the other columns info about the image. I am using the code below but the 1st row renders at the bottom of the image and the 2nd row below it. What am I doing wrong?
先谢谢了。
<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>
编辑::要更清楚,我是后的结果是这样的:
To be more clear, the result I am after is like this:
______________________________________________
| |___________Title_____________|
| Image |____________Name_____________|
| |______Value_____|____Value___|
|_______________|______Value_____|____Value___|
不过,我所得到的是这样的:
But what I get is this:
______________________________________________
| _____________ | |
|| Image | | |
|| | | |
||____________| |___________Title_____________|
| |____________Name_____________|
| |______Value_____|____Value___|
|_______________|______Value_____|____Value___|
CSS的复位。
The CSS is reset.
推荐答案
该行跨度自动使柱和所有其他行/单元格将围绕它进行添加。可以删除所有colspans和第二TD的最后一行中
The rowspan automatically makes the column and all the other rows/cells will be added around it. You can remove all the colspans and the second td in the last row.
<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样式表应用于基线属性。如果该CSS属性被删除,或者被重写为题细胞类似垂直对齐:底部会显示正常。请参见 http://jsfiddle.net/9HsvF/10/
这篇关于ListView控件 - 的ItemTemplate表造型的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!