asp.netで以下のようにカスタムテーブルを描画する方法は？

Question

誰も私の下のようなテーブルを設計する方法を提案することはできますか？私は、私は2番目の行のためにここにcolspanをbelow.Howのようなコードを使用することができている

EDIT

。？ と私のコードとコードの違いは何ですか？答えは下記のとおりです。

<asp:Table ID="Table2" runat="Server" CellPadding="2" CellSpacing="1" 
       BorderColor="Black" GridLines="Both" BorderStyle="Solid" Width="100%"> 
       <asp:TableHeaderRow 
        runat="server" 
        ForeColor="Black" 
        BackColor="#DCDCDC" 
        Font-Bold="false" 
        align="center" 
        BorderColor="Black"> 
        <asp:TableHeaderCell ID="TableCell20" runat="Server" align="center">Serial No</asp:TableHeaderCell> 
        <asp:TableHeaderCell ID="TableCell21" runat="Server" align="center">Fee Details</asp:TableHeaderCell> 
        <asp:TableHeaderCell ID="TableCell22" runat="Server" align="center">Amount</asp:TableHeaderCell> 
       </asp:TableHeaderRow> 

       <asp:TableRow ID="TableRow7" 
        runat="Server" 
        BackColor="White" 
        Font-Bold="false" 
        Font-Size="Small"> 
        <asp:TableCell ID="TableCell13" runat="Server" align="center"> 
         1 
        </asp:TableCell> 

        <asp:TableCell ID="TableCell14" runat="Server" align="center"> 
         <asp:Label ID="TypeText" runat="server" Text=""></asp:Label> 
        </asp:TableCell> 

        <asp:TableCell ID="TableCell16" runat="Server" align="center"> 
         <asp:Label ID="FeeText" runat="server" Text=""></asp:Label> 
        </asp:TableCell> 

       </asp:TableRow> 

       <asp:TableRow ID="TableRow6" 
        runat="Server" 
        BackColor="White" 
        Font-Bold="false" 
        Font-Size="Small"> 


        <asp:TableCell ID="TableCell12" runat="Server" align="center"> 
         Total Amount 
        </asp:TableCell> 

        <asp:TableCell ID="TableCell15" runat="Server" align="center"> 
         <asp:Label ID="TotalAmountText" runat="server" Text=""></asp:Label> 
        </asp:TableCell> 

       </asp:TableRow> 

Answer 1

あなたが要求しているテーブルがそうのように達成することができます：ここで

.bordered-table { 
 
    width: 300px; 
 
    height: 78px; 
 
    border: 2px solid black; 
 
    border-collapse: collapse; 
 
} 
 
.bordered-table tr td { 
 
    border-right: 2px solid black; 
 
    border-bottom: 2px solid black; 
 
}

<table class="bordered-table"> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     text 
 
     </td> 
 
     <td> 
 
     text 
 
     </td> 
 
     <td> 
 
     text 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td colspan="2" style="text-align: center;"> 
 
     text 
 
     </td> 
 
     <td> 
 
     text 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     text 
 
     </td> 
 
     <td colspan="2" style="text-align: center;"> 
 
     text 
 
     </td> 
 
     <tr> 
 
    </tbody> 
 
</table>

は、そのあなたのための詳細td colspan属性をすることができますLinkです。