I'm trying to select one specific table on one html page to be formatted with css. I do not want any other tables anywhere else, including on the same page, to be formatted this way.
I tried this inside the header but it did not work-
<style>
#table3 {
td,th { padding: 10px }
tr:hover { background-color: #f5f5f5 }
}
</style>
<table id="table3">
...
</table>
You can't nest selectors like that. At least not in normal CSS.
You want:
<style>
#table3 td, #table3 th { padding: 10px }
#table3 tr:hover { background-color: #f5f5f5 }
</style>
<table id="table3">
...
</table>
This wont work because this isn't the format for CSS, although the concept is right in what you have done the format isn't correct.
Try this...
#table3 td, #table3 th {
padding: 10px;
}
#table3 tr:hover {
background-color: #f5f5f5;
}
However, if you would like to do it the way in which you did it. You could do it with a CSS compiler such as less, which you can view online as less js, it makes CSS lightweight and a lot easier to write.
The way you wrote it looks more like SCSS. If you need plain CSS, this is how it should look like:
<style>
#table3 TD {
padding: 10px;
}
#table3 TH {
padding: 10px;
}
#table3 tr:hover {
background-color: #f5f5f5;
}
</style>
<table id="table3">
...
</table>
Related
I am experiencing errors when loading an html/css file. Here are the contents of the file:
<div style="overflow-x:auto;">
<table>
a bunch of tr/td ...
</table>
</div>
table {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
th,
td {
border: 1px solid #ddd;
padding: 8px;
}
th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #00008B;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #ddd;
}
I see two errors: First, the horizontal scrollbar doesn't appear. Second, the even-numbered lines are the same background color as the odd-numbered lines. This behavior is consistent between IE 11 and Chrome 69.
What have I done wrong? How do I fix it?
You need to fix a couple of things:
On the table element, you can try setting it to display:inline-table; so that the width of the table won't be limited by the parent container. Add min-width:100%; if needed, and remove width:100%; to let it grow.
For the alternate background colors, for rows, apply tr:nth-child(even) {...} or tr:nth-child(even) td {...}; for columns, use td:nth-child(even) {...}
If you also have thead and/or tfoot and you only want to apply the colors to tbody, makes use to add tbody tr:nth-child(even) etc.
In addition:
You don't have to use <table>, other options:
Flexbox: .container {display:inline-flex;}
Inline-blocks: .container {white-space:nowrap;} .item {display:inline-block; vertical-align:top; white-space:normal;}
CSS table: .container {display:inline-table;} .item {display:table-cell;}.
Of course, either way you choose, keep the wrapper <div style="overflow-x:auto;"> there as needed.
I cannot understand what I have done wrong here. The css styles should be separate for both my tables however "rcorners1" table appears to be affected by the settings of "water_table"
I have two tables the css for first table
table.water_table tr:nth-child(even) {background-color: #f2f2f2}
table.water_table tr:hover {background-color: #f5f5f5}
table.water_table th {background-color: #ffffff;}
table.water_table th, td {
padding: 15px;
text-align: left;
}
My first table looks like
<table border="0" align="center" class="water_table" id="water_table">
The css for my second table
table.rcorners1 {
border-radius: 10px;
border: 1px solid #a4b3bd;
padding: 2px;
margin: 3px;
width: 120px;
height: 160px;
float: left;
}
my second table looks like
<table width="100%" border="0" class="rcorners1" id="rcorners1">
I do not know if this is the correct solution. What I did to correct the issue is to remove "water_table" from the css style file and created a style block within the html before my "water_table" appears.
<style>
table.water_table tr:nth-child(even) {background-color: #f2f2f2}
table.water_table tr:hover {background-color: #f5f5f5}
table.water_table th {
background-color: #ffffff;
/*color: white;*/
}
table.water_table th, td {
padding: 15px;
text-align: left;
}
</style>
Generally you don't want to put an inline style block inside your HTML - if you were to do so, it should be at the head of your document, not in the body.
However, if moving the styles is what solved the problem for you, this means that there's something else in your css file that's overriding your desired styles.
Often times you can see all of the styles associated with an element in a browser inspector. If you were to inspect your element I bet you would see some additional styles that are crossed out from your CSS file.
I have a really basic question but I'm not sure how to express it, so I'll just try:
I have a table on my website, which looks like this:
<table class="display" width="100%">
.display td tr th
{
vertical-align: middle;
padding: 5px 5px 5px 5px;
}
I want to format the subordinate elements of my table (td, tr, th) without writing <td class="display"> for each td element.
I don't wanna change td, tr or th because I'm using other tables on my site, which shouldn't be affected.
Can somebody help me?
Shivan
how about:
table.display > tr > td {
vertical-align: middle;
padding: 5px 5px 5px 5px;
}
It's a bit lengthy, but...
.display>thead>tr>td, .display>thead>tr>th,
.display>tbody>tr>td, .display>tbody>tr>th,
.display>tfoot>tr>td, .display>tfoot>tr>th,
.display>tr>td, .display>tr>th {
/* apply styles here */
}
This will apply the styles only to the cells belonging to the right table (the one with class="display").
Once CSS4 is widely available, you will be able to do:
.display>:matches(thead,tbody,tfoot)>tr>:matches(td,th) {
/* apply styles here */
}
I want to have my table rows highlighted on mouse over, but I have yet to find a way to do it that isn't using Javascript. Is this not possible in CSS?
I've tried this:
tr:hover {
background: #000;
}
But that doesn't work. Using td:hover works, but I want to change the background colour of the whole table row.
Is there a pure CSS/HTML way to do it, or am I going to have to resort to Javascript?
<tr>s themselves are very hard to access with CSS, try tr:hover td {background:#000}
You could try:
tr:hover {
background-color: #000;
}
tr:hover td {
background-color: transparent; /* or #000 */
}
JS Fiddle demo.
I had the same problem:
tr:hover { background: #000 !important; }
allone did not work, but adding
tr:hover td { background: transparent; }
to the next line of my css did the job for me!!
My problem was that some of the TDs already had a background-color assigned and I did not know that I have to set that to TRANSPARENT to make the tr:hover work.
Actually, I used it with a classnames:
.trclass:hover { background: #000 !important; }
.trclass:hover td { background: transparent; }
Thanks for these answers, they made my day!! :)
This will work:
tr:hover {
background: #000 !important;
}
If you want to only apply bg-color on TD then:
tr:hover td {
background: #c7d4dd !important;
}
It will even overwrite your given color and apply this forcefully.
tr:hover td.someclass {
background: #EDB01C;
color:#FFF;
}
only someclass cell highlight
tr:hover td {background-color:#000;}
You can give the tr an id and do it.
tr#element{
background-color: green;
cursor: pointer;
height: 30px;
}
tr#element:hover{
background-color: blue;
cursor: pointer;
}
<table width="400px">
<tr id="element">
<td></td>
</tr>
</table>
its easy . Just add !important at the end of your css line :
tr:hover { background: #000 !important; }
Try it
<!- HTML -->
<tr onmouseover="mOvr(this,'#ffa');" onmouseout="mOut(this,'#FFF');">
<script>
function mOvr(src,clrOver) {
if (!src.contains(event.fromElement)) {
src.bgColor = clrOver;
}
}
function mOut(src,clrIn) {
if (!src.contains(event.toElement)) {
src.bgColor = clrIn;
}
}
</script>
My css is located at http://sillybean.net/css/seaglass.css and i want to use this css for only one of html table, On the same page i have multiple html tables so i do not want to affect other html tables. What is the fastest way to do it with less modification on http://sillybean.net/css/seaglass.css ?
Can you just apply a class to the table you want to affect, then use that class in your CSS?
In your HTML, you can put:
<table class="mytable">
... CONTENT OF THE TABLE, AS NORMAL ...
</table>
And then, add the class selector to your CSS:
table.mytable { border-collapse: collapse; border: 1px solid #839E99;
background: #f1f8ee; font: .9em/1.2em Georgia, "Times New Roman", Times, serif; color: #033; }
.mytable caption { font-size: 1.3em; font-weight: bold; text-align: left; padding: 1em 4px; }
.mytable td,
.mytable th { padding: 3px 3px .75em 3px; line-height: 1.3em; }
.mytable th { background: #839E99; color: #fff; font-weight: bold; text-align: left; padding-right: .5em; vertical-align: top; }
.mytable thead th { background: #2C5755; text-align: center; }
.mytable .odd td { background: #DBE6DD; }
.mytable .odd th { background: #6E8D88; }
.mytable td a,
.mytable td a:link { color: #325C91; }
.mytable td a:visited { color: #466C8E; }
.mytable td a:hover,
.mytable td a:focus { color: #1E4C94; }
.mytable th a,
.mytable td a:active { color: #fff; }
.mytable tfoot th,
.mytable tfoot td { background: #2C5755; color: #fff; }
.mytable th + td { padding-left: .5em; }
Define an ID or CLASS in your CSS that will affect the table in question.
Then, in your HTML code, say
<table id="theid"... />
or
<table class="theclass" ... />
The CSS ID looks like
#theid
{
//attributes
}
Classes look like:
.theclass
{
//attributes
}
This is exactly what id and class attributes are for. If you can't change the markup (like styling myspace) then you need to use selectors to target the one table more precisely. The choice of selectors is something you'll need to decide yourself.
For Multiple Table and Classes
HTML Table
<table id="tableId1">
--Table Content--
</table>
<table id="tableId2">
--Table Content--
</table>
<table class="tableClass1">
--Table Content--
</table>
<table class="tableClass2">
--Table Content--
</table>
CSS Script
#tableId1, #tableId2
{
//attributes
}
.tableClass1, .tableClass2
{
//attributes
}
Here are class selectors and markup that will style the first table but not the second:
<style>
table.special { border: 1px solid #839E99; ... }
table.special caption { font-size: 1.3em; ... }
...
</style>
<table class="special">...</table>
<table>...</table>
Or you can use an ID selector in a similar fashion:
<style>
#my-special-table { border: 1px solid #839E99; ... }
#my-special-table caption { font-size: 1.3em; ... }
...
</style>
<table id="my-special-table">...</table>
<table>...</table>
Sometimes a religious war breaks out about which of these two approaches to use. Either is fine for your needs. According to the spec, you can only put a given ID on at most one element in your HTML (but most browsers allow you to break that rule).
Apply the Class name to the table on which you want to apply css rest is fine...
While you should add a class to the table you want to affect, let's assume you can only modify the css. In that case you can get pretty fancy with selectors. But not all the browsers support them. You can see that the CSS 2 selectors don't support the n-th child concept. Otherwise, if you had html like:
<html><head></head><body>
<table><tr><td>First</td></tr></table>
<table><tr><td>Second</td></tr></table>
<table><tr><td>Third</td></tr></table>
</body></html>
You could target the first with CSS2 selectors, but the second and third can only be targeted with CSS3 ones.
table:first-child td {background-color:red;} /* CSS2, pretty wide support */
table:nth-child(2) td {background-color:red;} /* CSS3, limited support */
Select table by class for styling a desired table e.g if you have table:
<table class="tableOne"></table>
<table class="tableTwo"></table>
Then in CSS, you will use something like this:
.classOne {
/* do your stuff here*/
}
.classTwo {
/* do your stuff here*/
}