How to display the border when td is empty

How to display the border when td is empty
Previously, I summarized how to use CSS to achieve the border + bordercolordark + bordercolorlight effects of a table. Then a netizen asked me why he wrote a similar CSS style, but the table border effect can only be seen normally under Opera, but nothing under IE.
I downloaded Opera 9 and saw that it was indeed the case. The reason is not complicated: because in IE (Firefox seems to be the same as IE), if the content of a td is empty, even if you set the height and width, the border style of the cell will not be displayed; Opera applies the style to render regardless of whether there is content or not. I encountered this problem right after I graduated. The section chief of the department came to ask me, and I told him: Just add it to each empty td. Whenever I encounter this problem in the future, I will use this simple, rough and effective method to solve it.
But today I made great efforts to study it a bit, and learned from Jiarry that the original CSS syntax allows us to change these default behaviors: using border-collapse:collapse; and empty-cells:show; can make the disappeared border appear.
class="test1": add border-collapse:collapse;
.test1{
border:1px solid #999999;
border-collapse:collapse;
width:60%
}
.test1 td{
border-bottom:1px solid #999999;
height:28px;
padding-left:6px;
}
class1 Here is the content Here is the content
class="test2": add border-collapse:collapse; and empty-cells:show;
.test2{
border:1px solid black;
border-collapse:collapse;
width:60%
}
.test2 td{
border-bottom:1px solid black;
height:28px;
padding-left:6px;
empty-cells:show;
}
class2 Here is the content Here is the content
class="test3": Without border-collapse:collapse; and empty-cells:show;
.test3{
border:1px solid #999999;
width:60%
}
.test3 td{
border-bottom:1px solid #999999;
height:28px;
padding-left:6px;
}
class3 Here is the content Here is the content

<<:  Examples of using MySQL covering indexes

>>:  Analysis and solution of the reason why overflow-y: visible; does not work in CSS

Recommend

MySQL implements increasing or decreasing the specified time interval for all times in the current data table (recommended)

The DATE_ADD() function adds a specified time int...

Common writing examples for MySQL and Oracle batch insert SQL

Table of contents For example: General writing: S...

MySQL 8.0.16 Win10 zip version installation and configuration graphic tutorial

This article shares with you the installation and...

Tips for importing csv, excel or sql files into MySQL

1. Import csv file Use the following command: 1.m...

MySQL 5.7.16 installation and configuration method graphic tutorial (Ubuntu 16.04)

How to install MySQL 5.7 in Ubuntu 16.04? Install...

Linux system dual network card binding configuration implementation

System version [root@ ~]# cat /etc/redhat-release...

Detailed explanation of Linux mpstat command usage

1. mpstat command 1.1 Command Format mpstat [ -A ...

7 ways to vertically center elements with CSS

【1】Know the width and height of the centered elem...

How to solve the problem of invalid left join in MySQL and the precautions for its use

Mysql left join is invalid and how to use it When...

A brief analysis of MySQL locks and transactions

MySQL itself was developed based on the file syst...

Pure CSS3 realizes the effect of div entering and exiting in order

This article mainly introduces the effect of div ...

Detailed tutorial on installing MySQL 5.7.20 on RedHat 6.5/CentOS 6.5

Download the rpm installation package MySQL offic...

Use of environment variables in Docker and solutions to common problems

Preface Docker can configure environment variable...

MySQL foreign key constraint disable and enable commands

Disabling and enabling MySQL foreign key constrai...

Common CSS Errors and Solutions

Copy code The code is as follows: Difference betw...