I have defined nested table where parent table don't let to defined new styles for child table.
Some places in nested table I want to hide left and right cell border.
I have tried border-left-style:none !important; border-right-style:none !important; for td of child table but it not works.
Edited:
For parent table styles as
table tr td {
border: 0.1px solid black;
border-collapse: collapse;
font-size: 14px;
height:21px;
padding-left:4px;
}
for child table styles as
table tr td table tr td {
border: 1px solid black;
font-size: small;
border-collapse: collapse;
}
table tr td table .btlPropertyAddress td{
border-left-style:none !important;
border-right-style:none !important;
}
Where btlPropertyAddress added class to child table.
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 applied the below table border to all of the tables on my site
table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
th, td{
border: 1px solid #999;
How do I do no border on some of the tables while keeping the border on the others?
You can target elements with a specific class or id to style:
#tableOne {
border: none;
}
.borderlessTable {
border: none;
}
Alternatively you could do it the other way around and add the border to tables with a specific class/id.
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;
}
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;
}