Issue
I wrote some CGI script that outputs a table with variable information.
One of the table cell can contain multiple strings, and I put each on a separate line by joining the strings with <br/>
.
Then I thought it would improve readability if every second of such lines would have a different background color (I did that for complete table rows successfully).
So before joining them with <br/>
I wrapped the strings in a <span>
with alternating class names (like re
for "row even" and ro
for "row odd").
That worked, but the background end where the text ends, and not where the table cell ends.
Is it possible to set the background for the whole <td>
line without putting a <table>
inside the <td>
?
The current output looks like this:
And the corresponding HTML fragement is (most styling is done via CSS):
<table class="inf-tbl" summary="Server Information" title="Server Information" border="1"><caption class="inf-tbl">Server Information</caption>
<thead><tr><th colspan="2" class="inf-th">(redacted)</th></tr> <tr><th class="inf-th">Kategorie</th> <th class="inf-th">Eigenschaften</th></tr></thead>
<tbody><tr><th class="inf-th">TLS Cipher</th><td class="inf-td">AES256-GCM-SHA384</td>
</tr> <tr><th class="inf-th">Unterstützte LDAP-Versionen</th><td class="inf-td"><span class="re">3</span></td>
</tr> <tr><th class="inf-th">Unterstützte Controls</th><td class="inf-td"><span class="ro">MANAGEDSAIT</span></td>
</tr> <tr><th class="inf-th">Unterstützte Features</th><td class="inf-td"><span class="re">ALL_OPATTS</span><br><span class="ro">MODIFY_INCREMENT</span></td>
</tr> <tr><th class="inf-th">Unterstützte Extensions</th><td class="inf-td"><span class="re">PASSWORD_MODIFY</span><br><span class="ro">START_TLS</span><br><span class="re">WHO_AM_I</span></td>
</tr> <tr><th class="inf-th">Unterstützte SASL-Mechanismen</th><td class="inf-td"><span class="ro">DIGEST-MD5</span><br><span class="re">GSSAPI</span></td>
</tr></tbody>
</table>
Revision 1
With the suggestions from https://stackoverflow.com/a/74447412/6607497 I got this (note: I tweaked the left columns also to apply alternating background):
The updated HTML code is this (re
and ro
are "row even" and "row odd", and l
means "apply to whole 'line'"; there are some other classes that can be ignored):
<table title="Server Information" summary="Server Information" class="inf-tbl" border="1"><caption class="inf-tbl">Server Information</caption>
<thead><tr><th colspan="2" class="inf-th">(redacted)</th></tr> <tr><th class="inf-th">Kategorie</th> <th class="inf-th">Eigenschaften</th></tr></thead>
<tbody><tr><th class="inf-th">TLS Cipher</th><td class="inf-td">AES256-GCM-SHA384</td>
</tr> <tr><th class="inf-th ro">Unterstützte LDAP-Versionen</th><td class="inf-td"><span class="l ro">3</span></td>
</tr> <tr><th class="inf-th re">Unterstützte Controls</th><td class="inf-td"><span class="l re">MANAGEDSAIT</span></td>
</tr> <tr><th class="inf-th ro">Unterstützte Features</th><td class="inf-td"><span class="l ro">ALL_OPATTS</span><br><span class="l re">MODIFY_INCREMENT</span></td>
</tr> <tr><th class="inf-th re">Unterstützte Extensions</th><td class="inf-td"><span class="l ro">PASSWORD_MODIFY</span><br><span class="l re">START_TLS</span><br><span class="l ro">WHO_AM_I</span></td>
</tr> <tr><th class="inf-th ro">Unterstützte SASL-Mechanismen</th><td class="inf-td"><span class="l re">DIGEST-MD5</span><br><span class="l ro">GSSAPI</span></td>
</tr></tbody>
</table>
Finally there's the relevant CSS (I'm not good in CSS, obviously):
table {
background-color: white; color: black; margin-top: 1ex; margin-bottom: 1ex
}
td { padding-left: 1mm; padding-right: 1mm }
caption { caption-side: bottom; background-color: #c7ffc7 }
.l { display: inline-block; width: 100%; box-sizing: border-box;} /* fill whole line in cell */
.re, .ef-re, .ds-re { background-color: #e0e3e4 } /* 90% grey */
.ro, .ef-ro, .ds-ro { background-color: #ffffff }
table.inf-tbl { border-style: solid; border-width: thin;
border-collapse: collapse }
.inf-td { padding-left: 0.5ex; padding-right: 0.5ex; font-family: sans-serif;
vertical-align: top
}
.inf-th { padding-left: 0.5ex; padding-right: 0.5ex; font-weight: bolder;
font-family: sans-serif; text-align: left; vertical-align: top
}
Solution
Just add the following to your CSS. It makes the span behave as an inline block that you can then set the width to the cell width.
.re,
.ro {
width: 100%;
display: inline-block;
}
.re {
background-color: gray;
}
.ro {
background-color: yellow;
}
<table class="inf-tbl" summary="Server Information" title="Server Information" border="1">
<caption class="inf-tbl">Server Information</caption>
<thead>
<tr>
<th colspan="2" class="inf-th">(redacted)</th>
</tr>
<tr>
<th class="inf-th">Kategorie</th>
<th class="inf-th">Eigenschaften</th>
</tr>
</thead>
<tbody>
<tr>
<th class="inf-th">TLS Cipher</th>
<td class="inf-td">AES256-GCM-SHA384</td>
</tr>
<tr>
<th class="inf-th">Unterstützte LDAP-Versionen</th>
<td class="inf-td"><span class="re">3</span></td>
</tr>
<tr>
<th class="inf-th">Unterstützte Controls</th>
<td class="inf-td"><span class="ro">MANAGEDSAIT</span></td>
</tr>
<tr>
<th class="inf-th">Unterstützte Features</th>
<td class="inf-td"><span class="re">ALL_OPATTS</span><br><span class="ro">MODIFY_INCREMENT</span></td>
</tr>
<tr>
<th class="inf-th">Unterstützte Extensions</th>
<td class="inf-td"><span class="re">PASSWORD_MODIFY</span><br><span class="ro">START_TLS</span><br><span class="re">WHO_AM_I</span></td>
</tr>
<tr>
<th class="inf-th">Unterstützte SASL-Mechanismen</th>
<td class="inf-td"><span class="ro">DIGEST-MD5</span><br><span class="re">GSSAPI</span></td>
</tr>
</tbody>
</table>
Update 16 Nov 2022 to ensure padding is respected just add box-sizing:border-box. Example with some random padding added.
.re,
.ro {
box-sizing: border-box;
width: 100%;
display: inline-block;
}
.re {
padding-left: 5px;
padding-right: 8px;
background-color: gray;
}
.ro {
padding-left: 10px;
padding-right: 15px;
background-color: yellow;
}
<table class="inf-tbl" summary="Server Information" title="Server Information" border="1">
<caption class="inf-tbl">Server Information</caption>
<thead>
<tr>
<th colspan="2" class="inf-th">(redacted)</th>
</tr>
<tr>
<th class="inf-th">Kategorie</th>
<th class="inf-th">Eigenschaften</th>
</tr>
</thead>
<tbody>
<tr>
<th class="inf-th">TLS Cipher</th>
<td class="inf-td">AES256-GCM-SHA384</td>
</tr>
<tr>
<th class="inf-th">Unterstützte LDAP-Versionen</th>
<td class="inf-td"><span class="re">3</span></td>
</tr>
<tr>
<th class="inf-th">Unterstützte Controls</th>
<td class="inf-td"><span class="ro">MANAGEDSAIT</span></td>
</tr>
<tr>
<th class="inf-th">Unterstützte Features</th>
<td class="inf-td"><span class="re">ALL_OPATTS</span><br><span class="ro">MODIFY_INCREMENT</span></td>
</tr>
<tr>
<th class="inf-th">Unterstützte Extensions</th>
<td class="inf-td"><span class="re">PASSWORD_MODIFY</span><br><span class="ro">START_TLS</span><br><span class="re">WHO_AM_I</span></td>
</tr>
<tr>
<th class="inf-th">Unterstützte SASL-Mechanismen</th>
<td class="inf-td"><span class="ro">DIGEST-MD5</span><br><span class="re">GSSAPI</span></td>
</tr>
</tbody>
</table>
Answered By - Adam
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.