What is the documented effect of `display: initial` on table rows?

Question

Why does tr { display:initial } cause the td colspan=5 to be ignored?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Test</title>
    <style>
        * { border-style: solid; }
    </style>
</head>
<body>
    <table>
        <tr> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> </tr>
        <tr> <td colspan="5">cs=5</td> </tr>
        <tr> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> </tr>
        <tr style="display: initial"> <td colspan="5">cs=5,d=i</td> </tr>
        <tr> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> </tr>
    </table>
</body>
</html>

"inherit" has the same wrong effect.

The real situation is attempting to use JavaScript to toggle the display between "none" and "initial".

A good practice is to toggle a class instead style ... to avoid this kind of issue ;) — G-Cyrillus, Jan 01 '21 at 19:17

score 1 · Accepted Answer · answered Jan 01 '21 at 19:14

1

Your solution is to toggle between none and table-row.

But good question! I can't explain why initial doesn't work as expected.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Test</title>
    <style>
        * { border-style: solid; }
    </style>
</head>
<body>
    <table>
        <tr> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> </tr>
        <tr> <td colspan="5">cs=5</td> </tr>
        <tr> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> </tr>
        <tr style="display: table-row"> <td colspan="5">cs=5,d=i</td> </tr>
        <tr> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> </tr>
    </table>
</body>
</html>

answered Jan 01 '21 at 19:14

Louys Patrice Bessette

33,375
6
36
64

"table-row" works great, thanks. But I'm still curious about why "initial" doesn't work. If "initial" doesn't set it to "table-row", what *does* it set it to? – Ray Butterworth Jan 01 '21 at 19:19
The result of `initial` looks like `inline` is applied. – Louys Patrice Bessette Jan 01 '21 at 19:21
Yes, chrome's "inspect" confirms that it does get reset to "inline". It sounds like a bug, but Firefox, Chrome, and MS Edge all do the same thing. – Ray Butterworth Jan 01 '21 at 19:34
2

@RayButterworth initial doesn't depend on the element, it only depends on the property and each property has ONE initial value defined in the Spec and it's inline for display – Temani Afif Jan 01 '21 at 19:36
@TemaniAfif, thanks, that makes sense. It's not reasonable, but at least I now understand. – Ray Butterworth Jan 01 '21 at 19:37
1

@RayButterworth *It's not reasonable* --> it's ;) what you are looking for is `revert`: https://stackoverflow.com/q/58691846/8620333 – Temani Afif Jan 01 '21 at 19:39
If you inspect, you will notice that `table-row` comes from the *user agent stylesheet*. – Louys Patrice Bessette Jan 01 '21 at 19:39

What is the documented effect of `display: initial` on table rows?

1 Answers1