HTML+CSS merge table border sample code

HTML+CSS merge table border sample code

When we add borders to table and td tags, double borders are used by default, like this.

insert image description here

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:

insert image description here

Look at the effect again:

insert image description here

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

How to test the maximum number of TCP connections in Linux

Preface There is a misunderstanding about the max...

Summary of several common ways to abbreviate javascript code

Table of contents Preface Arrow Functions Master ...

Implementation of nacos1.3.0 built with docker

1. Resume nacos database Database name nacos_conf...

Parameters to make iframe transparent

<iframe src="./ads_top_tian.html" all...

Detailed explanation of the six common constraint types in MySQL

Table of contents Preface 1.notnull 2. unique 3. ...

Implementation of ssh non-secret communication in linux

What is ssh Administrators can log in remotely to...

Detailed explanation of the principle of Vue monitoring data

<body> <div id="root"> <...

MySQL 5.7.23 installation and configuration method graphic tutorial

This article records the installation tutorial of...

Why MySQL does not recommend deleting data

Table of contents Preface InnoDB storage architec...

Detailed explanation of slots in Vue

The reuse of code in vue provides us with mixnis....

Uncommon but useful tags in Xhtml

Xhtml has many tags that are not commonly used but...

How to enable remote access in Docker

Docker daemon socket The Docker daemon can listen...

The Complete Guide to Grid Layout in CSS

Grid is a two-dimensional grid layout system. Wit...

MySQL master-slave replication configuration process

Main library configuration 1. Configure mysql vim...

Mini Program to implement Token generation and verification

Table of contents process Demo Mini Program Backe...