Archived topic
Cannot set table cells height
5 replies · Started by Héctor on June 3, 2021
Hi. I'm trying to add a table design to my site using custom HTML. It works well if I paste it on a blank document, but when I use it on my Wordpress site cell heights are much bigger.
Here's the page where I'm using the code in Wordpress: https://pcgamia.com/prueba/
And here's the HTML code:
<table style="border-collapse: collapse; width: 100%; background-color: #0d1129;" border="0">
<tbody>
<tr>
<td style="width: 10%;"> </td>
<td style="width: 90%;" colspan="2">
<h3><span style="color: #ffffff; margin-top: 3px; margin-bottom: 3px;">Red Dead Redemption 2</span></h3>
</td>
</tr>
<tr>
<td style="width: 10%;"> </td>
<td style="width: 45%;" valign="middle"><img style="display: block; margin-left: 10px; margin-right: auto;" src="https://pcgamia.com/wp-content/uploads/2020/05/Red-Dead-Redemption-2-B.jpg" alt="Red Dead redemption 2" width="108" height="150" /></td>
<td style="width: 45%;" valign="top">
<p><span style="color: #ffffff;"><strong>Valoración:</strong></span></p>
<p style="text-align: left;"><span style="color: #ff7400; font-size: 70px;"><strong>9.5</strong></span></p>
</td>
</tr>
<tr>
<td style="width: 100%;" colspan="3">
<table style="border-collapse: collapse; width: 100%;" border="0">
<tbody>
<tr>
<td style="width: 5%;" colspan="4"> </td>
</tr>
<tr>
<td style="width: 5%;"> </td>
<td style="width: 25%;"><span style="color: #ffffff;"><strong>Gráficos y sonido</strong></span></td>
<td style="width: 65%;"><hr style="height: 8px; border-width: 0; background-color: #ff7400; width: 95%;" align="left" /></td>
<td style="width: 5%;"> </td>
</tr>
<tr>
<td style="width: 5%;"> </td>
<td style="width: 25%;"><span style="color: #ffffff;"><strong>Jugabilidad</strong></span></td>
<td style="width: 65%;"><hr style="height: 8px; border-width: 0; background-color: #ff7400; width: 90%;" align="left" /></td>
<td style="width: 5%;"> </td>
</tr>
<tr>
<td style="width: 5%;"> </td>
<td style="width: 25%;"><span style="color: #ffffff;"><strong>Historia</strong></span></td>
<td style="width: 65%;"><hr style="height: 8px; border-width: 0; background-color: #ff7400; width: 100%;" align="left" /></td>
<td style="width: 5%;"> </td>
</tr>
<tr>
<td style="width: 5%;" colspan="4"> </td>
</tr>
<tr>
<td style="width: 5%; text-align: center;" colspan="4"><a href="https://tidd.ly/2Rii39q" target="_blank"><button type="button">VER PRECIO</button></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>Hi Hector,
It's because of this CSS which adds margin top/bottom to the hr.
https://www.screencast.com/t/GcDDtE5A1Jf
Since your cache plugin is on, I can't see where the CSS comes from, but you can try this CSS to override it:
hr {
margin-top: 10px;
margin-bottom: 10px;
}Adding CSS: https://docs.generatepress.com/article/adding-css/
Thank you Ying!
That fixed the height issue. :)
If you don't mind I have another question: I have "table border" set to "0" but still it can be seen. Is there any way to override this CSS too?
Thanks in advance.
Try this one :)
td {
border-width: 0;
}Thank you again!
Marked as resolved. :)
You are welcome :)
