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;
}
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 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
I have the following CSS for my table :
table{
border: 1px solid black;
border-collapse: collapse;
}
tr{
border-bottom: 1px solid #a2a2a2;
}
I want my table to have a black border and inside, the line are supposed to be separated by a grey border. However the bottom border of the table is overridden by tr and is grey instead of black.
How can I manage to give the priority to the table border against the tr border?
Move your bottom border to the top for the tr, and set the first tr to have no border:
table{
border: 1px solid black;
border-collapse: collapse;
}
tr{
border-top: 1px solid #a2a2a2;
}
tr:first-child{
border:none;
}
jsFiddle to demonstrate it working (with slightly modified border colours and sizes to help them show up better in the demo)
Note that this solution involves slightly more CSS code than other valid solutions, but has the advantage of better browser compatibility. (:first-child is CSS2, whereas :last-child is CSS3)
[EDIT]
As per OP's comment below: To prevent the cell borders bleeding into the table border, we need to do the following:
Remove the border-collapse:collapse. This is what is making the borders combine together causing the bleeding effect.
Put the inner borders on the cells (td) rather than the rows (tr). This is necessary because without border-collapse, we can't have borders on the tr.
Add border-spacing:0 to the table. This closes up the gaps between the td elements, which would show up now because the border is on them rather than the tr.
Here's the finished code:
table{
border: 4px solid blue;
border-spacing:0;
}
td{
border-top: 4px solid red;
}
tr:first-child>td{
border:none;
}
And here's an updated version of the fiddle: http://jsfiddle.net/T5TGN/2/
use :not(:last-child)
table{
border: 1px solid black;
border-collapse: collapse;
}
tr:not(:last-child){
border-bottom: 1px solid #a2a2a2;
}
Please see this: http://jsfiddle.net/JSWorld/QmuA9/1/
Update the table css like the following
table, tr:last-child
{
border: 1px solid black;
border-collapse: collapse;
}
You can check the Demo
try adding padding-bottom to the tr:
tr{
border-bottom: 1px solid #a2a2a2;
padding-bottom: 1px;
}
I'm applying a style to have every odd cell with 2px solid bottom border, and every even has 1px solid bottom border. I want to target last child to have the 2px solid bottom. this is my code as of right now (which works except the bottom having the 2px solid.)
(please note: I am VERY new to CSS, following twitter bootstrap CSS to do what I can and adapting some of it to my site. this is my first CSS project. I know there are a lot of compatibility issues with older browsers in here, but I frankly don't care...)
.table-bordered {
border: 1px solid #dddddd;
border-collapse: separate;
*border-collapse: collapse;
border-left: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.table-striped tbody > tr:nth-child(odd) > td,
.table-striped tbody > tr:nth-child(odd) > th {
border-bottom: 2px solid #333;
}
.table-striped tbody > tr:nth-child(even) > td,
.table-striped tbody > tr:nth-child(even) > th {
border-bottom: 1px solid #333;
}
.table-striped
tbody tr:last-child td {
border-bottom: 2px solid: #333;!important
}
The issue is dirty syntax, you are using a colon and !important at wrong places, so this
border-bottom: 2px solid: #333;!important
--^-- --^--
Should be replaced with
border-bottom: 2px solid #333 !important;
The problem is bad syntax in the statement. I would do:
.table-striped tbody > tr:nth-child(even) > td,
.table-striped tbody > tr:nth-child(even) > th {
border-bottom: 1px solid #333;
}
.table-striped tbody > tr:last-child > td {
border-bottom: 2px solid #333;
}
The syntax is now correct, and it works. See fiddle
You don't need important because they have equal specifity, and the one placed last wins.
I have also changed the syntax, adding ">". It is not necesary, but I find more easy to read it afterwards if the style is consistent with the prior declarations