My webpage contains a large table that has a delay in rendering completely. The initial view of the table shows up almost instantly, but once fully loaded, an extra line is added to the first header cell (th), causing the entire table to shift down and leading users to click in unexpected places. I am trying to add this extra line using inline styling for the first th, but I can't seem to figure out how to do it.
I've attempted to use th:after as it gets replaced after rendering, making it an ideal location to add the extra line. However, my efforts have been unsuccessful so far. It seems like modifying th:after with inline CSS is not supported, and I might need to assign an id to the first th anyway.
I tried some testing on https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table. Following the provided code snippet did not create a new line, at least not in Chrome 65.
<head><style>
th:after{content:"1<p>2</p>3<div>4</div>\a5<br>6";}
</style></head>
Inserting a space in the code snippet results in a new line due to wrapping effects, but when zoomed out, it goes back to one line.
Thank you.
Additional information:
I experimented with adjusting padding-bottom values, but the height was inconsistent across different browsers. A value of 1.4em seemed close, but it appeared slightly too large in Chrome on Windows and slightly too small in Chrome on Linux.
The solution provided by Mr Lister works perfectly if used with <!DOCTYPE html>; however, all my pages are based on
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">Therefore, I would like to know if there is an HTML 4.01 Transitional method to achieve the desired effect?
A minor update:
If I append the word test after the two instances of \0A in Mr Lister's solution, it correctly displays two lines below in Firefox. This confirms that adding content to the :after pseudo-element is functioning correctly, although the two \0A only appear when accompanied by text (a space yields no result, and HTML is displayed literally).
Update with resolution:
The reason why using em units failed is due to variations in font heights between different systems and browsers. As fonts differ, a fixed height will never be consistent. To overcome this issue, I opted to place invisible characters in the final result:
<script>
newStyle=document.createElement('style');
newStyle.type='text/css';
newStyle.innerHTML="span.ph{visibility:hidden;}";
document.getElementsByTagName("head")[0].appendChild(newStyle);
</script>
<table>
<tr>
<th>This is a th<span class='ph'><br>▴</span></th>
</tr>
<tr>
<td>This is a td</td>
</tr>
</table>
<script>
newStyle.innerHTML='span.ph{display:none;}';
</script>Appreciation to everyone who assisted me with this issue!