In a two column table (where both columns are set to valign top and the text is set to text-align: baseline), if an image exists in the first row of the second column and the image height is taller than the text itself, the text in both columns is not aligned.
I want to add padding-top dynamically to the first column when an image exists in the first row of the second column. If the window is resized and the image is no longer in the first row (or a new image is pushed into the first row) the padding-top of the text in column 1 should automatically update to ensure the baseline text lines up across both columns.
<html>
<head>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/script.js"></script>
<link rel="stylesheet" type="text/css" href="styles/style.css" />
</head>
<body>
<table>
<tr>
<td style="vertical-align:top"><p class="tabhead">Note:</p></td>
<td style="vertical-align:top"><p class="tabtext">This is text and - z0mg no, not an image!<img src=".png" /> what will we do?<br />Save us!</p></td>
</tr>
</table>
</body>
</html>
stylesheet
.tabhead
{
display: block;
vertical-align: top;
font-family: "Tahoma", verdana, arial, helvetica, sans-serif;
font-style: normal;
font-variant: normal;
font-weight: bold;
font-size: 9pt;
}
.tabtext
{
font-family: "Tahoma", verdana, arial, helvetica, sans-serif;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 9pt;
vertical-align: baseline;
}
In a two column table (where both columns are set to valign top and the text is set to text-align: baseline), if an image exists in the first row of the second column and the image height is taller than the text itself, the text in both columns is not aligned.
I want to add padding-top dynamically to the first column when an image exists in the first row of the second column. If the window is resized and the image is no longer in the first row (or a new image is pushed into the first row) the padding-top of the text in column 1 should automatically update to ensure the baseline text lines up across both columns.
<html>
<head>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/script.js"></script>
<link rel="stylesheet" type="text/css" href="styles/style.css" />
</head>
<body>
<table>
<tr>
<td style="vertical-align:top"><p class="tabhead">Note:</p></td>
<td style="vertical-align:top"><p class="tabtext">This is text and - z0mg no, not an image!<img src="http://files.softicons.com/download/web-icons/minicons-numbers-icons-by-icojam/png/16x16/blue/025.png" /> what will we do?<br />Save us!</p></td>
</tr>
</table>
</body>
</html>
stylesheet
.tabhead
{
display: block;
vertical-align: top;
font-family: "Tahoma", verdana, arial, helvetica, sans-serif;
font-style: normal;
font-variant: normal;
font-weight: bold;
font-size: 9pt;
}
.tabtext
{
font-family: "Tahoma", verdana, arial, helvetica, sans-serif;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 9pt;
vertical-align: baseline;
}
2 Answers
Reset to default 12To make it a bit easier, let's add an id="column_1" attribute on your first td element in the table.
$(document).ready(function()
{
window.setInterval("update_tbl_padding()", 100);
}
function update_tbl_padding()
{
//if column 1 has either a direct or indirect img element as a descendant
//if you wanted it to be a direct child element the selector would be
//$("#column_1 > img")
if($("#column_1 img").size() >= 1)
{
//just an example
var pad_top_val = "5px";
$("#column_1").css("padding-top", pad_top_val);
}
//since you're checking to see if a new image is pushed in, I'm guessing you
//would want to check to see if its taken out too...hence this else clause
else
{
var pad_top_default_val = "0px";
$("#column_1").css("padding-top", pad_top_default_val);
}
}
haven't checked the code for synthax errors or anything but it should be pretty easy to follow.
create style as below
table.padtop120 {
padding-top: 120px;
}
and in javascript add below statement for you table or row id as below
<script>
$( document ).ready(function() {
$("#tableid").addClass('padtop120');
});
</script>
it'll be applied dynamically