HTML+CSS merge table border sample code
|
When we add borders to table and td tags, double borders are used by default, like this.
If we want to merge the borders of table and td, we can set the border-collapse attribute value to collapse in the table style. As shown below:
Look at the effect again:
To make it easier to replicate, here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
border: 1px solid blue;/*Add border to the table*/
border-collapse: collapse;/*Merge borders*/
}
td{
border: 1px solid blue;/*Add border to cell*/
}
</style>
</head>
<body>
<table>
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
</body>
</html>
This concludes this article about the sample code for html+css merging table borders. For more relevant html merging table borders content, please search 123WORDPRESS.COM’s previous articles or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future! |
<<: Detailed example of locating and optimizing slow query sql in MySQL
>>: About the difference between inspecting elements and viewing the source code of a web page
Recommend
A brief discussion on whether CSS animation will be blocked by JS
The animation part of CSS will be blocked by JS, ...
Detailed application of Vue dynamic form
Overview There are many form requirements in the ...
JavaScript implements long image scrolling effect
This article shares the specific code of JavaScri...
MySQL Innodb key features insert buffer
Table of contents What is insert buffer? What are...
Extract specific file paths in folders based on Linux commands
Recently, there is a need to automatically search...
The use of textarea in html and common problems and case analysis
The textarea tag is an HTML tag that we often use....
Simple implementation method of two-way data binding in js project
Table of contents Preface Publish-Subscriber Patt...
Causes and solutions for front-end exception 502 bad gateway
Table of contents 502 bad gateway error formation...
Detailed explanation of gcc command usage under Linux system
Table of contents 1. Preprocessing 2. Compilation...
How to create a Pod in Kubernetes
Table of contents How to create a Pod? kubectl to...
How to install and configure MySQL and change the root password
1. Installation apt-get install mysql-server requ...
MySQL FAQ series: When to use temporary tables
Introduction to temporary tables What is a tempor...
Simple usage examples of MySQL custom functions
This article uses examples to illustrate the usag...
The pitfalls of deploying Angular projects in Nginx
Searching online for methods to deploy Angular pr...
Design a data collector with vue
Table of contents Scenario Core Issues Status mon...