I'm creating 3 tables.
<table id="first">
<tr>
<td>
1. CAPTION
</td>
</tr>
<tr>
<td>
<table id="second">
<tr>
<td>
2. CAPTION
</td>
</tr>
<tr>
<td>
<img src="" width="100" height="100" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table id="third">
<tr>
<td>
3. CAPTION
</td>
</tr>
<tr>
<td>
<img src="" width="100" height="100" />
</td>
</tr>
</table>
</td>
</tr>
</table>
I want to add 10px padding (padding-top:10px) for the main table td elements.
#first tr td
{
padding-top: 10px;
padding-left: 0pt;
}
But this padding is adding to inner tables td elements.
How can i prevent to pass padding-top setting to the inner tables?
Use #first > tr > td.
It means "a td that is a direct child of a tr that is a direct child of an element with ID 'first'".
There are 2 solutions.
One (the hard way),
Specify padding values to the inner child elements so that it over-rides the parent style specifications.
Two (the above method),
Use '#first > tr > td'
but, it leads to cross browser comparability issues.
ie-6 does have a large share of the browser market.
Related
I am trying to apply a style to table data, but cannot get correct element since they Don't have classes or IDs. The tables have the same class name, and I have been able to isolate the correct table by using table:nth-of-type(2). I just can't figure out how to string together the selectors correctly to get the correct element.
The most recent thing I have tried is
div#esri_dijit_Legend_0_BuckQuery table:nth-of-type(2) > tbody > tr > td:first-child
Below is a diagram of the html
<table class="className">
<tbody>
<tr>
<td> Need to apply style to this element only
<td>
</tr>
</tbody>
</table>
<table class="className">
<tbody>
<tr>
<td> Don't want this element
<td>
</tr>
</tbody>
</table>
No errors, just nothing happens.The problem I am having is stringing together to two selectors correctly. I know there is a correct syntax for doing this.
Thanks
<style>
.className:first-of-type tr:first-child td:first-child
{
background:red;
}
</style>
<table class="className">
<tbody>
<tr>
<td> Need to apply style to this element only
<td>
<td>
There is no style on this element
<td>
</tr>
</tbody>
</table>
<table class="className">
<tbody>
<tr>
<td> Don't want this element
<td>
</tr>
</tbody>
</table>
I'm trying to make a centralize button in HTML e-mail. The tricky part here is my wish the button to be as wide as its content. The following code works perfect except in Outlook.
Here is the HTML:
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td></td>
<td style="width:1%;white-space:nowrap">
<a href="#" style="text-decoration:none">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" style="margin-top:16px;padding:8px 16px 8px 16px;background-color:#5091cd;border-radius:2px">
<a href="#" style="font-size:15px;letter-spacing:.04em;color:#ffffff;text-transform:uppercase;text-decoration:none;display:block;text-align:center;max-width:600px;overflow:hidden;text-overflow:ellipsis">
Go to platform
</a>
</td>
</tr>
</tbody>
</table>
</a>
</td>
<td></td>
</tr>
</tbody>
</table>
The expected result is:
The actual visualization:
Increasing the width of the td tag will help you adjust the content in one line.
<style="width:20%;white-space:nowrap">
if you want to take the full width of the container, make td width auto.
currently, td tag width is deciding how the content text will wrap.
I have 2 tables that I want to display side by side. So I set the display style property as display: inline-block. The problem is, on both tables, the columns are not taking the full width of the table. There is/are unseen cell(s). Interestingly this does not happen if I remove the DOCTYPE HTML line from the top of the page. The red marked area in the screenshot is my concern.
I have tried setting the font size to 0 of the "tr" and then add my desired font size to the "td". Also tried adding negative right padding/margin, but could not get it to work. Please suggest!
Empty cells at the right of table:
<table id="attn" style="display: inline-block; border: 1px solid green">
<tr>
<td >
Attn: Mr. HM. Mustafizur Rahaman
<footer>Vice President</footer>
</td>
</tr>
<tr>
<td>
Attn: Mr. HM. Mustafizur Rahaman
<footer>Vice President</footer>
</td>
</tr>
</table>
<table id="register" style="display: inline-block; border: 1px solid blue">
<caption id="cap_tab_1">Invoice<caption>
<thead>
<tr>
<td>No.</td>
<td colspan="2">SSL/16/02011</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 25%">
Day
</td>
<td style="width: 40%">
Month
</td>
<td style="width: 35%">
Year
</td>
</tr>
</tbody>
</table>
To fix the problem you can use display: inline-table instead of display: inline-block.
Explanation: <table> by default receives display property display: table. This is how it arranges rows/columns and determines how it'll be displayed on the page.
The moment you change that to display: inline-block, <table> looses its property to be a proper table according to CSS. So <tr> <td> etc. don't work as expected, as they shouldn't do inside a display: inline-block element. That's why display: inline-table solves the issue.
What about float instead of inline. Worked for me in IE, Chrome and Firefox.
<!DOCTYPE html>
<table id="attn" style="float:left; border: 1px solid green">
<tr>
<td >
Attn: Mr. HM. Mustafizur Rahaman
<footer>Vice President</footer>
</td>
</tr>
<tr>
<td>
Attn: Mr. HM. Mustafizur Rahaman
<footer>Vice President</footer>
</td>
</tr>
</table>
<table id="register" style="float:left; border: 1px solid blue">
<caption id="cap_tab_1">Invoice<caption>
<thead>
<tr>
<td>No.</td>
<td colspan="2">SSL/16/02011</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 25%">
Day
</td>
<td style="width: 40%">
Month
</td>
<td style="width: 35%">
Year
</td>
</tr>
</tbody>
</table>
I have the following html structure where I am displaying some details inside an html table.
<table cellspacing="15">
<tr>
<td>
<img src="Images/user1.png" />
<label>
User</label>
</td>
<td>
John
</td>
</tr>
<tr>
<td>
<img src="Images/version1.png" />
<label>
Old ID</label>
</td>
<td>
345345
</td>
</tr>
<tr>
<td>
<img src="Images/version3.png" />
<label>
New ID</label>
</td>
<td>
367976
</td>
</tr>
</table>
I want to add margin-top to the image so that the image will be shifted downward by some 3 or 4 pixel but the CSS is not having any effect. Please help.
Also I found that cellspacing is not a valid attribute in HTML5. Any alternate property to achieve the same effect.?
Adding a negative bottom margin to your image
(I generally avoid using negative margins as much as possible, but in this case it's a quick fix and won't effect the text next to it) :
td img {
margin-bottom:-4px;
}
Its working for me.. Anyhow you can try like this LINK, if you want to place img and text in same line
CSS:
td,td img {
line-height:28px;
vertical-align:middle;
}
Alternative for cellspacing is
table {
border-collapse: separate;
border-spacing: 15px;
}
Aligning image:
You can use vertical-align:middle.
See DEMO here.
Margin-top should work correctly, but it probably moves down tha label too.
Possible solution is to use positioning, so:
img {position: relative; top: 4px;}
you can do this.
Just remove <lable> tag & add valign="top" in <td>
<table cellspacing="15">
<tr>
<td valign="top">
<img src="Images/user1.png" />
User
</td>
<td>
John
</td>
</tr>
<tr>
<td valign="top">
<img src="Images/version1.png" />
Old ID
</td>
<td>
345345
</td>
</tr>
<tr>
<td valign="top">
<img src="Images/version3.png" />
New ID
</td>
<td>
367976
</td>
</tr>
</table>
As you can see, I have two tables each inside two divisions . Here is jsFiddle example ! What I want to do is to change the background color of firstDiv's table first column and third column , secondDiv's table second column and fourth column , By CSS only :)
<div id="firstDiv" style="float:left;margin-right:12px;">
<table width="200" border="1" cellpadding="8">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<div id="secondDiv">
<table width="200" border="1" cellpadding="8">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
You are looking at typical usage of nth-child with even/odd selector.
Following should do the trick.
#firstDiv td:nth-child(odd)
{
background-color:#cecece;
}
#secondDiv td:nth-child(even)
{
background-color:#cecece;
}
Fiddle
Another variation:-
#firstDiv td:nth-child(2n+1)
{
background-color:#cecece;
}
#secondDiv td:nth-child(2n+2)
{
background-color:#cecece;
}
If you want to specifically select 1st and 3 alone then you can use
#firstDiv td:nth-child(1),
#firstDiv td:nth-child(3) {
background-color:#cecece;
}
#secondDiv td:nth-child(2),
#secondDiv td:nth-child(4) {
background-color:#cecece;
}
See for support
Use :nth-child pseudo-selector. See the fiddle
Edited:
You can achive it by using nth-child also but all browser does not support nth-child
But the following approach is supported in all browsers..
CSS:
#firstDiv td,
#firstDiv td + td + td{
background-color:#cecece;
}
#firstDiv td + td,
#firstDiv td + td + td + td{
background-color:#fff;
}
#secondDiv td + td,
#secondDiv td + td + td + td{
background-color:#cecece;
}
#secondDiv td,
#secondDiv td + td + td{
background-color:#fff;
}
SEE DEMO
You will need to apply your CSS class to a relevant cell (e.g. 1st TD) of every row in the table. This way an impression will be given that entire column is of a different color. When setup like this if you change background color in CSS class definition - the change will affect all cells in the column at once.