If table is set to have a border on a high level, how can i make sure that classes inhering from it do not have any borders set?
table,td,th {
border: 1px solid #0B6121;
}
how can i make sure that my other table has no borders at all?
table.menu {
border: none;
- and no border for td
- and no border for th
}
table.main, table.menu td, table.menu td {
border: none;
}
This way I guess. The idea is to set rules for siblings of your particular table.
table.menu, .menu th, .menu td {
border:none;
}
sometyhing like this?
Like this :
table.menu td, table.menu tr{
border:none;
}
As your code stands
<table class="menu"></table>
will not have an outside border, but any th and td elements inside will inherit the border from your global selector.
The other answers that demonstrate applying specific rules to the td and th elements inside of a table with class of 'menu' should help you out.
Related
In very simple html/css, I have my menu in a <table id="menu">. The menu has no border, however I would like all the other tables in my blog to have borders.
I made it work this way:
#menu, #menu th, #menu td {border: none; color: red}
table, th, td {border: 1px solid black;}
However this is not very robust. If I add something else to tables I might forget to 'reset' it in #menu. Is there a way to force all properties in #menu so that I don't have to override one by one anything I would add to table, th, td {...}?
I tried the :not() selector but it doesn't feel robust either, I would rather specify what I want for menu on the #menu {...} line, not elsewhere. Let me know if that makes sense or I can reformulate
I think that I understand now. I was searching for a way to unset all values for a css class and came across this page: Reset/remove CSS styles for element only
It tells us that we can do something like this to achieve what you want:
#menu, #menu th, #menu td {
all: unset;
color: red;
}
table, th, td {
border: 1px solid black;
}
Notice how I added the all: unset; and removed the border: none;
This should reset all the styles for elements with that id, but make sure to put your other styles AFTER the all: unset, or else it will unset the styles you just wrote. Hope this helps!
Maybe using classes instead of id's.
If you use a class you can apply a css rule to all elements that have It
So for example to your table you can use
.custum-table
The prevoius class Will apply css styles to all elements
And finally if you wanna apply another css rule you can add another class to your element in this way
Another html file
.custom-table__no--effect
Previous class with BEM Will apply css styles to only one element for example table element
According to the W3Schools CSS notes, if you use an ID on an element, then the CSS styles defined for that ID (using #id_name) should only apply to that element, and this is how you should style an element which only appears once.
I've a site which includes a display table (of actual tabular data, it's a grid of phone numbers in different classifications). So I've placed the table inside a div and set the div to have an ID. I then defined styles for the ID in the stylesheep.
HTML:
<div id='phone_number_grid'>
<table>
...
</table>
</div>
CSS:
#phone_number_grid table {
border-collapse: collapse;
}
#phone_number_grid th,td {
border: 1px solid #000040;
background-color: #ccccff;
padding: 5px;
}
The style works perfectly on the table it's intended for, but it is also affecting a completely different table which has no class or id settings, and is contained in a completely unrelated div with it's own (completely unrelated) class settings, on a different page that uses the same stylesheep.
How do I stop the #phone_number_grid styles from affecting unrelated tables?
Note I previously tried the same thing using a class ID on the div, with the same results - the styles "leaked" onto other tables that didn't mention them.
Q1: Why are these styles applying themselves to elements that don't reference them?
Q2: Is there a CSS way of saying "do not apply any styles at all to this specific element"?
Your second style extends to all td elements, instead of just those belong to table #phone_number. Update as per below.
#phone_number_grid table {
border-collapse: collapse;
}
#phone_number_grid th, #phone_number_grid td {
border: 1px solid #000040;
background-color: #ccccff;
padding: 5px;
}
#phone_number_grid th,td affects all #phone_number_grid th and all td, not only all #phone_number_grid th and all #phone_number_grid td.
So write in your selector:
#phone_number_grid th, #phone_number_grid td
Your problem is with this line:
#phone_number_grid th,td {
CSS selectors separated by commas aren't actually read like you'd first expect. They're two separate selectors, so you're actually matching #phone_number_grid th and all td elements.
You need to be a little more explicit:
#phone_number_grid th,
#phone_number_grid td {
...
}
Putting the selector on its own line may make it easier to see as well.
tYou don't have to define it as a table.
#phone_number_grid table{
border-collapse: collapse;
}
#phone_number_grid th, #phone_number_grid td {
border: 1px solid #000040;
background-color: #ccccff;
padding: 5px;
}
I have a css for hovering over tables to highlight the current row.
.cb_table-hover tbody tr:hover td,
.cb_table-hover tbody tr:hover th {
background-color: #cfcfcf;
}
Additionally I could like to add another line to the same CSS to show a twitter bootstrap icon within the background of the hovered table row.
<i class="icon-search"></i>
At first I was thinking to utilise a background-image:url('??'); but the icon can't be defined like that.
Any idea if that possible? Thanks
Sure ! You cann't set background image with a image sprite
But you can put the icon inside td/th tag and use "display" to show/hide the icon:
.cb_table-hover tbody tr td .icon-search,
.cb_table-hover tbody tr th .icon-search{
display: none;
}
.cb_table-hover tbody tr td:hover .icon-search,
.cb_table-hover tbody tr th:hover .icon-search{
display: inline-block;
}
I have a table structure, where I can't access jsp file to add class files. I have to manage it through CSS. In this case, I need to apply background color for first table all th's. Not to nested table th's. How can we do this with CSS? Example : http://jsfiddle.net/qdDnJ/
As per i understand may you can write like this:
tr th{
background:red;
}
tr table th{
background:none;
}
Check this http://jsfiddle.net/qdDnJ/2/
Distinguish first table's th from the second table's th.
Edited after comment:
See here, http://jsfiddle.net/qdDnJ/25/
I have assumed that div is parent container of first table.
You can replace it with table's parent.
e.g. If body is parent, css should be,
body > table > tbody > tr > th {
background-color:red;
}
You could do this:
table th:first-child {
background: red;
}
table table th:first-child {
background: none;
}
I would just give the outer table a class and use this:
table.class-name th:first-child {
background: red;
}
Every body tried many things to achieve the target as per the question.
but as per the HTML we can just write the following css and avoid child th to get background-color..
in this solution we do not need any id and class or any thing accept the .gap class. Even if this class is not there we can apply the css.
check the demo
HERE is the CSS with .gap class
table th {background-color:red;}
table td.gap tr th {background:none;}
HERE is the CSS without .gap class
table th {background-color:red;}
table td tr th {background:none;}
The simplest way I know is to use the child selector
#yourtableId > tbody > tr > th { background: red; }
Demo
Is there a way to apply a Class' style to only ONE level of td tags?
<style>.MyClass td {border: solid 1px red;}</style>
<table class="MyClass">
<tr>
<td>
THIS SHOULD HAVE RED BORDERS
</td>
<td>
THIS SHOULD HAVE RED BORDERS
<table><tr><td>THIS SHOULD NOT HAVE ANY</td></tr></table>
</td>
</tr>
</table>
Is there a way to apply a Class' style to only ONE level of td tags?
Yes*:
.MyClass>tbody>tr>td { border: solid 1px red; }
But! The ‘>’ direct-child selector does not work in IE6. If you need to support that browser (which you probably do, alas), all you can do is select the inner element separately and un-set the style:
.MyClass td { border: solid 1px red; }
.MyClass td td { border: none; }
*Note that the first example references a tbody element not found in your HTML. It should have been in your HTML, but browsers are generally ok with leaving it out... they just add it in behind the scenes.
how about using the CSS :first-child pseudo-class:
.MyClass td:first-child { border: solid 1px red; }
This style:
table tr td { border: 1px solid red; }
td table tr td { border: none; }
gives me:
this http://img12.imageshack.us/img12/4477/borders.png
However, using a class is probably the right approach here.
Just make a selector for tables inside a MyClass.
.MyClass td {border: solid 1px red;}
.MyClass table td {border: none}
(To generically apply to all inner tables, you could also do table table td.)
I wanted to set the width of the first column of the table, and I found this worked (in FF7) - the first column is 50px wide:
#MyTable>thead>tr>th:first-child { width:50px;}
where my markup was
<table id="MyTable">
<thead>
<tr>
<th scope="col">Col1</th>
<th scope="col">Col2</th>
</tr>
</thead>
<tbody>
...
</tbody>
</table>
I guess you could try
table tr td { color: red; }
table tr td table tr td { color: black; }
Or
body table tr td { color: red; }
where 'body' is a selector for your table's parent
But classes are most likely the right way to go here.
I think, It will work.
.Myclass tr td:first-child{ }
or
.Myclass td:first-child { }