I have a question about CSS selectors.
In my CSS file I have the following code:
.table_legenda th, td {
text-align: left;
vertical-align: top;
font-weight: bold;
color: #76818a;
border-bottom: 1px solid #76818a;
border-left: 1px solid #76818a;
white-space: nowrap;
overflow: hidden;
}
Exactly what elements does that select?
I thought that it should select all the th and td elements inside a table having the class table_legenda.
However, when I test it, the style also gets applied to td elements inside other tables that do not have the table_legenda class (but do have another class).
Why does that happen? What am I missing?
You are misunderstanding the precedence of the comma.
.table_legenda th, td {}
is equivalent to:
.table_legenda th {}
td {}
and not to:
.table_legenda th {}
.table_legenda td {}
You need to specify the complete selector each time you have a comma:
.table_legenda th,
.table_legenda td {}
A preprocessing tool such as SASS can give you alternative syntax:
.table_legenda {
th, td {}
}
it selects tr inside table_legenda class , and in addition to that, all td.
The selector you want is
.table_legenda th, .table_legenda td
In this one, it selects all the th inside .table_legenda and all td inside .table_legenda
The , means selecting another attribute so what you should do is:
.table_legenda th,.table_legenda td {
text-align: left;
vertical-align: top;
font-weight: bold;
color: #76818a;
border-bottom: 1px solid #76818a;
border-left: 1px solid #76818a;
white-space: nowrap;
overflow: hidden;
}
Related
This question already has answers here:
What do commas and spaces in multiple classes mean in CSS?
(9 answers)
Closed 1 year ago.
im trying to reduce lines of css and i cant figure out on how to do it. I have 2 tables and i want to style both with same styles and their's TD and TH too.
I have read, Multiple classes in CSS Selector , Multiple two-classes css-selector? , css multiple class / id selectors? , CSS selector for multiple sub-elements
What i have:
So 2 tables same styles. This is ok, it works.
.documents_table, #documento_detalhe {
font-family: 'Roboto', sans-serif;
border-collapse: collapse;
width: 100%;
}
But now how to select both tables and theirs TDs and THs?
This doenst work:
.documents_table, #documento_detalhe td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
border:0;
}
This is what i have but i want to reduce lines:
.documents_table td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
border:0;
}
#documento_detalhe td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
border:0;
}
You should know that by writing
.documents_table td, th, { styles } The styles are applied to all td inside .documents_table and to ALL th from your html. Not just the ones in the .documents_table . Your selector should be .documents_table td, .documents_table th
Having said that, to style the td and ths from both tables you should write
.documents_table td,
.documents_table th,
#documento_detalhe td,
#documento_detalhe th {
...styles
}
BUT, it would be better to add a common class to both tables like '.my-table' and so you would write just .my-table td, my-table th { styles } and it would apply to both.
See below
.my-table th, .my-table td {
color:red;
}
<table id="documento_detalhe" class="my-table">
<tr><th>TH #documento_detalhe<th></tr>
<tr><td> TD #documento_detalhe<th></tr>
</table>
<table class="documents_table my-table">
<tr><th>TH documents_table<th></tr>
<tr><td> TD documents_table<th></tr>
</table>
I was never any good with CSS, and it's after midnight here, so apologies if this question is too basic.
My table looks like this:
using this CSS:
.zebra_stripe_table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
tbody.zebra_stripe_table
{
border-collapse: collapse;
border: 1px solid #ddd;
}
tr.zebra_stripe_table th.zebra_stripe_table td.zebra_stripe_table {
text-align: center;
/* padding: 16px; */
border: 1px solid #ddd;
}
.zebra_stripe_table tr:nth-child(even) {
background-color: #f2f2f2;
}
I would prefer to have vertical columns on the table, like this:
which I achieved with
.zebra_stripe_table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
.zebra_stripe_table tbody
{
border-collapse: collapse;
border: 1px solid ddd;
}
.zebra_stripe_table tr, th, td {
text-align: center;
/* padding: 16px; */
border: 1px solid #ddd;
}
.zebra_stripe_table tr:nth-child(even) {
background-color: #f2f2f2;
}
The difference being changing
tr.zebra_stripe_table th.zebra_stripe_table td.zebra_stripe_table
to
.zebra_stripe_table tr, th, td
but, that adds cell border to the only other table in the AngularJS project (which does not have the class "zebra_stripe_table").
So, I imagine that the first syntax is correct, applying a style to tr, th & td only of the class zebra_stripe_table.
Question, how do I get those vertical stripes with it?
For the center alignment inside the cells change this selector
.zebra_stripe_table tr, th, td { ... }
to this:
.zebra_stripe_table th, .zebra_stripe_table td {... }
(You don't need to include the tr here, but you need to have .zebra_stripe_table as a parent for * both* th and td)
About the alternating background color for the rows, change your last CSS rule from
.zebra_stripe_table tr:nth-child(even) { background-color: #f2f2f2; }
to
.zebra_stripe_table tr:nth-child(even) td { background-color: #f2f2f2; }
(It's the cells which get the background, not the rows)
I want to display a border for a td element, but only if the element is not in a tfoot element. How do I do that with the .not CSS selector?
This doesn't work:
td.not(tfoot) { ... }
You can try this rule (affects all cells that are not in tfoot)
table :not(tfoot) tr td {
border: 1px solid red;
}
or
table > :not(tfoot) td {
border: 1px solid red;
}
You can apply border only to tbody or thead with this code:
table thead tr th{
border: 1px solid #ccc; // Here your code of css
}
table tbody tr td{
border: 1px solid #ccc; // Here your code of css
}
Regards!
You cannot explicitly do that. What you can do, however, is to set and then overwrite a rule:
td { border: 1px solid black; }
tfoot td { border-width: 0; }
I'm simply trying to put a border-radius around my table rows. I'm currently using jQuery Mobiles as the framework. Here is the code I'm using:
.ui-table tr {
border: 5px solid rgb(51,51,51);
border-radius: 0.5em;
}
Now when I make it td it makes my columns have rounded edges. But when I make it tr for some reason the style doesn't take effect. I'm really not sure why
for border to the table and tr here is the code just put into css file it will definitely work
table
{
border-collapse:collapse;
}
tr{
border:1px solid #CCCCCC;
}
table, td, th
{
border:1px solid #CCCCCC;
}
To display the borders on tr tag you should use table{border-collapse: collapse;} and to display the radius you could use display: block; to tr tag.
demo
try something like this
.ui-table tr {
border: 5px solid rgb(51,51,51);
border-radius: 0.5em;
display:block;
}
You need to point it to td
.ui-table tr td
Fiddle
Please see this : http://jsfiddle.net/ymSpY/. If you can see <td> has an inner table. The inner table inherits the style from the parent table. The inner table has borders. How can I make the border invisible or remove it? As you can see the markup of the inner table it has style="border-collapse: collapse;" and I even tried border=0 but it doesn't work. The border of the inner/child table is still there.
You could apply your rules only to immediate children:
.dataTable > thead,
.dataTable > thead > tr > th,
.dataTable > tbody,
.dataTable > tbody > tr > td {
padding: 2px;
border-top: 1px solid #F5F2EF;
border-left: 1px solid #F5F2EF;
border-bottom: 1px solid #F5F2EF;
border-right: 1px solid #F5F2EF;
}
This way, the border rules don't trickle down to the nested table. The only other option is to do a whole lot of resetting, which will quickly cause your CSS to turn into kudzu.
Demo: http://jsfiddle.net/ymSpY/10/
I'd probably create a separate class for the child table, but short of that, here is one solution:
.dataTable td table, .dataTable td table tbody, .dataTable td table td {
border:none;
}
http://jsfiddle.net/ymSpY/6/
EDIT: here's one with a class defined for a child table, this may give you more flexibility once you start adding other elements to your main dataTable.
http://jsfiddle.net/ymSpY/11/
I'm confused. You have changed the colour, for the borders, so why don't you just set them to 0 instead?
.dataTable td table td {
border-top: 0;
border-left: 0;
border-bottom: 0;
border-right: 0;
}
Example http://jsfiddle.net/ymSpY/4/
This works assuming you're using bootstrap to style your ui.
table.noborder td {
border: none !important;
}
table.noborder td table.table td {
border: 1px solid #dee2e6 !important;
}