This question already has answers here:
Rounded table corners CSS only
(17 answers)
Closed 3 years ago.
How to round html table corners using css?
Table looks like this:
<table>
<tr>
<th colspan="2">header</th>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
</tr>
</table>
Css:
th {
background-color: black;
color: white;
border: none;
}
table {
border-collapse: collapse;
border: 1px solid;
border-radius: 5px;
}
table tr:first-child th:first-child {
border-top-left-radius: 5px
}
table tr:first-child th:last-child {
border-top-right-radius: 5px
}
table tr:last-child td:first-child {
border-bottom-left-radius: 5px
}
table tr:last-child td:last-child {
border-bottom-right-radius: 5px
}
Only top right and left corners are rounded, but there is black border on them that isn't rounded. And bottom corners aren't rounded.
I want all this corners to be round.
Easy . use border-radius on table.
table{
border:1px solid black;
border-radius:10px;
}
<!DOCTYPE html>
<html>
<body>
<h2>Filterable Table</h2>
<br><br>
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>Anja</td>
<td>Ravendale</td>
<td>a_r#test.com</td>
</tr>
</tbody>
</table>
</body>
</html>
Try this, it's should also make it a bit nicer to look at. u can always change the colors yourself.
body {
margin: 30px;
}
table {
border-collapse: separate;
border-spacing: 0;
min-width: 350px;
}
table tr th,
table tr td {
border-right: 1px solid #bbb;
border-bottom: 1px solid #bbb;
padding: 5px;
}
table tr th:first-child,
table tr td:first-child {
border-left: 1px solid #bbb;
}
table tr th {
background: #eee;
border-top: 1px solid #bbb;
text-align: left;
}
/* top-left border-radius */
table tr:first-child th:first-child {
border-top-left-radius: 5px;
}
/* top-right border-radius */
table tr:first-child th:last-child {
border-top-right-radius: 5px;
}
/* bottom-left border-radius */
table tr:last-child td:first-child {
border-bottom-left-radius: 5px;
}
/* bottom-right border-radius */
table tr:last-child td:last-child {
border-bottom-right-radius: 5px;
}
Solution for the table that you have mentioned
<style>
body {
margin: 30px;
}
table {
border-collapse: separate;
border-spacing: 0;
min-width: 350px;
}
table tr th,
table tr td {
border-right: 1px solid #bbb;
border-bottom: 1px solid #bbb;
padding: 5px;
}
table tr th:first-child,
table tr td:first-child {
border-left: 1px solid #bbb;
}
table tr th {
background: #eee;
border-top: 1px solid #bbb;
text-align: left;
}
/* top-left border-radius */
table tr:first-child th:first-child {
border-top-left-radius: 6px;
}
/* top-right border-radius */
table tr:first-child th:last-child {
border-top-right-radius: 6px;
}
/* bottom-left border-radius */
table tr:last-child td:first-child {
border-bottom-left-radius: 6px;
}
/* bottom-right border-radius */
table tr:last-child td:last-child {
border-bottom-right-radius: 6px;
}
</style>
<table>
<tr>
<th colspan="2">header</th>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
</tr>
</table>
Related
I'm trying to style a table using only SASS/CSS. I've set the width of my table to be 100%. However, when I set the font-size of the th element to 0.8em, My table fails to take all of the width it's allowed (Notice that the columns do not reach the border line on the right). How can I fix this using CSS, given that I don't control the HTML?
SASS/CSS
table {
color: black;
background-color: white;
border-color: black;
border-style: solid;
border-width: 0 1px 1px 1px;
border-radius: 5px;
border-collapse: collapse;
border-spacing: 0;
display: block;
overflow: auto;
width: 100%;
thead {
th {
color: white;
background-color: black;
font-weight: bold;
font-size: 0.8em;
padding: 5px 10px;
vertical-align: bottom;
}
th:first-child {
border-top-left-radius: 5px;
}
th:last-child {
border-top-right-radius: 5px;
}
}
tbody {
td {
border-top: 1px solid gray;
padding: 5px 10px;
vertical-align: top;
}
tr:nth-child(2n) {
background-color: lightgray;
}
}
}
<table>
<thead>
<tr>
<th>Method</th>
<th>Runtime</th>
<th align="right">Mean</th>
<th align="right">Ratio</th>
<th align="right">Gen 0/1k Op</th>
<th align="right">Allocated Memory/Op</th>
</tr>
</thead>
<tbody>
<tr>
<td>Baseline</td>
<td>Clr</td>
<td align="right">1.833 us</td>
<td align="right">1.00</td>
<td align="right">2.0542</td>
<td align="right">6.31 KB</td>
</tr>
</tbody>
</table>
Here is what I think you want, I just removed border-collapse, display:block (this make the table default CSS), here is a codepen with SCSS and a working snippet is here too:
table {
color: black;
background-color: white;
border-color: black;
border-style: solid;
border-width: 0 1px 1px 1px;
border-radius: 5px;
border-collapse: separte;
border-spacing: 0;
display: table;
overflow: auto;
width: 100%;
}
table thead th {
color: white;
background-color: black;
font-weight: bold;
font-size: 0.8em;
padding: 5px 10px;
vertical-align: bottom;
}
table thead th:first-child {
border-top-left-radius: 5px;
}
table thead th:last-child {
border-top-right-radius: 5px;
}
table tbody td {
border-top: 1px solid gray;
padding: 5px 10px;
vertical-align: top;
}
table tbody tr:nth-child(2n) {
background-color: lightgray;
}
<table>
<thead>
<tr>
<th>Method</th>
<th>Runtime</th>
<th align="right">Mean</th>
<th align="right">Ratio</th>
<th align="right">Gen 0/1k Op</th>
<th align="right">Allocated Memory/Op</th>
</tr>
</thead>
<tbody>
<tr>
<td>Baseline</td>
<td>Clr</td>
<td align="right">1.833 us</td>
<td align="right">1.00</td>
<td align="right">2.0542</td>
<td align="right">6.31 KB</td>
</tr>
</tbody>
</table>
remove display:block from table
#container,tr{
width:100%;
}
html,body{
width:100%;
}
#container{
border-radius:15px;
background-color:black;
}
table {
color: black;
background-color: white;
border-color: black;
border-style: solid;
border-width: 0 1px 1px 1px;
border-radius: 5px;
border-collapse: collapse;
border-spacing: 0;
overflow: auto;
width: 98%;
margin:0 auto;
}
th {
color: white;
background-color: black;
font-weight: bold;
font-size: 0.8em;
padding: 5px 10px;
vertical-align: bottom;
}
th:first-child {
border-top-left-radius: 5px;
}
th:last-child {
border-top-right-radius: 5px;
}
td {
border-top: 1px solid gray;
padding: 5px 10px;
vertical-align: top;
}
tr:nth-child(2n) {
background-color: lightgray;
}
<html>
<body>
<div id='container'>
<table>
<thead>
<tr>
<th>Method</th>
<th>Runtime</th>
<th align="right">Mean</th>
<th align="right">Ratio</th>
<th align="right">Gen 0/1k Op</th>
<th align="right">Allocated Memory/Op</th>
</tr>
</thead>
<tbody>
<tr>
<td>Baseline</td>
<td>Clr</td>
<td align="right">1.833 us</td>
<td align="right">1.00</td>
<td align="right">2.0542</td>
<td align="right">6.31 KB</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I am having a trouble with changing a top left corner cell of a table.
I have this table:
<table>
<caption>zľavové hodiny</caption>
<tr>
<th>zač./deň</th><th>pondelok</th><th>utorok</th><th>streda</th><th>štvrtok</th><th>piatok</th>
</tr>
<tr>
<th>10:00</th>
<td></td>
<td></td>
<td colspan="3">práčky, sušičky (-20%)</td>
</tr>
<tr>
<th>12:00</th>
<td colspan="2">mikrovlnné rúry (-25%)</td>
<td></td>
<td>vysávače (-30%)</td>
<td></td>
</tr>
</table>
and I have to change the background-color in top left corner cell of table. It should have background-color #CCCCCC and shouldn't have border 5px on right side (only 1px as other sides). Everything else should remain as it is now. Any ideas what to do?
This is my CSS code:
table {
border: 5px double #999;
background-color: white;
border-spacing: 5px 1em;
empty-cells: hide;
margin-left: auto;
margin-right: auto;
}
table th, table td {
border: 1px solid black;
padding: 0.5em;
border-collapse: collapse;
}
table tr:nth-child(1) {
background-color: gold;
}
table th:nth-child(2) {
border-bottom-width: 5px;
}
table th:nth-child(3) {
border-bottom-width: 5px;
}
table th:nth-child(4) {
border-bottom-width: 5px;
}
table th:nth-child(5) {
border-bottom-width: 5px;
}
table th:nth-child(6) {
border-bottom-width: 5px;
}
table tr:nth-child(odd) {
background-color: orangered;
}
table tr:nth-child(1) {
background-color: gold;
}
tr th:nth-child(1) {
background-color: plum;
border-right-width: 5px;
}
You can use tr:first-child th:first-child selector to get/reach top-left cell.
table {
border: 5px double #999;
background-color: white;
border-spacing: 5px 1em;
empty-cells: hide;
margin-left: auto;
margin-right: auto;
}
table th, table td {
border: 1px solid black;
padding: 0.5em;
border-collapse: collapse;
}
table tr:nth-child(1) {
background-color: gold;
}
table th:nth-child(2) {
border-bottom-width: 5px;
}
table th:nth-child(3) {
border-bottom-width: 5px;
}
table th:nth-child(4) {
border-bottom-width: 5px;
}
table th:nth-child(5) {
border-bottom-width: 5px;
}
table th:nth-child(6) {
border-bottom-width: 5px;
}
table tr:nth-child(odd) {
background-color: orangered;
}
table tr:nth-child(1) {
background-color: gold;
}
tr:first-child th:first-child {
background-color: #CCCCCC;
/* add what you want */
}
<table>
<caption>zľavové hodiny</caption>
<tr>
<th>zač./deň</th><th>pondelok</th><th>utorok</th><th>streda</th><th>štvrtok</th><th>piatok</th>
</tr>
<tr>
<th>10:00</th>
<td></td>
<td></td>
<td colspan="3">práčky, sušičky (-20%)</td>
</tr>
<tr>
<th>12:00</th>
<td colspan="2">mikrovlnné rúry (-25%)</td>
<td></td>
<td>vysávače (-30%)</td>
<td></td>
</tr>
</table>
Just add a class (blank) to the th and define (border: none; background-color:#fff !important;) in the css
table {
border: 5px double #999;
background-color: white;
border-spacing: 5px 1em;
empty-cells: hide;
margin-left: auto;
margin-right: auto;
}
table th, table td {
border: 1px solid black;
padding: 0.5em;
border-collapse: collapse;
}
table tr:nth-child(1) {
background-color: gold;
}
table th:nth-child(2) {
border-bottom-width: 5px;
}
table th:nth-child(3) {
border-bottom-width: 5px;
}
table th:nth-child(4) {
border-bottom-width: 5px;
}
table th:nth-child(5) {
border-bottom-width: 5px;
}
table th:nth-child(6) {
border-bottom-width: 5px;
}
table tr:nth-child(odd) {
background-color: orangered;
}
table tr:nth-child(1) {
background-color: gold;
}
tr th:nth-child(1) {
background-color: plum;
border-right-width: 5px;
}
.blank
{
border:none;
background-color:#fff !important;
}
<table>
<caption>zľavové hodiny</caption>
<tr>
<th class="blank">zač./deň</th><th>pondelok</th><th>utorok</th><th>streda</th><th>štvrtok</th><th>piatok</th>
</tr>
<tr>
<th>10:00</th>
<td></td>
<td></td>
<td colspan="3">práčky, sušičky (-20%)</td>
</tr>
<tr>
<th>12:00</th>
<td colspan="2">mikrovlnné rúry (-25%)</td>
<td></td>
<td>vysávače (-30%)</td>
<td></td>
</tr>
</table>
Maybe in your css you could do the following:
table tr:nth-child(1) th:nth-child(1){
background:#CCC;
border:1px 5px 1px 1px;
border-style: solid;
border-color: #the color;
}
Hope it helps.
This question already has answers here:
The border-radius property and border-collapse:collapse don't mix. How can I use border-radius to create a collapsed table with rounded corners?
(27 answers)
Closed 7 years ago.
table {
width:100%;
}
table, td, tr {
border: 1px #000000 solid;
border-collapse: collapse;
border-radius: 10px;
}
tr {
height:50px;
}
.price {
width: 65%;
text-align: center;
background-color: #000000;
color: #ffffff;
font-size: 1.5em;
border-color: #c0c0c0;
border-radius: 10px;
}
.buy {
width:35%;
text-align: center;
background-color: red;
color: #ffffff;
border-color: #c0c0c0;
}
<table>
<tr>
<td class="price">$180</td>
<td class="buy">Buy</td>
</tr>
<tr>
<td class="price">$180</td>
<td class="buy">Buy</td>
</tr>
<tr>
<td class="price">$180</td>
<td class="buy">Buy</td>
</tr>
</table>
I try to set border-radius to my "td" but not working.
What I want it looks like is border of td of both right and left side is radius.
Is any way can do that?
Here is a jsfiddle for you:
table {
width:100%;
background: #000;
border: #000 1px solid;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
td, tr {
border: 1px #000000 solid;
border-collapse: collapse;
border-radius: 10px;
}
Consider the following setup:
$(function() {
var $cols = $("td:nth-child(2), th:nth-child(2)");
$cols.hover(function() {
$cols.addClass("highlight");
}, function() {
$cols.removeClass("highlight");
});
});
div {
background: #edf0f1;
padding: 20px;
}
table {
table-layout: fixed;
width: 500px;
border-collapse: separate;
border-spacing: 0;
}
td {
padding: 10px;
background-color: #fff;
border: 1px solid #edf0f1;
border-right-width: 10px;
border-left-width: 10px;
}
td.highlight,
th.highlight {
border-right-color: black;
border-left-color: black;
}
tr:last-child td {
border-bottom-width: 10px;
}
tr:last-child td.highlight {
border-bottom-color: black;
}
th {
border: 1px solid #edf0f1;
border-top-width: 10px;
border-right-width: 10px;
border-left-width: 10px;
}
th.highlight {
border-top: 10px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<table>
<thead>
<tr>
<th>Important</th>
<th>Information</th>
<th>Interchange</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hello world, how are you today</td>
<td>again</td>
<td>and we're done</td>
</tr>
<tr>
<td>More things</td>
<td>Cow level is real!!1111</td>
<td>over 9000%</td>
</tr>
</tbody>
</table>
</div>
As you can see, the highlighted table shows ugly "arrows" from the borders upon hover:
How can I get rid of those?
Here, try this.. the larger the border is, the more pronounced the angle is. I changed the border size to 0px
fiddle: https://jsfiddle.net/uqdebsxp/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<table>
<thead>
<tr>
<th>Important</th>
<th>Information</th>
<th>Interchange</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hello world</td>
<td>again</td>
<td>and we're done</td>
</tr>
<tr>
<td>Hello world</td>
<td>again</td>
<td>and we're done</td>
</tr>
<tr>
<td>More things to come</td>
<td>over 9000%</td>
<td>Cow level is real!</td>
</tr>
</tbody>
</table>
</div>
css
div {
background: #edf0f1;
padding: 20px;
}
table {
table-layout: fixed;
width: auto;
border-collapse: separate;
border-spacing: 0;
}
td {
padding: 10px;
background-color: #fff;
border: 0px solid #edf0f1;
border-right-width: 10px;
border-left-width: 10px;
}
td.highlight,
th.highlight {
border-right-color: black;
border-left-color: black;
}
tr:last-child td {
border-bottom-width: 10px;
}
tr:last-child td.highlight {
border-bottom-color: black;
}
th {
border: 0px solid #edf0f1;
border-top-width: 10px;
border-right-width: 10px;
border-left-width: 10px;
}
th.highlight {
border-top: 10px solid black;
}
You'll need to manually remove borders on hovered items in a columns, using this CSS:
$(function() {
var $cols = $("td:nth-child(2), th:nth-child(2)");
$cols.hover(function() {
$cols.addClass("highlight");
}, function() {
$cols.removeClass("highlight");
});
});
div {
background: #edf0f1;
padding: 20px;
}
table {
table-layout: fixed;
width: auto;
border-collapse: separate;
border-spacing: 0;
}
td {
padding: 10px;
background-color: #fff;
border: 1px solid #edf0f1;
border-right-width: 10px;
border-left-width: 10px;
}
td.highlight,
th.highlight {
border-right-color: black;
border-left-color: black;
}
tr:last-child td {
border-bottom-width: 10px;
}
th {
border: 1px solid #edf0f1;
border-top-width: 10px;
border-right-width: 10px;
border-left-width: 10px;
}
/* New CSS */
tbody tr:first-child > td.highlight {
border-bottom: 1px solid black;
border-top: 1px solid black;
}
tr:last-child td.highlight {
border-bottom-color: black;
border-top: 1px solid;
}
th.highlight {
border-top: 10px solid black;
border-bottom: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<table>
<thead>
<tr>
<th>Important</th>
<th>Information</th>
<th>Interchange</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hello world</td>
<td>again</td>
<td>and we're done</td>
</tr>
<tr>
<td>More things to come</td>
<td>over 9000%</td>
<td>Cow level is real!</td>
</tr>
</tbody>
</table>
</div>
Thanks for all the good answers. Being me, I was not satisfied with "it doesn't work" and found a way with only very small adjustments, see below.
$(function() {
var $cols = $("table [data-col]");
$cols.hover(function() {
var colNum = $(this).data("col");
$("[data-col=" + colNum + "]").addClass("highlight");
}, function() {
var colNum = $(this).data("col");
$("[data-col=" + colNum + "]").removeClass("highlight");
});
});
div {
background: #edf0f1;
padding: 20px;
}
table {
table-layout: fixed;
width: 500px;
border-collapse: separate;
border-spacing: 0;
}
td {
vertical-align: top;
padding: 0;
background-color: #fff;
border: 0px solid #edf0f1;
border-right-width: 10px;
border-left-width: 10px;
}
td > div, th > div {
padding: 10px;
border-top: 1px solid #edf0f1;
background: none;
}
td.highlight,
th.highlight {
border-right-color: black;
border-left-color: black;
}
tr:last-child td {
border-bottom-width: 10px;
}
tr:last-child td.highlight {
border-bottom-color: black;
}
th {
border: 0px solid #edf0f1;
border-top-width: 10px;
border-right-width: 10px;
border-left-width: 10px;
}
th.highlight {
border-top: 10px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<table>
<thead>
<tr>
<th data-col="1"><div>Important</div></th>
<th data-col="2"><div>Information</div></th>
<th data-col="3"><div>Interchange</div></th>
</tr>
</thead>
<tbody>
<tr>
<td data-col="1"><div>Hello world, how are you today</div></td>
<td data-col="2"><div>again</div></td>
<td data-col="3"><div>and we're done</div></td>
</tr>
<tr>
<td data-col="1"><div>More things</div></td>
<td data-col="2"><div>Cow level is real!!1111</div></td>
<td data-col="3"><div>over 9000%</div></td>
</tr>
</tbody>
</table>
</div>
All that was needed is to wrap the contents into a div and tweak the CSS a little.
This way, I keep the properties of the table (including dynamic row height) but can still highlight per column. Hope it helps someone.
I've got a news letter program that has a table with a border but I'm trying to make the border have rounded edges. For some reason when I add in "border-radius: 20px;" it doesn't work.
<table style="border-radius: 20px; order-color: #000000; border-width: 1px; width: 680px;" border="1" cellpadding="5" rules="none" align="center">
I cant have a separate style sheet. It just shows a standard square border. Maybe Im doing it wrong, Im not great at html.
By default, table is set to display: table;. Change that to display: block; and add border-collapse: seperate;
example:
<table style="border-radius: 20px; border-color: #000000; border-width: 1px; width: 680px; display: block; border-collapse: separate;" border="1" cellpadding="5" rules="none" align="center">
jsfiddle: http://jsfiddle.net/57we8/
Try this in your css:
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
And then then consider including PIE.htc (http://css3pie.com/) or something similar for IE:
*behavior:url(PIE.htc); /* shows in IE7 and below */
_behavior:url(PIE.htc); /* shows in IE6 and below */
try this css
body {
margin: 30px;
}
table {
border-collapse: separate;
border-spacing: 0;
min-width: 350px;
}
table tr th,
table tr td {
border-right: 1px solid #bbb;
border-bottom: 1px solid #bbb;
padding: 5px;
}
table tr th:first-child,
table tr td:first-child {
border-left: 1px solid #bbb;
}
table tr th {
background: #eee;
border-top: 1px solid #bbb;
text-align: left;
}
/* top-left border-radius */
table tr:first-child th:first-child {
border-top-left-radius: 6px;
}
/* top-right border-radius */
table tr:first-child th:last-child {
border-top-right-radius: 6px;
}
/* bottom-left border-radius */
table tr:last-child td:first-child {
border-bottom-left-radius: 6px;
}
/* bottom-right border-radius */
table tr:last-child td:last-child {
border-bottom-right-radius: 6px;
}