The table has two rows and one column. Each field has a background image (50px height) and another image for the hover effect, which is the first field 100px and in secound 50px.
My question has to do with this effect. When you hover on the first field to show an image of 100ps, which covers the second field without moving the table?
I tried this but it only expands height of the first field without cover second field.
<html>
<head>
<style>
table {border: none;}
.one:hover {background-image: url('1.jpg'); height: 100px; }
.two:hover { background-image: url('2.jpg');}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0">
<tr style="background: url(td-one.jpg);" width="200" height="50" >
<td class = "one">Firstname</td>
</tr>
<tr style="background: url(td-two.jpg);" width="200" height="50">
<td class = "two" >Lastname</td>
</tr>
</table>
</body>
</html>
The <td> will never break out of the <tr> structure (row height), so it will never cover the cell below it. You will need to add a <div> inside your cells for each, .one and .two.
Then changing the height of the <div> and playing around with float:left on this <div> might render what you want.
Related
I would like to know how can I make my text be aligned and centered the same way in every cell. Because if you see there is a slight difference between the first cell who got a link just under . I would my title to be on the same line without disturbing the responsive side and also the "same size cells" side (thanks to the table layout)
$(document).ready(function(){
$(".toggler").click(function(e){
e.preventDefault();
$('.cat'+$(this).attr('data-prod-cat')).toggle();
});
});
td{
display:block;
width:auto;
border:1px dotted red;
background-color:red;
color:white;
margin-bottom:10px;
}
#media only screen and (min-width: 70em) {
td{
display:table-cell;
border:1px dotted red;
background-color:red;
color:white;
margin-bottom:0px;
}
}
p{font-family:'Varela Round';font-weight:bold;text-align:center;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<table style="table-layout: fixed; width:100%" width="100%" cellpadding="0" cellspacing="5">
<tbody>
<tr>
<td><table>
<tr><td><p>SOCIÉTÉS: 230</p></td></tr><tr><td>+ En savoir plus</td></tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 90</td></tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100MK€: 120</td></tr>
</tr>
</table>
</td>
<td><p>CONTACT</p></td>
<td><p>EMAIL NOMINATIF</p></td>
<td><p>OPT OUT</p></td>
<td><p>LIGNES DIRECTES/MOBILES</p></td>
</tr>
</tbody>
</table>
What you can do is just the element td to the css to have the text-align property as well:
CSS:
p, td{
font-family:'Varela Round';
font-weight:bold;
text-align:center;
}
Also just a side note you for your js if you want to run your js code when the DOM is loaded jquery docs does not suggest you that document ready function instead they suggest:
JS
$(function() {
$(".toggler").click(function(e){
e.preventDefault();
$('.cat'+$(this).attr('data-prod-cat')).toggle();
});
});
Jquery Docs: https://api.jquery.com/ready/
I am storing old html markup in my database, tracking changes, and then trying to render the diff using Differ and the :html format option.
The following code is successfully generated:
<table>
...
<tr>
<th style="width:60px; text-align:left;">
Owner:
</th>
<del class="differ">
<td>
<span id="someID">Previous Owner Name</span>
</td>
</del>
<ins class="differ">
<td>
<span id="someID">Current Owner Name</span>
</td>
</ins>
</tr>
...
</table>
Notice the <del> and <ins> tagged elements.
If I view the source, it looks fine.
But because apparently this would disrupt the table layout, all browsers seem to move these new elements to before the table. When I inspect the element, I get the following:
<del class="differ"> </del>
<ins class="differ"> </ins>
<table>
...
<tr>
<th style="width:60px; text-align:left;">
Owner:
</th>
<td>
<span id="someID">Previous Owner Name</span>
</td>
<td>
<span id="someID">Current Owner Name</span>
</td>
</tr>
...
</table>
I tried writing a custom Rails view helper to replace each <ins> and <del> with a <span>, but the same thing happens.
Is there a way to style the table using elements like I am trying to do, or am I going to have to walk the dom and apply styles to each appropriate <td> using javascript? I cannot replace the tables in the beginning because I don't control the source.
Thanks to David & Steve for confirming the issue, I was able to resolve this specific case by translating the <ins> and <del> tags into classes, and applying them to each child element using Nokogiri prior to rendering the view.
I created a table_safe helper as follows:
def table_safe(markup)
parsed = Nokogiri.parse(markup)
parsed.css('ins').children().each do |el|
if el['class']
el['class'] = el['class'] << ' ins'
else
el['class'] = 'ins'
end
end
parsed.css('del').children().each do |el|
if el['class']
el['class'] = el['class'] << ' del'
else
el['class'] = 'del'
end
end
parsed.to_s
end
This can obviously be refactored, but it solves the problem. Ideally I could modify the :html formatting option in the Differ gem so that it inserts the tags inside of the first nested element if that element itself has not changed. I'm not sure why this isn't the default functionality, but it is outside the scope of my capabilities.
Why not add a CSS stylesheet to copy the style class differ to all TD elements?
<link rel="stylesheet" type="text/css" href="some.css" />
And then a definition like this in the stylesheet:
td {
padding: 15px;
background-color: gold;
text: black;
font-family: Courier, "Courier New", Tahoma, Arial, "Times New Roman";
border: 1px solid black;
/* Some other properties here...... */
}
And a sample HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Anything</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="ja.css" />
</head>
<body bgcolor="white" text="black">
<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</body>
</html>
Working example:
http://pastehtml.com/view/ckdf6rxo3.html
Maybe this W3Schools link will be useful:
CSS Styling Tables
I use pisa xhtml2pdf to convert an html code to pdf.
I have a problem! pisa did not apply some style to my table such as height and vertical-align
<table style='overflow: hidden;' border='1' cellpadding='0' cellspacing='0'
width="300px">
<tr style="background-color : yellow; height:100px;">
<td style="color: red; height:100px; vertical-align: middle;">
A lot of data
</td></tr></table>
but after converting this html to pdf, height of table tds and vertical-align did not correct!
Please help me.
You need to specify a height (height:100px;) to the table too example for you :
<table style='overflow: hidden; height:100px;' border='1' cellpadding='0' cellspacing='0' width="300px">
<tr style="background-color : yellow;height:100px;">
<td style="color: red; height:100px; vertical-align: middle;">
<!-- A lot of data -->
</td>
</tr>
</table>
I managed to get the height of the cell with this hack:
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="100%" style="border: 1px solid #000"><!-- content goes here --></td>
<td width="0"><br><br><br><br><br></td><!-- special cell to keep the height of the table -->
</tr>
</table>
The second cell is completely invisible and the code above draws a box of 100% in width and the height is defined by amount of <br>s in the second cell or amount of the text in the first cell (whichever comes longer)
I've spent two weeks to find any solution for this, but can't came across. If you float tables after each, there will be a one pixel gap in Microsoft Outlook 2007/2010, which uses the Microsoft Word 2007 HTML render engine:
I'd thank you any working solution – which is not to put the tables in separated <td>'s.
Here is the HTML code for reproduce it:
<html>
<head>
<title>Outlook 2007/2010 horizontal gap</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
table { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
</style>
</head>
<body bgcolor="#000000">
<table bgcolor="#ffff00" align="left"><tr><td> </td></tr></table>
<table bgcolor="#ffff00" align="left"><tr><td> </td></tr></table>
</body>
</html>
What I've tried so far:
display: inline-table; instead of align="left"
searched for other relevant mso- CSS attributes with no luck
removed whitespaces between <table> elements
border-collapse: collapse and border-spacing: 0
adding border: 1px solid red; will remove gap but increase the width of the tables
other display's, padding and margin
non related or deprecated html attributes (rules, frame, border, etc.) on <td> and/or <table>
Fun factor:
If you put these two tables into a table, the extra gap's width will increase to 2 pixels.
Here is an example of how to float tables. You need a combination of border="1" and mso-table css in there to get rid of the 1px gap. See example:
<table bgcolor="#454545" width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td width="5%"></td><td align="center" width="95%">
<div align="left" style="float: left; padding: 0px; margin:0px;">
<table border="1" bordercolor="#959595" cellpadding="0" cellspacing="0" align="left" style="padding: 0px; margin:0px; mso-table-lspace: -1pt; mso-table-rspace: -1pt; ">
<tr>
<td width="318" bgcolor="959595">table 1
</td>
</tr>
</table>
</div>
<div align="left" style="float: left; padding: 0px; margin:0px;">
<table border="1" bordercolor="#959595" cellpadding="0" cellspacing="0" align="left" style="padding: 0px; margin:0px; mso-table-lspace:-1pt; mso-table-rspace: -1pt; ">
<tr>
<td width="318" bgcolor="959595">table 2
</td>
</tr>
</table>
</div>
</td></tr></table>
Try with table border="0" cellspacing="0" cellpadding="0" on each of the two table's. If i understand your issue correct this should solve it :)
We might be SOL here. I am also working on email formats compatible with Outlook 2007/10. If my readings are correct, Outlook 2007/10/13 do not support border-spacing for tables, which is probably what's giving you that spacing issue.
Refs:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
Guide to CSS support in email | Campaign Monitor
This document have some unexpected layout in IE6 (tests in IE tester.):
double margin between .receptacle's left edge and .albuminfo box left edge
table not adaptive width(in .albumvocal box)
Who can help solve problems? If you have another method that sets table have 100% width in .albumvocal box please tell me.
--------------------------------------original html---------------------------------------
<body>
<div id="receptacle">
<div class="albuminfo">
<img alt="title" src="middle_special_329225.jpg" />
<p>album info</p>
<p>album info</p>
<p>album info</p>
<p>album info</p>
</div>
<div class="albumvocal">
<div style="width:100%">
<h2>album name</h2>
<table width="100%">
<thead>
<tr>
<th>vocal</th>
<th>artist</th>
<th>zone</th>
<th>style</th>
</tr>
</thead>
<tr>
<td>vocal1</td>
<td>artist1</td>
<td>zone1</td>
<td>style1</td>
</tr>
<tr>
<td>vocal2</td>
<td>artist2</td>
<td>zone2</td>
<td>style2</td>
</tr>
</table>
</div>
</div>
<div class="albumeaddinfo">
</div>
</div>
</body>
----------------------------------------style---------------------------------------------
#receptacle{
width:958px;
margin:0 auto;
border:1px solid #F00;}
.albuminfo img{
width:190px;
height:190px;}
.albuminfo{
text-align:center;
float:left;
padding:1.5em;
margin:2em 0 0 1%;
border:1px solid #00F;}
.albumvocal{
margin:2em 0 1em 30%;
padding:1em;
border:1px solid #F0F;}
.albumeaddinfo{
clear:both;}
table {
height:1%;
zoom:1;
width:100%;
border: solid 1px #e8eef4;
border-collapse: collapse;
}
The double margin problem is almost certainly IE6's well known "Double Margin on floats" bug.
See here for a detailed discussion of the bug: http://www.positioniseverything.net/explorer/doubled-margin.html
This is a well known bug, you can work around it by maybe using padding instead of margin, or additional markup, but the page linked above also details a "fix" which should solve the problem:
Add display:inline to the styles for .albuminfo.
This is an IE6 hack, and is actually poor code in general because a floated element should not have a display property. But it will solve the bug in IE6, and shouldn't break your code in other browsers (but do test it to make sure!), because floated elements are always displayed as blocks so the inline style will be ignored.
The second problem with the table width I can't help with immediately (I don't have IE6 to hand on this machine, and I'm not going to install it just for this), but I note you have both CSS width:100% and the width="100%" attribute on the table. You shouldn't need both, even for IE6 and certainly not for any other browser; drop the attribute.
Finally, do you have a specific requirement to fully support IE6? If you do, then I feel very sorry for you. But if not, or if you can get away with a site that works but doesn't quite look perfect, then I would suggest ignoring these problems. Very few people are still using IE6, and those that are using it are well used to sites looking rubbish.