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 8.0.11-Winxp64 (free installation version) configuration tutorial
1. Unzip the zip package to the installation dire...
Causes and solutions for MySQL too many connections error
Table of contents Brief summary At noon today, th...
Mysql 5.6 "implicit conversion" causes index failure and inaccurate data
background When performing a SQL query, I tried t...
Summary and practice of javascript prototype chain diagram
Table of contents Prototype chain We can implemen...
Deleting files with spaces in Linux (not directories)
In our daily work, we often come into contact wit...
Implementing add, delete, modify and query operations on MySQL based on sqlalchemy
Demand scenario: The boss asked me to use the cra...
Detailed explanation of the problem of mixed use of limit and sum functions in MySQL
Preface Today, after synchronizing the order data...
Solution to define the minimum height of span has no effect
The span tag is often used when making HTML web pa...
Comparison of CSS shadow effects: drop-Shadow and box-Shadow
Drop-shadow and box-shadow are both CSS propertie...
Complete steps to reset the root user password in mysql8
Preface Recently, many new colleagues have asked ...
Detailed explanation of the use of Arguments object in JavaScript
Table of contents Preface Basic Concepts of Argum...
html option disable select select disable option example
Copy code The code is as follows: <select> ...
Does the website's text still need to be designed?
Many people may ask, does the text on the website...
Facebook's nearly perfect redesign of all Internet services
<br />Original source: http://www.a-xuan.cn/...
The connection between JavaScript constructors and prototypes
Table of contents 1. Constructors and prototypes ...