Home > Article > Web Front-end > How to eliminate spaces between tables in css
How to eliminate spaces between tables in css
- WBOYOriginal
- 2021-12-09 09:54:453220browse
In css, you can use the "border-collapse" attribute to eliminate the spaces between tables. This attribute can set whether the borders between tables are merged. When the value of the attribute is collapse, the spaces between tables can be eliminated and merged. Border, syntax "table element {border-collapse:collapse;}".
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
How to eliminate the spaces between tables in css
In css, if you want to eliminate the spaces between tables, you can use the border-collapse attribute, border The -collapse attribute is used to set whether the table borders are merged into a single border, or displayed separately as in standard HTML.
If the value of the attribute is set to collapse, the borders between the tables will be merged into a single border, and the two tables share a border, thus eliminating the spaces between the tables.
The example is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table {
border-collapse:collapse;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>111</td>
<td>222</td>
</tr>
<tr>
<td>333</td>
<td>444</td>
</tr>
<tr>
<td>555</td>
<td>666</td>
</tr>
<tr>
<td>777</td>
<td>888</td>
</tr>
</table>
<table border="1">
<tr>
<td>111</td>
<td>222</td>
</tr>
<tr>
<td>333</td>
<td>444</td>
</tr>
<tr>
<td>555</td>
<td>666</td>
</tr>
<tr>
<td>777</td>
<td>888</td>
</tr>
</table>
</body>
</html>Output result:
(Learning video sharing: css video tutorial)
The above is the detailed content of How to eliminate spaces between tables in css. For more information, please follow other related articles on the PHP Chinese website!