A display:table Trick

When a border is put under an HTML header tag, the border extends all the way across the content width. The same with a border under other HTML content tags.

Here is a header tag (<h3>) with a CSS border-bottom:3px double #999; definition to serve as an illustration.

My Text

That may be what the page designer wants.

However, if border only under the text is preferred, then display:table; can be added to the style.

Here is an illustration with the border only under the text, not extended all the way across.

My Text

Unless constrained, the box that contains the header extends all the way across. The display:table; CSS definition constrains the box like it would if the header was within an HTML table. The width of the box is the width occupied by the text.

Here is the source code of the two examples above.

<h3 style="border-bottom:3px double #999;">My Text</h3>

<h3 style="display:table; border-bottom:3px double #999;">My Text</h3>

For the second illustration, the CSS display:table; definition was added to the style.

The display:table; trick can be used for any type of border under, over, or around HTML containers — header, code box div, paragraph, …

(This content first appeared in Possibilities newsletter.)

Will Bontrager