Questions about empty-cells in css-CSS Tutorial-php.cn

Questions about empty-cells in css

黄舟

Release： 2017-06-30 13:25:48

Original

1508 people have browsed it

I found that in css, when border-collapse is set to separate, the result of empty-cells is the same, and the values of show and hide are the same. I hope Please give me some advice.

In the css2 standard
Syntax:

empty-cells : show | hide

Copy after login

Value:
show: Default value. Show border
hide : Hide border

Description:
Set or retrieve whether to display the border of the cell when the cell of table has no content.
This property only works when the borders of table rows and columns are independent (for example, when the border-collapse property is equal to separate).
The corresponding script feature is emptyCells.

This is a css2 standard that is not supported by IE. The effect can be displayed normally in Firefox. The demonstration code for the specific effect is as follows

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>table test</title>
<style>
#layout {}
.show {border: 1px solid #ff0000; border-collapse:separate; empty-cells: show;}
.hide {border: 1px solid #ff0000; border-collapse:separate; empty-cells: hide;}
</style>
</head>

<body>
<table id="layout">
  <tr>
    <td class="show">Cascading</td>
    <td class="show"></td>
  </tr>
  <tr>
    <td class="hide">Cascading</td>
    <td class="hide"></td>
  </tr>
 </table>
</body>
</html>

Copy after login

You can see that the empty form is displayed when showing It is displayed, and the empty form is hidden when hiding

The above is the detailed content of Questions about empty-cells in css. For more information, please follow other related articles on the PHP Chinese website!