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; }
Related
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'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
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;
}