I have a base.css that has the following CSS:
.table thead tr th, table th {
text-align:left;
font-size: 11px;
font-weight: bold;
color: #333;
padding: 4px;
background-color: #EEE;
border: #FFF solid;
border-width: 1px 1px 0 0;
border-left: #e7e7e7;
white-space:nowrap; }
I have included this CSS in my JSP. But I needed different colors than the one in my base.css so I declared something like:
#demo table.header tr {
background:#FDBB30
}
In my JSP. I had faced this issue before and found out about CSS Specificity. The specificity of the first one is 0,0,1,5 and that of the second is 0,1,1,2. According to it, the table should render the second CSS. But it's not. Any suggestions.. ? I cannot remove base.css I need it for other elements.
My table is like:
<table cellpadding="0" cellspacing="0" border="0" align="left" width="100%">
<thead>
<!-- Column Naming for the table -->
<tr>
<th class="header">SName</th>
<th class="header">Report</th>
<th class="header">Owner</th>
<th class="header">STime</th>
<th class="header">SFreq</th>
<th class="header">SDate</th>
<th class="header">EDate</th>
<!-- <th>Action</th> -->
</tr>
</thead>
</table>
Instead of applying custom CSS on tr, apply it on th. Like this:
#demo th.header {
background:#FDBB30
}
Also in your HTML, make sure that you have used id="demo" for either your table or a div containing that table.
This demo on JSFiddle may help.
This selector is wrong
#demo table.header tr
First of all I don't see any demo id declared there, also table.header is incorrect, that means select the table with a class header but since you are applying that class to th the selector will fail.
Call the class on table element
<table class="header" cellpadding="0" cellspacing="0" border="0" align="left" width="100%" >
Also make sure you've a wrapper element, say for example a div with an id of demo
Still not comfortable with above thing, simply use an id on your table like
<table id="change_color" ...>
and than use the selector below
#change_color thead tr {
background: #f00;
}
Demo
Apart from the errors in your CSS selector (see other answers), there is also the simple fact that backgrounds in table cells are drawn "on top of" backgrounds in table rows, so they will always override them, no matter if the specificity on the tr is much higher!
If the HTML is
<table id="table">
<tr id="tr"><th>hello</th></tr>
</table>
and the CSS is
th {background:cyan}
body table#table tr#tr {background:yellow !important}
the background will still be cyan! See fiddle.
Related
So I want to select a specific table row and change the background color. I know I can code it via html. But I would rather do it through CSS. I tried giving the table row a class name, but it still wont change the background color. I'm trying to change the background of the class "update". https://jsfiddle.net/q0395cyc/
<table class="table3">
<tbody>
<tr class="update">
<td >
FUNDRAISING UPDATE: $2.5 million in commited capital
</td>
</tr>
First fix your HTML syntax errors (unclosed tbody, tables etc...)
TR are not meant for design. Forget they exist.
TRs are just a way to tell the browser where your TDs group spans/ends.
Style the inner TD instead
.update td {
background: red;
}
Example trying to style TR:
tr.styled{
background: red; /* will become red but... don't. */
border-radius: 10px; /* this will not work */
padding: 10px; /* neither will this */
/* neither many other styles here */
}
<table>
<tr class="styled">
<td>Special offer</td>
</tr>
</table>
Styling inner TD:
tr.styled td{
background: red;
border-radius: 5px;
padding: 10px;
}
<table>
<tr class="styled">
<td>Special offer</td>
</tr>
</table>
I use Bootstrap framework.
I have HTML code:
<table class="table">
<tbody>
<tr>
<td class="non-border">First case</td>
</tr>
<tr>
<td style="border-style:none">Second case</td>
</tr>
</tbody>
</table>
And CSS code:
.non-border { border-style: none; color: red }
Why for the first case class "non-border" doesn't remove the top-border of td (for left, right and bottom border it works; CSS works because color changes for red)?
For the second case (style) all borders of td are removed.
What should I do to get working "border-style: none" of td by class?
Thank you in advance.
Use !important. Like so:
.non-border {
border-style: none !important;
color: red;
}
All styles are cascaded, but inline styles are given the highest preference. In your case, class .non-border is getting lower preference than twitter-bootstrap's predefined styles.
I'm writing a web page based on someone else's stylesheet. The stylesheet includes the following:
table {
border-collapse: collapse;
}
th, td {
padding: 0;
}
Now I want to create a table that has a non-zero cell padding. But I am having trouble overriding this stylesheet:
<table cellpadding="10">
<tr>
<td padding="10">
Foo
</td>
...
...
</tr>
</table>
and none of the above works; the cell padding stays a tight zero.
How do I override the stylesheet (short of using a different stylesheet)?
You can do in-line styling:
<td style="padding: 10px">
or assign a class to your table and create a rule for it:
<table class="table">
<tr>
<td>
Foo
</td>
</tr>
</table>
and the CSS for this:
table td {
padding: 10px;
}
try to be more specific in your selector, for example
table td {
padding:10px;
}
The above will override
th, td {
padding: 0;
}
Learn more for CSS Specificity here.
Just inline the necessary styles:
<table style="border-collapse: separate; border-spacing: 10px;">
...
</table>
If you do this, you don't need the padding="10" on the td either. See http://jsbin.com/exovat/edit#html for a working example.
An alternative to inlining the styles is if you have access to your own custom stylesheet that loads after their stylesheet. Then you can set an id on the table like <table id="foo"> and then just override their styles in your custom stylesheet like this:
table#foo {
border-collapse: separate;
border-spacing: 10px;
}
[Note: The border-spacing css property does not work with IE7 or below; if you need those browsers to be supported, you are better off using some hackier method]
You could use inline styles (ie styles declared on the element), inline stylesheets (ie styles declared in the same page but not directly on elements) or external stylesheets. Unfortunately CSS styles override attributes in most cases (I believe attributes such as you are using here are deprecated, meaning in essence use stylesheets instead).
Create a new class for the table and apply it only to the tables you want to have this style.
table {
border-collapse: collapse;
}
th, td {
padding: 0;
}
table.newStyle { padding:10px; }
<table class="newStyle">
<tr>
<td padding="10">
Foo
</td>
...
...
</tr>
</table>
I need help in this:
if i try to integrate this on a newsletter mailchimp the lines goes down here is the screenshot:
http://i197.photobucket.com/albums/aa253/tintingerri/Test/pic4.png
can someone help me why is this happening?
if I test this in a textpad it looks good, and if I try to put the code now in mailchimp, it the lines are reformatted. any idea?
thanks
Add
border-top: 1px solid #000;
To the style attribute for the <td> tags.
You can change the color to anything you want obviously and you may want to look into using external CSS stylesheets.
Something like:
td { border-top:2px solid #fb0 }
td { padding-left:25px; padding-bottom:10px; padding-top:10px; width: 30% }
tr.alt { background: #ffc }
the row to have the background will use
<tr class="alt">
it is also common practice to put all the style in a css file or in the separate <style> tag region.
sample: http://jsfiddle.net/2LXUn/2/
If you want a table, with only border at the top, the following will work.
<table style="border-color:#008000;border-style: solid none none none;border-width:2px; width: 100%">
<tr> <td > row1</td>
</tr> <tr >
<td>row2</td> </tr>
</table>
You may also apply the border style to table rows as required.
I have a peculiar and frustrating problem. For the simple markup:
<table>
<thead>
<tr><th>1</th><th>2</th><th>3</th></tr>
</thead>
<tbody>
<tr><td>a</td><td>b></td><td>c</td></tr>
<tr class='odd'><td>x</td><td>y</td><td>z</td></tr>
</tbody>
</table>
I apply different background-color values to the thead, tr, and tr odd elements. The problem is that in most browsers, every cell has an unwanted border which is not the color of any of the table rows. Only in Firefox 3.5 does the table have no borders in any cell.
I'd just like to know how to remove these borders in the other major browsers so that the only thing you see in the table are the alternating row colors.
You need to add this to your CSS:
table { border-collapse:collapse }
to remove the border , juste using css like this :
td {
border-style : hidden!important;
}
Modify your HTML like this:
<table border="0" cellpadding="0" cellspacing="0">
<thead>
<tr><td>1</td><td>2</td><td>3</td></tr>
</thead>
<tbody>
<tr><td>a</td><td>b></td><td>c</td></tr>
<tr class='odd'><td>x</td><td>y</td><td>z</td></tr>
</tbody>
</table>
(I added border="0" cellpadding="0" cellspacing="0")
In CSS, you could do the following:
table {
border-collapse: collapse;
}
Set the cellspacing attribute of the table to 0.
You can also use the CSS style, border-spacing: 0, but only if you don't need to support older versions of IE.
You may also want to add
table td { border:0; }
the above is equivalent to setting cellpadding="0"
it gets rid of the padding automatically added to cells by browsers which may depend on doctype and/or any CSS used to reset default browser styles
After trying the above suggestions, the only thing that worked for me was changing the border attribute to "0" in the following sections of a child theme's style.css (do a "Find" operation to locate each one -- the following are just snippets):
.comment-content table {
border-bottom: 1px solid #ddd;
.comment-content td {
border-top: 1px solid #ddd;
padding: 6px 10px 6px 0;
}
Thus looking like this afterwards:
.comment-content table {
border-bottom: 0;
.comment-content td {
border-top: 0;
padding: 6px 10px 6px 0;
}
Try assigning the style of border: 0px; border-collapse: collapse; to the table element.
sometimes even after clearing borders.
the reason is that you have images inside the td, giving the images display:block solves it.