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;
}
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>
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>
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.
I need to create a table with two columns and the first column, the cells only have a bottom border, where the cells in the second column have borders all around with round corner for the top and bottom.
My code looks like this, and work in Explorer, but in Firefox and Chrome it gives me round corner border plus normal corners:
table {
border-collapse: collapse;
width: 50%;
font-family: Proxima Nova, Arial;
}
.h1 {
/*Head cell red*/
text-align: center;
border: 1px solid #D81541;
border-radius: 20px 20px 0px 0px;
background-color: #D81541;
color: white;
font-size: 1.5em;
font-weight: bold;
width: 60%;
}
.td1 {
/*right column cells*/
border: 1px solid #6D6E70;
text-align: left;
width: 60%;
}
.td2 {
/*left column cells bold*/
border-bottom: 1px solid #6D6E70;
font-weight: bold;
vertical-align: top;
}
.td3 {
/*last cell right column*/
border: 1px solid #6D6E70;
border-radius: 0px 0px 20px 20px;
text-align: left;
width: 60%;
}
.td4 {
/*last cell left column*/
vertical-align: top;
font-weight: bold;
}
<table>
<tr>
<td class="td2"></td>
<td class="h1">My top corners should be round</td>
</tr>
<tr>
<td class="td2">bla</td>
<td class="td1">blabla</td>
</tr>
<tr>
<td class="td4">last row</td>
<td class="td3">my bottom corners should be round</td>
</tr>
</table>
Just remove border-collapse: collapse; from .table & add border-spacing:0 to it
Check the snippet. with thanks to #Abhitalks for his previous fiddle.
table {
border-spacing: 0;
width: 50%;
font-family: Proxima Nova, Arial;
}
.h1 {
/*Head cell red*/
text-align: center;
border: 1px solid #D81541;
border-radius: 20px 20px 0px 0px;
background-color: #D81541;
color: white;
font-size: 1.5em;
font-weight: bold;
width: 60%;
}
.td1 {
/*right column cells*/
border: 1px solid #6D6E70;
text-align: left;
width: 60%;
}
.td2 {
/*left column cells bold*/
border-bottom: 1px solid #6D6E70;
border-top: 1px solid #6D6E70;
font-weight: bold;
vertical-align: top;
}
.td3 {
/*last cell right column*/
border: 1px solid #6D6E70;
border-radius: 0px 0px 20px 20px;
text-align: left;
width: 60%;
}
.td4 {
/*last cell left column*/
vertical-align: top;
font-weight: bold;
border-top: 1px solid #6D6E70;
}
.td5 {
/*left column first cells*/
border-bottom: 1px solid #6D6E70;
font-weight: bold;
vertical-align: top;
}
<table>
<tr>
<td class="td5"></td>
<td class="h1">My top corners should be round</td>
</tr>
<tr>
<td class="td2">bla</td>
<td class="td1">blabla</td>
</tr>
<tr>
<td class="td4">last row</td>
<td class="td3">my bottom corners should be round</td>
</tr>
</table>
Have you tried this?
td
{
border-radious:0px;
}
That's my CSS for styling up the HTML table. I guess something is messing the hover state.
.tg {
border-collapse:collapse;
border-spacing:0;
border-color:#ccc;
}
.tg td {
font-family: Arial, sans-serif;
font-size: 14px;
width: 150px;
height: 10px;
padding: 10px 5px;
border-style: solid;
border-width: 1px;
border-color: #ccc;
color: #333;
background-color: #fff;
}
tr:hover {
background-color:red !important;
}
Since I don't get the desired effect of having a red background while hovering the line. Here's the HTML:
<table class="tg">
<tr class='tr-031e'>
<th class="tg-031e"><b>№</b></th>
<th class="tg-031e"><b>Name</b></th>
<th class="tg-031e"><b>Age</b></th>
</tr>
<tr class='tr-031e'>
<td class="tg-031e"><input type='checkbox' name='person'></td>
<td class="tg-031e">Guy</td>
<td class="tg-031e">18</td>
</tr>
</table>
What about this,
tr:hover td { background-color:red; }
<td>s exist on a layer on top of the <tr>, as a result, your background-color: white is covering up the red.
.tg {
border-collapse:collapse;
border-spacing:0;
border-color:#ccc;
}
.tg td {
font-family: Arial, sans-serif;
font-size: 14px;
width: 150px;
height: 10px;
padding: 10px 5px;
border-style: solid;
border-width: 1px;
border-color: #ccc;
color: #333;
}
tr {
background-color: #fff;
}
tr:hover {
background-color:red !important;
}
Try this:
tr:hover, td:hover {
background-color:red;
}
EDIT
In .tg td, remove:
background-color: #fff;
JSFiddle Demo