How to remove spaces between cells in the HTML table
By default, there is a space between adjacent table cells, because the default border mode for HTML tables is separate. But you can remove this and create a table without any cell spacing by simply setting the value of the CSS border-collapse property for the <table> elements to collapse, as shown in the example below:
CSS :
table{
border-collapse: collapse;
}
table th, table td{
padding: 10px;
}
table, th, td{
border: 1px solid #000;
}
table th {
background-color: #272b33;
color: #fff;
vertical-align: middle;
padding-left: 10px;
padding: 20px;
}
HTML :
<!DOCTYPE html> <html> <head> <style> /* Put the CSS Style Here */ </style> </head> <body> <table> <thead> <tr> <th>Ligne</th> <th>Nom</th> <th>Prénom</th> <th>E-mail</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Emily</td> <td>Baptise</td> <td>[email protected]</td> </tr> <tr> <td>2</td> <td>Jean</td> <td>Skant</td> <td>[email protected]</td> </tr> </tbody> </table> </body> </html>
| Result | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
- HTML/CSS MCQs – Multiple Choice Questions and Answers – Part 1
- HTML/CSS MCQs – Multiple Choice Questions and Answers – Part 2
- HTML/CSS MCQs – Multiple Choice Questions and Answers – Part 3
- HTML/CSS MCQs – Multiple Choice Questions and Answers – Part 4
- HTML/CSS MCQs – Multiple Choice Questions and Answers – Part 5
- HTML/CSS MCQs – Multiple Choice Questions and Answers – Part 6
- HTML/CSS MCQs – Multiple Choice Questions and Answers – Part 7
- Contact form with HTML, CSS, and Javascript
- Customize radio buttons using CSS
- Customize checkbox using CSS
- How to Style Select Option Dropdown with only CSS
- Styling an input type=”file” button with CSS
- How to write comments in HTML
- How to write comments in CSS
- How to vertically center an image in a DIV using CSS
- How to Disable a Link using Only CSS
- How to Resize Background Images with CSS3
- How to overlay one DIV over another div using CSS
- How to create a list without bullets in HTML
- How to dynamically change the width and height of DIV based on content using CSS
- How to Center Text Vertically in DIV with CSS
- How to Set the Height of a DIV to 100% with CSS
- How to Horizontally Center a DIV with CSS
- How to change the color of HR tag with CSS
- How to Auto-resize an Image to Fit into a DIV Container using CSS
- How to change the cursor into a hand when a user hovers over a list item?
- How to Draw a Vertical Line in HTML
- How to Change Background Opacity without Affecting Text
- How to Remove White Space Under an Image Using CSS
- How to Make a Button Link to Another Page in HTML
- How To Write Text Over an Image in HTML With CSS
- How to Make a Custom Cursor Using CSS
- How to use shadow effect on HTML elements using CSS
- How to add shadow to text in CSS
- How to Change Text Color on Hover in CSS
- How to Make a DIV Element Editable in HTML
- How to Change Image on Hover with CSS
- How to style div with an inner border inside a div using CSS
- How to Place Two DIVs with Same Height Side by Side in CSS
- How to remove spaces between cells in the HTML table
- How to Disable the Resizing of Textarea Using CSS
- How to Style CSS Checkboxes with Font Awesome
