locked
.net 4.6 asp:table cellspacing not working RRS feed

  • Question

  • User1669214941 posted

    I am trying to reduce spaces between my rows, the CellSpacing tag is not working.  I am using VS 2012 .Net 4.6, not matter what I put in for the value nothing changes.  CellPadding works fine.   This is just a mock-up for evaluation of the problem.   Any ideas?

    Code:

    <asp:Table BorderWidth="0" CellSpacing="0" CellPadding="0" runat="server">
    <asp:TableRow BorderStyle="None">
    <asp:TableCell>
    <asp:TextBox ID="txtAddress1" Text="Address Line 1" Width="150px" Height="15px" runat="server" ></asp:TextBox>
    </asp:TableCell>
    </asp:TableRow>
    <asp:TableRow BorderStyle="None">
    <asp:TableCell>
    <asp:TextBox ID="txtAddress2" Text="Address Line 2" Width="150px" Height="15px" runat="server" ></asp:TextBox>
    </asp:TableCell>
    </asp:TableRow>
    <asp:TableRow BorderStyle="None">
    <asp:TableCell BorderStyle="None">
    <asp:TextBox ID="txtCity" Text="City" Width="110px" Height="15px" runat="server" ></asp:TextBox>
    </asp:TableCell>
    <asp:TableCell>
    <asp:TextBox ID="txtState" Text="State" Width="50px" Height="15px" runat="server" ></asp:TextBox>
    </asp:TableCell>
    <asp:TableCell>
    <asp:TextBox ID="txtZip" Text="Zip" Width="75px" Height="15px" runat="server" ></asp:TextBox>
    </asp:TableCell>
    </asp:TableRow>
    </asp:Table>

    Wednesday, June 7, 2017 2:27 PM

All replies

  • User1967761114 posted

    Hi kmcnet,

    The CellSpacing property is used to control the spacing between adjacent cells in the table control, the spacing will applied  both vertically and horizontally  and the spacing is uniform between each cells.

    Note:If you set border-collapse:collapse on the style of table contorl(or use css), the CellSpacing property will invalid.

    See the following HTML

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
    
        <style type="text/css">
            #table1, #table2, #table3, #table4 {
                width: 30%;
            }
    
                #table1 tr td, #table2 tr td, #table3 tr td, #table4 tr td {
                    border: 1px solid #000000
                }
    
            #table5 {
                width: 30%;
                border-collapse: collapse;
            }
    
                #table5 tr td {
                    border: 1px solid #000000
                }
        </style>
        <form id="form1" runat="server">
            <h3>Cell Spacing = 0</h3>
            <asp:Table ID="table1" runat="server" CellPadding="0" CellSpacing="0">
                <asp:TableRow>
                    <asp:TableCell>
                        1
                    </asp:TableCell>
                    <asp:TableCell>
                        2
                    </asp:TableCell>
                    <asp:TableCell>
                        3
                    </asp:TableCell>
                </asp:TableRow>
                <asp:TableRow>
                    <asp:TableCell>
                        4
                    </asp:TableCell>
                    <asp:TableCell>
                        5
                    </asp:TableCell>
                    <asp:TableCell>
                        6
                    </asp:TableCell>
                </asp:TableRow>
            </asp:Table>
            <h3>Cell Spacing = 1</h3>
            <asp:Table ID="table2" runat="server" CellPadding="0" CellSpacing="1">
                <asp:TableRow>
                    <asp:TableCell>
                        1
                    </asp:TableCell>
                    <asp:TableCell>
                        2
                    </asp:TableCell>
                    <asp:TableCell>
                        3
                    </asp:TableCell>
                </asp:TableRow>
                <asp:TableRow>
                    <asp:TableCell>
                        4
                    </asp:TableCell>
                    <asp:TableCell>
                        5
                    </asp:TableCell>
                    <asp:TableCell>
                        6
                    </asp:TableCell>
                </asp:TableRow>
            </asp:Table>
            <h3>Cell Spacing = 5</h3>
            <asp:Table ID="table3" runat="server" CellPadding="0" CellSpacing="5">
                <asp:TableRow>
                    <asp:TableCell>
                        1
                    </asp:TableCell>
                    <asp:TableCell>
                        2
                    </asp:TableCell>
                    <asp:TableCell>
                        3
                    </asp:TableCell>
                </asp:TableRow>
                <asp:TableRow>
                    <asp:TableCell>
                        4
                    </asp:TableCell>
                    <asp:TableCell>
                        5
                    </asp:TableCell>
                    <asp:TableCell>
                        6
                    </asp:TableCell>
                </asp:TableRow>
            </asp:Table>
            <h3>Cell Spacing = 5 & style  border-collapse : collapse</h3>
            <asp:Table ID="table4" runat="server" CellPadding="0" CellSpacing="5" Style="border-collapse: collapse">
                <asp:TableRow>
                    <asp:TableCell>
                        1
                    </asp:TableCell>
                    <asp:TableCell>
                        2
                    </asp:TableCell>
                    <asp:TableCell>
                        3
                    </asp:TableCell>
                </asp:TableRow>
                <asp:TableRow>
                    <asp:TableCell>
                        4
                    </asp:TableCell>
                    <asp:TableCell>
                        5
                    </asp:TableCell>
                    <asp:TableCell>
                        6
                    </asp:TableCell>
                </asp:TableRow>
            </asp:Table>
            <h3>Cell Spacing = 5 & css  border-collapse : collapse</h3>
            <asp:Table ID="table5" runat="server" CellPadding="0" CellSpacing="5">
                <asp:TableRow>
                    <asp:TableCell>
                        1
                    </asp:TableCell>
                    <asp:TableCell>
                        2
                    </asp:TableCell>
                    <asp:TableCell>
                        3
                    </asp:TableCell>
                </asp:TableRow>
                <asp:TableRow>
                    <asp:TableCell>
                        4
                    </asp:TableCell>
                    <asp:TableCell>
                        5
                    </asp:TableCell>
                    <asp:TableCell>
                        6
                    </asp:TableCell>
                </asp:TableRow>
            </asp:Table>
        </form>
    </body>
    </html>

    Then,the result as below:

    If you have any other questions, please feel free to contact me any time.

    Best Regards

    Even

    Thursday, June 8, 2017 3:04 AM