WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES

How to remove cellspacing from tables using CSS

Topic: HTML / CSSPrev|Next

Answer: Use the CSS border-collapse property

By default, there is some space between the borders of adjacent table cells, because the default border modal for the HTML tables is separated. But, you can overwrite this and create a table with collapsed border without any cellspacing by simply setting the CSS border-collapse property value for the <table> element to collapse, as shown in the example below:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Remove Cellspacing in CSS</title>
<style>
    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>Clark</td>
                <td>Kent</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Peter</td>
                <td>Parker</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>3</td>
                <td>John</td>
                <td>Rambo</td>
                <td>[email protected]</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Related FAQ

Here are some more FAQ related to this topic:

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties