I am trying to figure out how to make this work. Shouldn't the background:red of the outer table's td overwrite all other ones? And why does this example end up with a yellow background although that's the element nested furthest down in the DOM?
<style type="text/css">
table, td, div {
height: 200px;
width: 400px;
}
</style>
<table class="outer" cellpadding="0" cellspacing="0">
<tr>
<td style="background: red">
<div style="overflow:auto;background:green">
<table class="inner" style="width:800px">
<tr>
<td style="background:yellow"></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
Here's a JSFiddle for this.
To wrap up... I am trying to overwrite the inner table cells' background color with a background in the parent div as well as the parent td of the outer table. Is that possible at all?
the background in the Td has the last say. so you technically can't do it with css alone. even if you put an !important in the div style it won't work.
anyways, you can probably fix that via js and replace the color of the td with another one.
bcz its css default behavior if u give style to parent tag than it automatically inherits by child html
if u want other css in child tag than u have to give style to that particular tag
which override ur parent style
The second td is always drawn above, and therefore over the top of, the background of the first td. As you are using the style attribute, which always takes precedence over any CSS applied in a style block or external CSS file, you will not be able to change this behaviour without resorting to JavaScript or moving the styles from the style attribute to a style block.
Using jQuery, you could achieve this with something similar to the following:
$('.inner td').css({
'background' : 'colour or image here'
});
Related
I've got a pretty regular HTML <table> with one cell that spans multiple rows via rowspan. Inside of this cell I've got a <div> that I want to occupy the entire height of the cell but for the life of me I can't seem to figure it out. It seems similar to this post which mentions this Chrome bug but also seems so simple that maybe I'm just not thinking clearly.
Here's a stripped down version of my HTML:
<table>
<tr>
<td class="a" rowspan="2"><div>A</div></td>
<td class="b"><div>B</div></td>
</tr>
<tr>
<td class="c"><div>C</div></td>
</tr>
</table>
And CSS:
td
{
vertical-align: top;
}
td.a div
{
background-color: #f00;
height: 100%;
}
And a JSFiddle. And here's what I'm getting and what I'm trying to get:
What's really weird is if I use Chrome's inspector to change the <div> to display: inline-block and then set it back to display: block it actually looks pretty much exactly how I want it to.
(And no, switching away from a table isn't an option for this project, there's other code not shown that requires that.)
Option 1
Simply add overflow:auto; to your div CSS
Demo Fiddle
td
{
vertical-align: top;
}
td.a div
{
background-color: #f00;
height: 100%;overflow:auto;
}
Option 2
Alternatively you'll need to define the height of your table in order for the child to be able to calculate what its 100% is 100% of.
Option 3
The only other way would be to set position:relative on the td elements then position:absolute for the child div
I cannot figure out this positioning problem in Firefox. It doesn't seem to follow the absolute positioning rule. Is there something I'm doing that shouldn't be done, but some browesers handle it and some don't?
JS Fiddle:
Original - http://jsfiddle.net/g9qzh/
Updated - http://jsfiddle.net/g9qzh/2/
Works in IE, Chrome, Safari, Opera
Here's the actual code. Let me know if I'm not following some kind of standard I don't know about.
HTML:
<table>
<tr>
<td>
<div id="three">Three</div>
<div id="two">Two</div>
</td>
<tr>
<tr>
<td>
<div id="three">Three</div>
<div id="two">Two</div>
</td>
<tr>
</table>
CSS:
#two {
position: absolute;
top: 0;
}
td {
position: relative;
}
My only clue is that there is some other value that I should assign to td that would cause it to work. Some other stackoverflow questions have mentioned Firefox misbehaving with this, but I haven't been able to find an answer. I tried assigning both top and left values of zero, but FF won't budge.
Change ID's to classes and also displaying it as blocks fixes it:
http://jsfiddle.net/GchWZ/
It is better and more "proper" to user an inner div though as quoted from this stack overflow post: Does Firefox support position: relative on table elements?
<td>
<div style="position:relative">
This will be positioned normally
<div style="position:absolute; top:5px; left:5px;">
This will be positioned at 5,5 relative to the cell
</div>
</div>
</td>
You are using IDs
IDs are unique. Use Classes if you want to reuse a style assignment.
The problem comes from how FF renders tables. If you set your TDs to display:inline-block; it should display correctly.
Try this:
<tr>
<td>
<div id="wrapper">
<div id="three">Three</div>
<div id="two">Two</div>
</div>
</td>
</tr>
<tr>
<td>
<div id="wrapper">
<div id="three">Three</div>
<div id="two">Two</div>
</div>
</td>
</tr>
and for css:
#two {
position: absolute;
top: 0px;
}
#wrapper {
position: relative;
}
Aside from the duplicate ID issue noted by Brandt, assigning positioning to table cells is dodgy at best - I'm surprised it works in any browsers. If you must use a table, wrap the elements you want to position in a div and assign the wrapper div position: relative:
<table>
<tr>
<td>
<div class="wrapper">
<div id="three">Three</div>
<div id="two">Two</div>
</div>
</td>
<tr>
</table>
CSS
#two {
position: absolute;
top: 0;
}
.wrapper {
position: relative;
}
In case you want to position stuff at the top and bottom of a cell, also in Firefox, I made it work doing the following mix of CSS and (unfortunately) jQuery.
Use a wrapper div (div.inner) inside your td which has position=relative style in the td. Inside the wrapper I added 2 divs which are to be positioned at the top and bottom of the cell.
Positioning at the top (class=interval-start) is for free, via CSS positioning.
Positioning the div.interval-end at the bottom is done via script, which adds the styling shown in the picture. With variable td-heights and the wrapper div being 0-height by default, you need a way to tell the element how far it should go to the bottom. The script is as follows:
$("table .inner .interval-end").each(function () {
$(this).css({top: ($(this).parent().parent().height() - 10) + "px"})
}).show()
I initially made the div.interval-end invisible, set the 'top' style, and then made it visible via jQuery show().
Hope this helps anybody trying to achieve the same. Let me know if there are better methods out there, specially if these methods do not require scripting. BTW: I tried setting the height style of the wrapper div.inner, but it messes with the table layout in Firefox.
There are legitimate reasons to use CSS display: table styling. It eliminates issues that display: block and display: inline-block do not address. These reasons occupy an entire chapter of a book on CSS styling so I won't go into them here. That same book also describes the problem of positioning within items with that display type. CSS 2.1 specs simply don't address the issue and Mozilla has chosen a course that ignores attempts to create a positioning context with those elements. CSS-table positioning is well established, mature methodology, and not "dodgy" - it just takes understanding of its limits - just like any other CSS element. For liquid layouts and other layouts where element size is variable or unknown it's indispensable for vertical spacing and positioning.
One suggestion in this thread has been presented - create a div within the "table-cell" element set to position: relative and use that for the positioning context. The other method is to embed another CSS table within that cell and use it to position elements within a grid. The third method is to wrap your CSS table within another item that creates a positioning context.
I have a external css for reset that apply to all table, td, div, etc..
In my website, there is a customer template that allow user to create their desire content in html.
When view this customer template in webpage, I don't want to apply above external css.
So I put this customer template content into a div, and trying to exclude this div and all childs of it from css.
Is it possible to write css selector to select all table, td, div, etc... which are not child of given div id?
Below is my testing html code and reset.css
The content of div customtemplate is dynamic enter by user.
User try border=1 to table, it apply all table cell to border 1 without reset.css.
But with reset css, there is no border appears.
My users are not html/css professional, so they will create simple html and expect to display as they write in their test page.
If their html not appear exactly the same for all browsers, it is up to them.
I have no responsible for it. I just need to display their html in div without reset.css.
Anyway to solve ?
<html>
<head>
<link href="reset.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="customtemplate">
<table border="1" cellpadding="10px">
<tr>
<td>abcd</td><td>def</td>
</tr>
<tr>
<td>hello</td><td>world</td>
</tr>
</table>
</div>
<br><br>
<table>
<tr>
<td>default</td><td>reset</td>
</tr>
<tr>
<td>style</td><td>using</td>
</tr>
</table>
</body>
</html>
table, td {
border: 0;
padding: 0;
}
The right way would be to define YOUR defaults for that div. The reset CSS helps you avoid the problems that are caused by different default values in browsers. So for that div with the given ID, you should define some sensible defaults, which are different from the defaults used on the site, but still can be expected to be the same default on every browser.
For example:
/* reset.css */
p { margin: 0; }
/* yourdefaults.css */
#yourdiv p { margin-bottom: 10px; }
Here's something I never thought I'd say: I have a problem in Firefox and Chrome, but it's working fine in IE!
It's very simple, but I don't understand why it doesn't work:
I have a table inside a cell, and I have style="text-align:right" on the cell, but the table is staying left in Firefox and Chrome (in IE it's obediently going to the right...). If I put align=right in the cell tag then it works, but I don't want to do that.
Code is basically:
<table width="1000" border="1" cellpadding="0" cellspacing="0">
<tr>
<td style="text-align:right">
<table border="1">
<tr><td>Hello</td><td>Hello 2</td></tr>
</table>
</td>
<td>Hello 2</td>
</tr>
</table>
I don't want the nested table to be width=100% or anything like that...
Could anyone please explain to me why it doesn't work, and how to fix it, and maybe why it works in IE but not Firefox or Chrome?
My guess is that Chrome and FF are actually the ones rendering it correctly. text-align probably isn't supposed to affect table elements. However, applying float:right to the table will do what you want.
I would like to add that the CSS way to align tables relative to its container is with the margin property.
You must add margin: 0 auto; if you'd like to align it to the center, or margin-left: auto; if you'd like to align it to the right.
As #maxedison says, text-align will work only with inline and inline-block elements, so the other solution is change your inner table to take some of those display values.
You also need to remember that text-align works from 'container-to-content', this means it is normally applied to a container to affect its content (applied to a p to affect its inline content such as the text within), and margin: 0 auto works from 'content-to-container', meaning that it's normally applied to a block element and affects its position related to its container (applied to a div to center it to its parent).
If you want to fix it (not with full functionality), you can write this:
table {
display: inline-block;
}
This makes your table able to be centered with text-align: center;, if applied to the parent element(s).
when you don't want the div to be floating, you may try this :
http://jsfiddle.net/NvEZ8/
<div style="text-align:right;">
<table style="display:inline-block">
<tbody>
<tr>
<td></td>
<td>one</td>
<td>two</td>
</tr>
</tbody>
</table>
</div>
It looks like text-align (with a DOCTYPE html) only affects inline-block in Chrome and not inline only element. Replacing inline-block by inline here and it doesn't work anymore on my Chrome
As it turns out I don't know CSS.
I ran into a brick wall after using Eric Meyer's CSS reset (http://meyerweb.com/eric/tools/css/reset/)
I have a table with this style
table.home_right_top, .home_right_top table, .home_right_top
{
background-color: #F2F2F2;
width: 100%;
padding: 10px 20px 15px 20px;
}
but the padding is not applied to the table at all and I cannot figure out why. I am happy that I see the same behavior on all the browsers including IE7 and IE8 but I don't see any padding. Can someone please tell me what I am doing wrong here?
Thanks.
EDIT
This is my table
<table class="home_right_top" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="blueHeading14 heading_padding_right" style="width: 64px">Products</td>
<td class="rpt_stroke" style="width: 280px"> </td>
</tr>
</tbody>
</table>
The problem isn't the reset, it's that the W3 CSS property spec states that padding can be applied to:
all elements except table-row-group,
table-header-group,
table-footer-group, table-row,
table-column-group and table-column
So it's invalid to apply padding to a <table>. Instead, the only solution that comes to mind is to apply margin instead, wrap the table in a <div>, or apply the padding to the individual <td>s with special classes.
Take a look at the last line in his css:
table {
border-collapse: collapse;
border-spacing: 0;
}
Try removing that and seeing what happens, table cells don't often act like block level elements. I think the real problem here is that you shouldn't style the table element like this, becasue it's display property by default is table which is not the same as the box model.
Try putting padding on the cells themselves or add a margin to the table.
Works fine for me. Did you declare a DocType?
You have to apply the style to the TD's not the table.
table.home_right_top td