Remove From My Forums

Border-collapse is not working properly

Question

User81789783 posted

i am working on certain project and using Border-collapse property but its not working ,I am using in certain html table wrapped in div .ist working in some of the place i page but not all places , any help

<tr style="border: 1px solid black;border-collapse:collapse">
                   <td  style="border: 1px solid black;border-collapse:collapse;text-align:center" >Daily</td>
                  <td style="max-width:8rem;border: 1px solid black;border-collapse:collapse">Check the Pressure Applied to the probe</td>
                   <td style="text-align:center;border: 1px solid black;border-collapse:collapse">
                    <table style="border: 1px solid black;border-collapse:collapse">
                     <tr style="border: 1px solid black;border-collapse:collapse">
                  <td style="border: 1px solid black;border-collapse:collapse">1st</td>
                    </tr>
                    <tr style="border: 1px solid black;border-collapse:collapse">
                        <td style="border: 1px solid black;border-collapse:collapse">2nd</td>
                    </tr>
                     <tr style="border: 1px solid black;border-collapse:collapse">
                        <td style="border: 1px solid black;border-collapse:collapse">3rd</td>
                    </tr>

Saturday, August 17, 2019 2:12 PM

All replies

0

Sign in to vote

User-2054057000 posted

Refresh the page by holding 'CTRL+F5' keys together.

Sunday, August 18, 2019 10:36 AM

User-719153870 posted

Hi erum,

You don't need to add the same style for each html tag in your code.

Add style="" in your every tag may cause unexpected mistake, please try to use CSS. Like below:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        table {
            border-collapse: collapse;
        }

        table, td, th {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table>
                <tr>
                    <td style="text-align:center">Daily</td>
                    <td style="max-width:8rem;">Check the Pressure Applied to the probe</td>
                    <td style="text-align:center;">
                        <table>
                            <tr>
                                <td>1st</td>
                            </tr>
                            <tr>
                                <td>2nd</td>
                            </tr>
                            <tr>
                                <td>3rd</td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>

The reuslt of this demo:

You can see a little space around the second table, that's because the third td of the first table has a default padding=1px.

Update the code like:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        table {
            border-collapse: collapse;
        }

        table, td, th {
            border: 1px solid black;
        }

        td {
            padding:0;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table>
                <tr>
                    <td style="text-align:center">Daily</td>
                    <td style="max-width:8rem;">Check the Pressure Applied to the probe</td>
                    <td style="text-align:center;">
                        <table>
                            <tr>
                                <td>1st</td>
                            </tr>
                            <tr>
                                <td>2nd</td>
                            </tr>
                            <tr>
                                <td>3rd</td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>

The result of this demo:

A new problem you can see that the second table's around border is quite stronger.

Keep updating your code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        table {
            border-collapse: collapse;
        }

        table, td, th {
            border: 1px solid black;
        }

        td {
            padding:0;
        }

        .Noborder {
            border:unset;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table>
                <tr>
                    <td style="text-align:center">Daily</td>
                    <td style="max-width:8rem;">Check the Pressure Applied to the probe</td>
                    <td style="text-align:center;">
                        <table class="Noborder">
                            <tr>
                                <td class="Noborder">1st</td>
                            </tr>
                            <tr >
                                <td style="border-left:unset">2nd</td>
                            </tr>
                            <tr>
                                <td class="Noborder">3rd</td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>

The last result of this demo:

Best Regard,

Yang Shen

Monday, August 19, 2019 8:06 AM

Asked by:

Border-collapse is not working properly

Question

All replies