如何實現此表結構的DIV

enter image description here 如何實現此表結構的DIV

我想通過使用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的表結構。我欣賞的幫助

來源

2012-11-02 kalls

你確定這不是一個合法的表結構嗎？它是否不包含表格數據？我不會推薦把它變成DIV湯，只是爲了它不是'

' –

@ Pekka - 我想保持原樣，代碼審查評論是使用DIV而不是表格來進行佈局。謝謝！ – kalls

@ kalls您認爲需要多少列/行纔是表格數據？將表格數據轉儲到div中與使用表格進行佈局一樣糟糕。 – cimmanon

回答

你可以做這樣的事情：如果你想獲得一些補白/利潤率您可以添加其他的div進入細胞的div

<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 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標籤中刪除樣式）

來源

2012-11-02 18:22:10

謝謝您接近我的佈局，但是當我將寬度百分比更改爲20％時，整個佈局更改。 – kalls

請參閱[this]（http://jsfiddle.net/jGkxJ/3/）演示。它具有新類，「行」和單元格寬度設置爲20％ –

已更新的答案反映了來自最新演示的「行」類樣式 –

退房：

1）YUI Grids - 爲無表格設計

的基礎YUI網格CSS提供了四種預設頁面寬度，六種預設模板，並有能力堆疊並嵌套二，三或四列的細分區域。 4kb文件提供了超過1000個頁面佈局組合。

2）960 Grid System：該系統的前提是非常適合於快速成型，但是當集成到生產環境中會工作得同樣好。有可打印的草圖表，設計佈局和具有相同度量的CSS文件。

來源

2012-11-02 18:16:35

我很感激！我需要通過審批流程才能使用此功能。目前，我只能做代碼更改。我會記住這一點。謝謝！ – kalls

@kalls最重要的是，通過使用這些CSS框架，大多數跨瀏覽器問題都可以避免。 –

一般結構複製表就好。

<!--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>

來源

2012-11-02 18:38:28 Burhan

- 謝謝，我會用它作爲未來的參考。 – kalls

太棒了！ div的渲染速度更快，但有時難以管理。一旦你掌握了它，你將永遠使用它。在必須使用表格數據時使用表格，並在必須設計版面時使用div。 – Burhan

相關問題