Question

enter image description here

我试图通过使用div来复制这个表结构。

<asp:Table ID="tblAnnualReportServiceForm" runat="server" Width="100%" CellSpacing="1" CellPadding="5">
    <asp:TableRow >
        <asp:TableCell HorizontalAlign="Left">
            <asp:Table ID="Table1" runat="server" CellSpacing="1" CellPadding="5">
                <asp:TableRow>
                    <asp:TableCell>
                        <asp:Label ID="lblStartDate" runat="server" Text="Start Date"></asp:Label>
                    </asp:TableCell>
                    <asp:TableCell>
                        <asp:TextBox ID="txtStartDate" Width="130px" runat="server"></asp:TextBox>
                    </asp:TableCell>
                </asp:TableRow>
                <asp:TableRow >
                    <asp:TableCell>
                        <asp:Label ID="lblEndDate" runat="server" Text="End Date"></asp:Label>
                    </asp:TableCell>
                    <asp:TableCell>
                        <asp:TextBox ID="txtEndDate" runat="server" Width="130px" style="text-align:left" ValidationGroup="MKE" />
                    </asp:TableCell>
                </asp:TableRow>             
            </asp:Table>
        </asp:TableCell>
    </asp:TableRow>
</asp:Table>

我尝试过以下DIV，但我没有太多的CSS经验。

<div>
    <div  style="float:left">
         <asp:Label ID="Label1" runat="server" Text="Start Date"></asp:Label>
    </div>
    <div>
        <asp:TextBox ID="TextBox1" Width="130px" runat="server"></asp:TextBox>
   </div>    
   <div>
        <asp:Label ID="Label2" runat="server" Text="End Date"></asp:Label>
        <asp:TextBox ID="TextBox2" runat="server" Width="130px" style="text-align:left" ValidationGroup="MKE" />
  </div>
</div>

任何指针都会有很大的帮助。我有太多的表结构需要转换为DIV。我很感激帮助

Answer 1

复制表的一般结构就像。

<!--table-->
<div>
        <!--tr-->
        <div style="clear:both"></div>
                <!--td-->
                <div style="float:left">
                </div>
                <!--td-->
                <div style="float:right">
                </div>
        <!--tr-->
        <div style="clear:both"></div>
                <!--td-->
                <div style="float:left">
                </div>
                <!--td-->
                <div style="float:right">
                </div>
        <!--tr-->
        <div style="clear:both"></div>
</div>

Answer 2

您可以这样做：

<div>
    <div style="clear:both;">
        <div style="float:left;width:50%;">
            <asp:Label ID="lblStartDate" runat="server" Text="Start Date"></asp:Label>
        </div>
        <div style="float:left;width:50%;">
            <asp:TextBox ID="txtStartDate" Width="130px" runat="server"></asp:TextBox>
        </div>
    </div>
    <div style="clear:both;">
        <div style="float:left;width:50%;">
            <asp:Label ID="lblEndDate" runat="server" Text="End Date"></asp:Label>
        </div>
        <div style="float:left;width:50%;">
            <asp:TextBox ID="txtEndDate" runat="server" Width="130px" style="text-align:left" ValidationGroup="MKE" />
        </div>
    </div>
</div>

如果你想获得一些填充/边距，你可以在单元格div中添加另一个div：

<div style="float:left;width:50%;">
    <div style="border:solid 1px black;padding:5px;margin:1px;">                
            <asp:Label ID="lblStartDate" runat="server" Text="Start Date"></asp:Label>
    </div>
</div>

JsFiddle DEMO或here是一个包含类的演示（使用style不是一个好主意，所以我创建了几个类并从div标签中删除了样式）

Answer 3

退房：

1。） YUI Grids - 适用于无表格设计

基础YUI Grids CSS提供四种预设页面宽度，六种预设模板，以及堆叠和嵌套两列，三列或四列细分区域的功能。 4kb文件提供超过1000种页面布局组合。

2。）960 Grid System：系统的前提非常适合快速原型设计，但在集成到生产环境中时同样可以正常工作。有可打印的草图，设计布局和具有相同测量值的CSS文件。

如何为此表结构实现DIV

3 个答案: