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 */
}
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'm having trouble removing the inherited styles in a sub-table. My tables basically look like this:
<table class="twocoltable">
<thead>
<tr><th>BlahBlah</th></tr>
</thead>
<tr>
<td>blah</td>
<td>
<table class="nostyle">
<tr>
<td>stuff</td>
<td>stuff</td>
</tr>
</table>
</td>
</tr>
</table>
EDIT My .css now looks like this. The sub-table has no styles, but the parent table's td styles aren't working, but the th styles are working.
.twocoltable { border-spacing: 0px; padding: 0px; border: 1px solid #666666; }
.twocoltable>thead>tr>th { text-align: center; font-weight: bold; color: black; font-size: 12pt; padding: 4px; background-color: #DDD; }
.twocoltable>tr>td:first-child { text-align: right; vertical-align: top; font-weight: bold; color: black; font-size: 9pt; padding: 4px; border-top: 1px solid #BBBBBB; border-right: 1px solid #BBBBBB; }
.twocoltable>tr>td:last-child { text-align: left; vertical-align: top; font-weight: normal; color: #333333; font-size: 9pt; padding: 4px; border-top: 1px solid #BBBBBB; white-space: nowrap; }
.nostyle * {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
What I end up with at the end is a properly formatted parent table, but the sub-table also contains the formatting. It still has the bolding, borders, and alignment.
What am I missing?
Assign your styles only to your parent table's immediate children. This should work for properties like margin and padding. I.e.:
Instead of:
.twocoltable th
.twocoltable tr td:first-child
.twocoltable tr td:last-child
Do:
.twocoltable>thead>tr>th
.twocoltable>tr>td:first-child
.twocoltable>tr>td:last-child
However, other properties such as font-weight will still apply to child elements, because they are inherited. For those, you'll have to manually override in .nostyle definitions (which you haven't done). E.g.:
.nostyle {
font-weight: normal; // initial also works
}
EDIT:
Updating my answer with a general overview of what should be the final solution.
.twocoltable th {
// styles that will be applied to all th elements that live inside .twocoltable, including sub tables
}
.twocoltable tr td:first-child {
// styles that will be applied to all elements that are the first td of a parent and live inside .twocoltable, including sub tables
}
.twocoltable tr td:last-child {
// styles that will be applied to all elements that are the last td of a parent and live inside .twocoltable, including sub tables
}
.twocoltable>thead>tr>th {
// styles that will be applied ONLY to th elements that are direct children of tr elements that are direct children of thead elements that are direct children of .twocoltable. This excludes sub table th elements
}
// You should have got the idea by now
.twocoltable>tr>td:first-child {...}
.twocoltable>tr>td:last-child {...}
.nostyle {
// Styles that override styles that are inherited from its parent element even when that style has not been directly applied to it (e.g. font-weight)
}
By using this notation: .twocoltable tr, you will apply that style to all children of .twocoltable that are tr, no matter how deep they are.
You can choose to get more specific by adding classes to your tr elements, etc. Or you can use the child selector, >. It ensures the style is only applied to immediate children: .twocoltable > tr.
By having more specificity with your CSS, a great summary is found linked here, it will take precedence. Maybe using an ID for your main table, and a class for your nostyle cells would be the best way to organize it?
<table id="twocoltable">
<table class="nostyle">
Another option, you can override with CSS using !important, a jsFiddle linked here.
This is a general question, given a html component (a table for example), I want to add a new css class overwriting the current ones. For example I want to overwrite the td hover of the following table, adding a new class in order to do not affect the other tables that use the classes in common:
html (using bootstrap classes)
<table id="calDate" class="table table-striped table-bordered table-condensed table-hover alignCenter">
<tbody>
<tr>
<td>
<tbody>
</tbody>
table>
css
table {
max-width: 100%;
background-color: transparent;
border-collapse: collapse;
border-spacing: 0;
}
.table {
width: 100%;
max-width: 90%;
margin-bottom: 5px;
}
.table th,
.table td {
padding: 8px;
line-height: 20px;
text-align: left;
vertical-align: top;
border-top: 1px solid #dddddd;
}
.table-hover tbody tr:hover > td,
.table-hover tbody tr:hover > th {
background-color: #f5f5f5;
}
I try to overwhrite the last class creating a new one named .alignCenter, trying to change the td hover behavior and also the text-align, the aligment worked but the mouse over it doesn't worked:
.alignCenter {
}
.alignCenter-hover tbody tr:hover > td,
.alignCenter-hover tbody tr:hover > th {
background-color: #df8505;
}
.alignCenter th, .alignCenter td{
text-align: center;
}
What's the usual way to create a new css class overwhiting the existent classes?
How can I use the new created css class to change the td hover behavior for example change the background color?
In the example the class .table has max-width: 100%; and it's defined again below with max-width: 90%;. Which max-width is used in the table, and why?
Ok, let me answer your questions one by one:
-1. What's the usual way to create a new css class overwhiting the existent classes?
You can overwrite those by either modifying the classes themselves or add a different value for another class on the same element (or inline style them).
-2. How can I use the new created css class to change the td hover behavior for example change the background color?
Simply do this:
tr:hover td {
/* do hover stuff */
}
-3. In the example the class .table has max-width: 100%; and it's defined again below with max-width: 90%;. Which max-width is used in the table, and why?
In CSS it's always the most recently (last) command that will "win". You can, however, override that using !important like this:
.table {
/* ... */
max-width: 90% !important;
/* ... */
}
And more: get rid of the table-hover, it's unnecessary; instead set up its hovered variation like this:
.table:hover {
/* stuff goes here */
}
Take a look at this:
http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
the class attributes at the class below the other class will count (so the order of the stylesheet matters), else you can use ex:
max-width:90%!important;
or choose are more specific selector
Thing is,
You have to create new class.
.old
{
//already have
}
.new
{
// do your stuff with !important so it will take this
// background-color:#fff !important
}
or
td:hover > .new
{
// do your stuff
}
BACKGROUND:
I would like to have small labels in columns of a table.
I'm using some implemented parts of HTML5/CSS3 in my project, and this section specifically is for mobile devices. While both facts are not necessarily relevant, the bottom line is that I don't have to support Internet Explorer or even Firefox for that matter (just WebKit).
THE PROBLEM
With my current CSS approach, the vertical padding of the cell comes from the <span> element (set to display: block with top/bottom margins), which contains the "value" of the column. As a result there's no padding when the <span> is empty or missing (no value) and the label is not in place.
The "full" coulmns should give you the idea of where I want the labels to be, even if there's no value, and the <span> is not there.
I realize that I could use "non-breaking-space", but I would really like to avoid it.
I wonder if any of you have a fix / better way to do this? current code is below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>ah</title>
<style>
body {
width: 320px;
}
/* TABLE */
table { width: 100%; border-collapse: collapse; font-family: arial; }
th, td { border: 1px solid #ccc; border-width: 0px 0px 1px 1px; }
th:last-child, td:last-child { border-right-width: 1px; }
tr:first-child th { border-top-width: 1px; background: #efefef; }
/* RELEVANT STUFF */
td {
padding: 3px;
}
td sup {
display: block;
}
td span {
display: block;
margin: 3px 0px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="3">something</th>
</tr>
<tr>
<td><sup>some label</sup><span>any content</span></td>
<td><sup>some label</sup><span>any content</span></td>
<td><sup>some label</sup><span></span></td><!-- No content, just a label -->
</tr>
</table>
</body>
</html>
As above, you can use:
td {
padding: 3px;
vertical-align:top;
}
If you wanted to retain the padding exactly, even on the invisible elements, you can force the hasLayout attribute on the empty span using:
td {
padding: 3px;
vertical-align:top;
}
td sup {
display: block;
}
td span {
display: inline-block;
margin: 3px 0px;
text-align: center;
width:100%;
}
The inline-block technique is discussed extensively at Drawing empty inline boxes in CSS?
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*/
}