I have this table <table></table> and there are many <label></label>'s inside. Is there a way to apply some property to all the labels inside the table but to none of the labels outside.
In other words, I'd like to write something:
FOR each label IN my table:
APPLY: property
PS: I know about the classes, but if I use class, I'll have to use <class= > for each label manually.
Are you just trying to style <label>'s that are inside a table? If so, just use a parent/child selector so only those applicable are styled as follows:
table label {
color: red;
}
<table border="1">
<tbody>
<tr>
<td><label>LABEL INSIDE TABLE</label></td>
</tr>
</tbody>
</table>
<label>LABREL OUTSIDE TABLE</label>
If you add a class to the appropritate table's, you can style labels only in those tables:
table.test label {
color: red;
}
<table border="1" class="test">
<tbody>
<tr>
<td><label>LABEL INSIDE TABLE with class TEST</label></td>
</tr>
</tbody>
</table>
<table border="1">
<tbody>
<tr>
<td><label>LABEL INSIDE TABLE with no class</label></td>
</tr>
</tbody>
</table>
<label>LABREL OUTSIDE TABLE</label>
what you need is google more and read more.
it called css selector. you can use it like this
table label{
color:red;
background:green;
}
and so on. the class it self it's to specify what this particular label should do and this label should do. you can find it more in here all about selector
Related
How do I use the CSS hover on only SOME cells in a table?
Can I turn it off on those that I don't want it applied to?
I'm using this:
td:hover {
border-style:dotted;
border-color:#F60;
border-width:medium;
border-left-style:dotted;
border-right-style:dotted;
}
But I need it to only apply to certain cells
Instead of specifying your style for all cells you can create a class and only apply that to the cells you want the style on. Update your css to this:
.myclass:hover {
border-style:dotted;
border-color:#F60;
border-width:medium;
border-left-style:dotted;
border-right-style:dotted;
}
Then you do something like this in the HTML code:
<table>
<tr>
<td class="myclass">Cell 1 with special hoover</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</table>
the <td> tag supports Global Attributes in HTML so you can simply add a class to your code for each of the table cells you want to have the hover on.
...
<td class="cell-hover">Table Cell Data</td>
...
The modify your CSS Selector to include the selection of only td cells that have the "cell-hover" class.
td:hover {
border-style:dotted;
border-color:#F60;
border-width:medium;
border-left-style:dotted;
border-right-style:dotted;
}
By using a . within CSS you can select only the elements that have the proceeding class name
I'm trying to write some HTML/CSS to display a certain row with some of the elements left-aligned and some of them in the center. This was my HTML code:
<tr class="mainInfo" id="header">
<td> Item </td>
<td> Color </td>
<td> Size </td>
<div class="mid">
<td> Subtotal </td>
<td> Tax </td>
<td> Total </td>
</div>
</tr>
And this is my CSS code:
.mid {
text-align: center;
}
.mainInfo {
font: bold 13px Tahoma;
}
#header {
background-color: #68891;
color: white;
}
But the last three elements are not moving to the center, and I really don't understand why not. I tried putting class="mid" in the <td> tags and that worked, but doesn't that defeat the purpose of DRY?
Fiddle Demo
You cannot put a div instead of td element.
You should validate your HTML code with w3 validator.
If you'll do so you'll see you get this error message:
document type does not allow element "DIV" here; missing one of "TH", "TD" start-tag
Maybe you can do it this way:
<table>
<tr class="mainInfo" id="header">
<td> Item </td>
<td> Color </td>
<td> Size </td>
<td class="center">Subtotal</td>
<td class="center">Tax</td>
<td class="center">Total</td>
</tr>
</table>
JSFiddle example
No, you should not put divs inside tr's or tables.
And you should not use tr's or td's without table-element.
<table>
<tr>
<td>hello world</td>
<!-- This is bare minimum to use tables properly -->
</tr>
</table>
You can insert whatever(not tr or td, but could start new table) you want inside TD-elements though.
It's possible to use other elements to replace these standard ones with css display-property set to table-row etc., but you should stick to conventional tags.
Use colspan/rowspan to span over multiple table columns or rows.
CSS classes are designed to be used as often you need/want to. Only IDs should appear once per page.
Of course you should always keep the DRY concept in mind but in your case it's totally fine. It wouldn't if you would set your .mid class to every <td> because in that case you could just set the properties directly to the <td> element.
middle is not a valid value for text-align, so I'm going to assume, in your CSS, that's meant to be vertical-align. If so, it's because vertical-align will only apply to table cells, not divs - that would explain why it is only being successfully applied to your tds.
Additionally, you shouldn't really put a div inside a table (and shouldn't put a td inside of that) but that's not related to your problem.
Assign one class for left alignment and other for center like so...
.left {
text-align:left;
}
.center {
text-align:center;
}
Asign class to TD elements
<tr class="mainInfo" id="header">
<td class='left'> Item </td>
<td class='center'> Color </td>
</tr>
This question already has answers here:
how to make a whole row in a table clickable as a link?
(28 answers)
Closed 2 years ago.
I know it is possible to link an entire table cell with CSS.
.tableClass td a{
display: block;
}
Is there a way to apply a link to an entire table row?
I agree with Matti. Would be easy to do with some simple javascript. A quick jquery example would be something like this:
<tr>
<td>example</td>
<td>another cell</td>
<td>one more</td>
</tr>
and
$('tr').click( function() {
window.location = $(this).find('a').attr('href');
}).hover( function() {
$(this).toggleClass('hover');
});
then in your CSS
tr.hover {
cursor: pointer;
/* whatever other hover styles you want */
}
Use the ::before pseudo element. This way only you don't have to deal with Javascript or creating links for each cell. Using the following table structure
<table>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</table>
all we have to do is create a block element spanning the entire width of the table using ::before on the desired link (.rowlink) in this case.
table {
position: relative;
}
.rowlink::before {
content: "";
display: block;
position: absolute;
left: 0;
width: 100%;
height: 1.5em; /* don't forget to set the height! */
}
demo
The ::before is highlighted in red in the demo so you can see what it's doing.
Unfortunately, no. Not with HTML and CSS. You need an a element to make a link, and you can't wrap an entire table row in one.
The closest you can get is linking every table cell. Personally I'd just link one cell and use JavaScript to make the rest clickable. It's good to have at least one cell that really looks like a link, underlined and all, for clarity anyways.
Here's a simple jQuery snippet to make all table rows with links clickable (it looks for the first link and "clicks" it)
$("table").on("click", "tr", function(e) {
if ($(e.target).is("a,input")) // anything else you don't want to trigger the click
return;
location.href = $(this).find("a").attr("href");
});
Example: http://xxjjnn.com/linktablerow.html
Link entire row:
<table>
<tr onclick="location.href='SomeWherrrreOverTheWebsiiiite.html'">**
<td> ...content... </td>
<td> ...content... </td>
...
</tr>
</table>
Iff you'd like to do highlight on mouseover for the entire row, then:
<table class="nogap">
<tr class="lovelyrow" onclick="location.href='SomeWherrrreOverTheWebsiiiite.html'">**
...
</tr>
</table>
with something like the following for css, which will remove the gap between the table cells and change the background on hover:
tr.lovelyrow{
background-color: hsl(0,0%,90%);
}
tr.lovelyrow:hover{
background-color: hsl(0,0%,40%);
cursor: pointer;
}
table.nogap{
border-collapse: collapse;
}
Iff you are using Rails 3.0.9 then you might find this example code useful:
Sea has many Fish, Fish has many Scales, here is snippet of app/view/fish/index.erb
<table>
<% #fishies.each do |fish| %>
<tr onclick="location.href='<%= sea_fish_scales_path(#sea, fish) %>'">
<td><%= fish.title %></td>
</tr>
<% end %>
</table>
with #fishies and #sea are defined in app/controllers/seas_controller.rb
Also it depends if you need to use a table element or not. You can imitate a table using CSS and make an A element the row
<div class="table" style="width:100%;">
<a href="#" class="tr">
<span class="td">
cell 1
</span>
<span class="td">
cell 2
</span>
</a>
</div>
css:
.table{display:table;}
.tr{display:table-row;}
.td{display:table-cell;}
.tr:hover{background-color:#ccc;}
I feel like the simplest solution is sans javascript and simply putting the link in each cell (provided you don't have massive gullies between your cells or really think border lines). Have your css:
.tableClass td a{
display: block;
}
and then add a link per cell:
<table class="tableClass">
<tr>
<td>Link name</td>
<td>Link description</td>
<td>Link somthing else</td>
</tr>
</table>
boring but clean.
To link the entire row, you need to define onclick function on your row, which is <tr>element and define a mouse hover in the CSS for tr element to make the mouse pointer to a typical click-hand in web:
In table:
<tr onclick="location.href='http://www.google.com'">
<td>blah</td>
<td>blah</td>
<td><strong>Text</strong></td>
</tr>
In related CSS:
tr:hover {
cursor: pointer;
}
I think this might be the simplest solution:
<tr onclick="location.href='http://www.mywebsite.com'" style="cursor: pointer">
<td>...</td>
<td>...</td>
</tr>
The cursor CSS property sets the type of cursor, if any, to show when
the mouse pointer is over an element.
The inline css defines that for that element the cursor will be formatted as a pointer, so you don't need the 'hover'.
Using CSS, how do I set the formatting of just a single cell or a single column?
Use the ID selector to target just that one element of the page, in this case, a table cell:
<tr>
<td id="foo"></td>
</tr>
Then in the CSS:
#foo
{
//-- CSS styling goes here just for this element only
}
That hash symbol (#) marks that name selector as belonging to an id. You can further lock it down in the stylesheet to apply only to a TD cell with that ID like so:
td#foo
{
//-- CSS styling goes here just for this element only
}
If you add in the rowspan attribute into the TD, you'll be able to turn that into a column and keep the styling you may have set out.
<td id="foo" rowspan="3"></td>
If you mark the CSS selector name with a preceding period (.), like this:
.foo
{
//-- CSS styles
}
that will target class selectors in the HTML and you can style more than one matching element if you apply the CSS class attribute to the tag, like so:
<tr>
<td class="foo"></td>
<td class="foo"></td>
<td class="foo"></td>
</tr>
Don't use CLASS unless it will appear more than once on the page.
Give the cell a class name and style the class.
<td class="cellClass">test</td>
.cellClass { color: #a9a9a9 }
For table cells, you'll need to give it some sort of identifier such that you can refer to it. Depending on your needs, this will be either a class or an id.
<td class="specialCell">...</td>
In your CSS you can then apply different formatting:
.specialCell { color: red; }
If you want to apply different styles to a column, there is the <col> tag, but browser support is limited. You're probably better to apply that class to all elements manually (or by using Javascript)
You can style the COLGROUP that applies:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
#special { background:yellow }
</style>
</head>
<body>
<table>
<colgroup></colgroup>
<colgroup id="special"></colgroup>
<tr>
<td>a</td>
<td>1</td>
</tr>
<tr>
<td>b</td>
<td>2</td>
</tr>
</table>
</body>
</html>
Check out the HTML <col> and <colgroup> tags, which allow you to apply formatting to entire columns or adjacent groups of columns at once.
give the cell/column a class or id and use css to apply the formatting to that
you can assign two names to a column. ex
<div class="foo"></div>
<div class="foo bar"></div>
<div class="foo"></div>
div.foo { color: #fff; }
div.bar { background-color: green; }
perhaps that could solve your problem?
If I have a table as in this example:
<table class="detailView">
<tr>
<td>Value1</td>
<td>value2</td>
</tr>
</table>
How do I style the <tr> and <td> elements only if the table is of class="detailView"?
Use a CSS class selector:
table.detailView tr {
// your CSS properties
}
table.detailView td {
// your CSS properties
}
If your table does not have the detailView class no style will be applied.