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
Related
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'd like to set a background and a rounded border on a <tbody/>, such as
tbody { border-radius: 15px; border: 1px solid black; background: #ccf; }
However, when I try this in Codepen, the border and background color display, but the <tbody/> still has square corners.
I'm able to work around this problem using a series of :last-child and :first-child selectors to apply the radius to individual tds on the corners, as for example
tbody tr:first-child td:first-child { border-top-left-radius: 15px; }
This version does what I want (at least, under firefox) but also feels extremely verbose and hacky, a problem that'll only get worse when I add the prefixed versions for compatibility (-moz-, -webkit- etc), and support for <th/> elements in addition to <td/>. Is there a succinct, pure-css way of getting this behavior?
Assuming you have collapsed the borders in the table, simply set display:block on the tbody and apply the border-radius.
Codepen example
CSS
table {
width: 100%;
border-collapse: collapse;
display: block;
width: 600px;
}
tbody {
background: #ccf;
border: 1px solid black;
border-radius: 15px;
display: block;
}
th, td {
width: 200px;
}
td, th {
padding: 5px;
text-align: center;
}
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;
}
Picked up a friend's CSS project to help out. I'm not an expert in CSS, here it goes:
I can't seem to find a direct answer. I am creating a table and I want 2 types of TH class that uses differnet background color in a table.
(also i might need some help on the DIV tag)
The css I'm using is like this can someone tell me what am I doing wrong?
<div class="one"><div class="two">
<table>
<TR><TH> one color </TH></TR>
<TR><TH class="color">differnet color </TH></TR>
</table></div></div>
.one .two th {
padding: 5px 10px;
border: 1px solid #d9d9d9;
background: #000000;
}
.one .two th .color{
padding: 5px 10px;
border: 1px solid #d9d9d9;
background: #ffffff;
}
Remove the space between th and .color
Otherwise you're looking for a .color descendant element inside the th, not for the class on the th itself.
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;
}