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

Problems encountered when installing mysql-8.0.19-winx64: Can't create directory 'xxxx\Database\'

mysql-8.0.19-winx64 downloaded from the official ...

Learn how to use JavaScript's new Element Traversal property to traverse child elements

Table of contents 1. ChildNodes attribute travers...

How to solve the problem of automatic package update in Debian system

I don't know when it started, but every time ...

How to get the intersection/difference/union of two sets in mysql

Common scenarios of MySQL: getting the intersecti...

Solutions to black screen when installing Ubuntu (3 types)

My computer graphics card is Nvidia graphics card...

Steps to deploy ingress-nginx on k8s

Table of contents Preface 1. Deployment and Confi...

Detailed explanation of how components communicate in React

1. What is We can split the communication between...

The correct way to migrate MySQL data to Oracle

There is a table student in the mysql database, i...

A brief analysis of MySQL's lru linked list

1. Briefly describe the traditional LRU linked li...

Introduction to the process of extending the boot partition in Kylin 4.0.2 (Ubuntu)

Table of contents Preface 1. Prepare new partitio...

How to install Docker on Windows Server 2016

Recently Microsoft released Windows Server 2016, ...

Sample code for implementing radar chart with vue+antv

1. Download Dependency npm install @antv/data-set...

MySQL optimization connection optimization

In the article MySQL Optimization: Cache Optimiza...

Examples of importing and exporting MySQL table data

This article describes the import and export oper...

Detailed explanation of the implementation of manual and automatic tracking of WeChat applet (Taro)

If every company wants to increase its user base,...