html tutorial - How to remove cellspacing from tables using CSS - html5 - html code - html form




Answer: Use the CSS border-collapse property

  • By default, there's some gap between the borders of adjacent table cells, as a result of the default border modal for the hypertext mark-up language tables is splitted.
  • But, you'll be able to write this and build a table with collapsed border or with none cellspacing by setting the CSS border-collapse property value for the parts to collapse, like this:

Example

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Remove Cellspacing in CSS</title>
    <style type="text/css">
        table{
            border-collapse: collapse; /* Remove cell spacing */
        }
        table, th, td{
            border: 1px solid #666;
        }
        table th, table td{
            padding: 10px; /* Apply cell padding */
        }
    </style>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>Row</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>George </td>
                    <td>Orwell</td>
                    <td>[email protected]</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>William </td>
                    <td>Faulkner</td>
                    <td>[email protected]</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Ayn</td>
                    <td>Rand</td>
                    <td>[email protected]</td>
                </tr>
            </tbody>
        </table>
    </body>
    </html>

    Related Searches to How to remove cellspacing from tables using CSS