I'm busy using reflow tables in jquery mobile. I would like to have the 1st and last rows of my table to have rounded edges. I'm using the following code:
th:first-child {
-moz-border-radius: 6px 0 0 0;
-webkit-border-radius: 6px 0 0 0;
border-radius: 6px 0 0 0;
}
th:last-child {
-moz-border-radius: 0 6px 0 0;
-webkit-border-radius: 0 6px 0 0;
border-radius: 0 6px 0 0;
}
The HTML is similar to this;
<table>
<thead>
<tr>
<th>First column</th>
<th>Second column</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row one, cell one</td>
<td>Row one, cell two</td>
</tr>
<tr>
<td>Row two, cell one</td>
<td>Row two, cell two</td>
</tr>
<tr>
<td>Row three, cell one</td>
<td>Row four, cell two</td>
</tr>
</tbody>
I would literally just want the top most and bottom most cell to have rounded edges.
This comes a little close...
thead tr:first-child th:first-child {
-moz-border-radius: 6px 0 0 0;
-webkit-border-radius: 6px 0 0 0;
border-radius: 6px 0 0 0;
}
thead tr:first-child th:last-child {
-moz-border-radius: 0px 6px 0 0;
-webkit-border-radius: 0px 6px 0 0;
border-radius: 0px 6px 0 0;
}
tr:last-child td:first-child{
-moz-border-radius: 0px 0px 0px 6px;
-webkit-border-radius: 0px 0px 0px 6px;
border-radius: 0px 0px 0px 6px;
}
tr:last-child td:last-child{
-moz-border-radius: 0px 0px 6px 0px;
-webkit-border-radius: 0px 0px 6px 0px;
border-radius: 0px 0px 6px 0px;
}
Your problem is related to the element's display property, this should solve it.
It works by giving the table itself the border properties:
table {
border: 1px solid #000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
DEMO
Related
I have a table with cells that have a background-color. I'm trying to set the box-shadow for the thead, but the background of a cells in first column overlaps a shadow. I tried to set a different z-index values and position: relative, but to no avail.
.results-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
}
.results-table th,
.results-table td {
padding: 1em;
width: 96px;
border-left: 1px solid rgba(34, 36, 38, 0.1);
border-top: 1px solid rgba(34, 36, 38, 0.1);
}
.results-table thead {
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
position: relative;
}
.results-table thead th {
background: #E0E0E0;
border-bottom: 1px solid rgba(34, 36, 38, 0.1);
}
.results-table tr:first-child td,
.results-table tr:first-child th {
border-top: none;
}
.results-table tr th:first-child,
.results-table tr td:first-child {
border-left: none;
}
.item-cell.item-cell {
width: 128px;
}
td.item-cell.item-cell {
background: lightgreen;
}
<table class="results-table">
<thead>
<tr>
<th class="item-cell">
Item
</th>
<th>
Package
</th>
<th>
Price
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="item-cell">
Link 1
</td>
<td>Package 1</td>
<td>Price 1</td>
</tr>
<tr>
<td class="item-cell">
Link 2
</td>
<td>Package 2</td>
<td>Price 2</td>
</tr>
<tr>
<td class="item-cell">
Link 3
</td>
<td>Package 3</td>
<td>Price 3</td>
</tr>
</tbody>
</table>
By the way, a shadow works in Firefox, but does not work in other browsers.
Firefox [image]
Chrome, Opera, Edge, IE11 [image]
So how to implement a shadow for the thead?
Thanks.
add z-index negative on td
.results-table td{
position: relative;
z-index: -1;
}
You can change this :
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
to this :
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
-moz-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
thumbs up for Answer # 2. But there is new solution for this old problem i.e clip-path
body {
background: #f7f7f7;
}
.container {
width: 500px;
}
.item {
background: #fff;
height: 50px;
box-shadow: inset 0 1px #000;
/* Solution # 1 Starts */
/* z-index: -1;
position:relative */
/* Solution # 1 Ends */
/* Solution # 2 Starts */
clip-path: inset(0 1px 1px);
/* Solution # 2 End */
}
.cell {
box-shadow: inset 0 -1px #000;
/* box-shadow: 0 1px #000; */
}
<div class="container">
<div class="cell">
<div class="item">ITEM 1</div>
<div class="item">ITEM 2</div>
<div class="item">ITEM 3</div>
</div>
</div>
I'm trying to add box-shadow to the first row of the table (header),
which works fine in Firefox, but unfortunately doesn't work in Chrome.
I have tried using different display property values (e.g "display: block"),
which adds the shadow in Chrome, but moves the whole header into the first cell of the first column. Any solutions on how to add box-shadow in my case?
Below is my CSS/HTML example (box-shadow is used with selector "tr:first-child"):
body,
html {
height: 100%;
background-color: #E0E0E0;
}
table {
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 25px;
background: linear-gradient(to bottom, #E0E0E0 0%, #E1E1E1 10%, #E5E5E5 47%, #E7E7E7 100%);
-webkit-border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
box-sizing: border-box;
}
table,
th,
td {
border-collapse: collapse;
}
tr:hover {
background-color: #E0E0E0;
}
tr:first-child {
background-color: #E0E0E0;
-webkit-border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
-webkit-box-shadow: 3px 5px 10px grey;
-moz-box-shadow: 3px 5px 10px grey;
box-shadow: 3px 5px 10px grey;
}
th {
background-color: #404040;
color: #FFFFFF;
}
th,
td {
padding: 3px;
max-width: 600px;
}
td {
border-bottom: 1px solid #909090;
}
td.last_row {
border-bottom: none;
}
td:first-child {
text-align: center;
width: 25px;
}
td:last-child {
text-align: center;
width: 50px;
}
#column_1 {
-webkit-border-radius: 10px 0px 0px 10px;
-moz-border-radius: 10px 0px 0px 10px;
border-radius: 10px 0px 0px 10px;
}
#column_2 {
-webkit-border-radius: 0px 10px 10px 0px;
-moz-border-radius: 0px 10px 10px 0px;
border-radius: 0px 10px 10px 0px;
}
.outer_col {
border: none;
}
<body>
<table>
<tr>
<th id="column_1">ID</th>
<th id="column_2" colspan="2">DESCRIPTION</th>
</tr>
<tr>
<td class="outer_col">1</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td class="outer_col">Link
</td>
</tr>
<tr>
<td class="outer_col">2</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td class="outer_col">Link
</td>
</tr>
<tr>
<td class="outer_col">3</td>
<td class="last_row">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td class="outer_col">Link
</td>
</tr>
</table>
</body>
Move you box-shadow effect to th:
th {
background-color: #404040;
color: #FFFFFF;
-webkit-border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
-webkit-box-shadow: 3px 5px 10px grey;
-moz-box-shadow: 3px 5px 10px grey;
box-shadow: 3px 5px 10px grey;
}
tr:first-child is the same as th in your case, so you don't need it.
To make it work in recent versions of IE you will need to add to th:
border-collapse:separate;
Chrome has issues in general to use box-shadow on a row. Just rewrite your "tr:firstchild" to the "th"-Element and it works in Chrome. "box-shadow property works only with elements, which have display: block or display:inline-block attribute."
So if you use display: block or display: inline-block it applies your shadow, but also breaks the full layout of your table. So I'd advice to just rebuild your shadow on th... :)
I have the following HTML & CSS
HTML
<table class="StandardTable">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 25%">A</td>
<td style="width: 25%">B</td>
<td style="width: 25%">C</td>
<td style="width: 25%">D</td>
</tr>
</tbody>
</table>
CSS
.StandardTable {
border: 1px solid #656565;
border-radius: 10px;
-moz-border-radius: 10px;
margin-left: auto;
margin-right: auto;
box-shadow: 10px 10px 5px #888888;
width: 300px;
margin-bottom: 15px;
border-spacing: 0;
}
.StandardTable thead {
border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 5px;
background-color: lightgray;
}
I have created the jsFiddle for this too. The background in the THEAD always bleeds / runs out of the border and does not round.
I tested in IE, FF, and chrome. It is most apparent in chrome because the bleed happens above the border where in IE and FF the bleed happens under.
Any help in fixing the issue (make the background stop correctly around the edges), is greatly appreciated. I did try to add Border-Radius on TH element, but that did not work.
You need to apply the rounded corners to the first and last table cell in the thead. Set the background for thead to transparent, and add this:
.StandardTable thead th{
background: lightgray;
}
.StandardTable thead th:first-of-type{
border-top-left-radius: 10px;
}
.StandardTable thead th:last-of-type{
border-top-right-radius: 10px;
}
Demo JsFiddle
try this (worked for me in FF)
.StandardTable {
border: 1px solid #656565;
border-radius: 10px;
-moz-border-radius: 10px;
margin-left: auto;
margin-right: auto;
box-shadow: 10px 10px 5px #888888;
width: 300px;
margin-bottom: 15px;
border-spacing: 0;
}
.StandardTable thead tr th {
background-color: lightgray;
}
.StandardTable thead tr th:first-child {
z-index:-1;
border-radius: 10px 0 0 0;
-moz-border-radius: 10px 0 0 0;
border-radius: 10px 0 0 0;
}
.StandardTable thead tr th:last-child {
z-index:-1;
border-radius: 0 10px 0 0;
-moz-border-radius: 0 10px 0 0;
border-radius: 0 10px 0 0;
}
Another workaround is to do the following
.StandardTable {
border: 1px solid #656565;
border-radius: 10px;
-moz-border-radius: 10px;
margin-left: auto;
margin-right: auto;
box-shadow: 10px 10px 5px #888888;
width: 300px;
margin-bottom: 15px;
border-spacing: 0;
background-color: lightgray;
}
.StandardTable tbody tr td {
background-color: white;
}
.StandardTable tbody tr:last-child td:last-child {
border-bottom-right-radius: 10px;
}
.StandardTable tbody tr:last-child td:first-child {
border-bottom-left-radius: 10px;
}
I want to add a border radius around the entire table. But the following code is not working in both the latest versions of Firefox and Google Chrome.
table {
border-spacing: 0;
width: 600px;
margin: 30px;
border: 1px solid #CCCCCC;
border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px 6px 6px 6px;
box-shadow: 0 1px 1px #CCCCCC;
}
table th:first-child {
border-radius: 6px 0 0 0;
-moz-border-radius: 6px 0 0 0;
-webkit-border-radius: 6px 0 0 0;
}
table th:last-child {
border-radius: 0 6px 0 0;
-moz-border-radius: 0 6px 0 0;
-webkit-border-radius: 0 6px 0 0;
}
table td:first-child,
.bordered th:first-child {
border-left: medium none;
}
table th {
background-color: #DCE9F9;
background-image: -moz-linear-gradient(center top, #F8F8F8, #ECECEC);
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#F8F8F8), to(#ECECEC), color-stop(.4, #F8F8F8));
border-top: medium none;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
table td,
table th {
border-left: 1px solid #CCCCCC;
border-top: 1px solid #CCCCCC;
padding: 10px;
text-align: left;
}
<table class="bordered">
<thead>
<tr>
<th><label>Labels</label></th>
<th><label>Labels</label></th>
<th><label>Labels</label></th>
<th><label>Labels</label></th>
<th><label>Labels</label></th>
</tr>
</thead>
<tbody>
<tr>
<td><label>Value</label></td>
<td><label>Value</label></td>
<td><label>Value</label></td>
<td><label>Value</label></td>
<td><label>Value</label></td>
</tr>
</tbody>
</table>
JSFiddle
border-collapse: separate !important; worked.
Thanks.
HTML
<table class="bordered">
<thead>
<tr>
<th><label>Labels</label></th>
<th><label>Labels</label></th>
<th><label>Labels</label></th>
<th><label>Labels</label></th>
<th><label>Labels</label></th>
</tr>
</thead>
<tbody>
<tr>
<td><label>Value</label></td>
<td><label>Value</label></td>
<td><label>Value</label></td>
<td><label>Value</label></td>
<td><label>Value</label></td>
</tr>
</tbody>
</table>
CSS
table {
border-collapse: separate !important;
border-spacing: 0;
width: 600px;
margin: 30px;
}
.bordered {
border: solid #ccc 1px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 1px 1px #ccc;
-moz-box-shadow: 0 1px 1px #ccc;
box-shadow: 0 1px 1px #ccc;
}
.bordered tr:hover {
background: #ECECEC;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.bordered td, .bordered th {
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
padding: 10px;
text-align: left;
}
.bordered th {
background-color: #ECECEC;
background-image: -webkit-gradient(linear, left top, left bottom, from(#F8F8F8), to(#ECECEC));
background-image: -webkit-linear-gradient(top, #F8F8F8, #ECECEC);
background-image: -moz-linear-gradient(top, #F8F8F8, #ECECEC);
background-image: linear-gradient(top, #F8F8F8, #ECECEC);
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
-moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
border-top: none;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.bordered td:first-child, .bordered th:first-child {
border-left: none;
}
.bordered th:first-child {
-moz-border-radius: 6px 0 0 0;
-webkit-border-radius: 6px 0 0 0;
border-radius: 6px 0 0 0;
}
.bordered th:last-child {
-moz-border-radius: 0 6px 0 0;
-webkit-border-radius: 0 6px 0 0;
border-radius: 0 6px 0 0;
}
.bordered th:only-child{
-moz-border-radius: 6px 6px 0 0;
-webkit-border-radius: 6px 6px 0 0;
border-radius: 6px 6px 0 0;
}
.bordered tr:last-child td:first-child {
-moz-border-radius: 0 0 0 6px;
-webkit-border-radius: 0 0 0 6px;
border-radius: 0 0 0 6px;
}
.bordered tr:last-child td:last-child {
-moz-border-radius: 0 0 6px 0;
-webkit-border-radius: 0 0 6px 0;
border-radius: 0 0 6px 0;
}
jsFiddle
It works, this is a problem with the tool used: normalized CSS by jsFiddle is causing the problem by hiding you the default of browsers...
See http://jsfiddle.net/XvdX9/5/
EDIT:
normalize.css stylesheet from jsFiddle adds the instruction border-collapse: collapse to all tables and it renders them completely differently in CSS2.1:
The separated borders model
The collapsing border model
Differences between the 2 models can be seen in this other fiddle: http://jsfiddle.net/XvdX9/11/ (with some transparencies on cells and an enormous border-radius on the top-left one, in order to see what happens on table vs its cells)
In the same CSS2.1 page about HTML tables, there are also explanations about what browsers should/could do with empty-cells in the separated borders model, the difference between border-style: none and border-style: hidden in the collapsing borders model, how width is calculated and which border should display if both table, row and cell elements define 3 different styles on the same border.
This is my solution using the wrapper, just removing border-collapse might not be helpful always, because you might want to have borders.
.wrapper {
overflow: auto;
border-radius: 6px;
border: 1px solid red;
}
table {
border-spacing: 0;
border-collapse: collapse;
border-style: hidden;
width:100%;
max-width: 100%;
}
th, td {
padding: 10px;
border: 1px solid #CCCCCC;
}
<div class="wrapper">
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Foo Bar boo</td>
<td>Lipsum</td>
<td>Beehuum Doh</td>
</tr>
<tr>
<td>Dolor sit</td>
<td>ahmad</td>
<td>Polymorphism</td>
</tr>
<tr>
<td>Kerbalium</td>
<td>Caton, gookame kyak</td>
<td>Corona Premium Beer</td>
</tr>
</tbody>
</table>
</div>
This article helped: https://css-tricks.com/table-borders-inside/
A note to this old question:
My reset.css had set border-spacing: 0, causing the corners to get cut off. I had to set it to 3px for my radius to work properly (value will depend on the radius in question).
Just add overflow:hidden to the table with border-radius.
.tablewithradius {
overflow:hidden ;
border-radius: 15px;
}
<div class="leads-search-table">
<div class="row col-md-6 col-md-offset-2 custyle">
<table class="table custab bordered">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Parent ID</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>News</td>
<td>News Cate</td>
<td class="text-center"><a class='btn btn-info btn-xs' href="#"><span class="glyphicon glyphicon-edit"></span> Edit</a> <span class="glyphicon glyphicon-remove"></span> Del</td>
</tr>
<tr>
<td>2</td>
<td>Products</td>
<td>Main Products</td>
<td class="text-center"><a class='btn btn-info btn-xs' href="#"><span class="glyphicon glyphicon-edit"></span> Edit</a> <span class="glyphicon glyphicon-remove"></span> Del</td>
</tr>
<tr>
<td>3</td>
<td>Blogs</td>
<td>Parent Blogs</td>
<td class="text-center"><a class='btn btn-info btn-xs' href="#"><span class="glyphicon glyphicon-edit"></span> Edit</a> <span class="glyphicon glyphicon-remove"></span> Del</td>
</tr>
</table>
</div>
</div>
Css
.custab{
border: 1px solid #ccc;
margin: 5% 0;
transition: 0.5s;
background-color: #fff;
-webkit-border-radius:4px;
border-radius: 4px;
border-collapse: separate;
}
No need to worry..Just add
overflow: hidden;
and then apply border radius. Border radius will be applied to all the four sides.
To use border radius I have a border radius of 20px in the table, and then put the border radius on the first child of the table header (th) and the last child of the table header.
table {
border-collapse: collapse;
border-radius:20px;
padding: 10px;
}
table th:first-child {
/* border-radius = top left, top right, bottom right, bottom left */
border-radius: 20px 0 0 0; /* curves the top left */
padding-left: 15px;
}
table th:last-child {
border-radius: 0 20px 0 0; /* curves the top right */
}
This however will not work if this is done with table data (td) because it will add a curve onto each table row. This is not a problem if you only have 2 rows in your table but any additional ones will add curves onto the inner rows too.
You only want these curves on the outside of the table.
So for this, add an id to your last row.
Then you can apply the curves to them.
/* curves the first tableData in the last row */
#lastRow td:first-child {
border-radius: 0 0 0 20px; /* bottom left curve */
}
/* curves the last tableData in the last row */
#lastRow td:last-child {
border-radius: 0 0 20px 0; /* bottom right curve */
}
I have a table with headers and each header contains a span which have a background image that i use as a sperator between the th.
On all browsers it display as it should but on IE7 the seperator image (which is a span with background)
is showing on the bottom.
Good (IE8+,Chrome,FF):
Bad (IE7):
HTML:
<div class="tableWrapper">
<table>
<thead>
<tr>
<th class="sortable top-left-round">Lead Id<span></span></th>
<th class="sortable">Create Date<span></span></th>
<th class="sortable">Target Group<span></span></th>
<th class="sortable">Activity<span></span></th>
<th class="sortable">Type<span></span></th>
<th class="sortable">Last Update<span></span></th>
<th class="sortable">Close Date<span></span></th>
<th class="action_header_short top-right-round"><span>View</span></th>
</tr>
</thead>
<tbody>
<tr class="first">
<td>1</td>
<td class="col_name" title="Jackson">10/12/2011</td>
<td title="Jackson">Jackson</td>
<td title="Jackson">Jackson </td>
<td title="Jackson">Jackson</td>
<td title="Jackson">10/12/2011</td>
<td title="Jackson">10/12/2011</td>
<td class="action"></td>
</tr>
<tr>
<td>1</td>
<td class="col_name" title="Jackson">10/12/2011</td>
<td title="Jackson">Jackson</td>
<td title="Jackson">Jackson </td>
<td title="Jackson">Jackson</td>
<td title="Jackson">10/12/2011</td>
<td title="Jackson">10/12/2011</td>
<td class="action"></td>
</tr>
</tbody>
</table>
</div>
<!-- end .tableWrapper -->
CSS:
table{
width: 890px;
margin-left: 25px;
border-collapse:collapse;
}
td{
border: 1px solid #99a3a7;
}
.top-left-round{
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 5px 0px 0px 0px;
border-radius: 5px 0px 0px 0px;
}
.top-right-round{
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 0px 5px 0px 0px;
border-radius: 0px 5px 0px 0px;
}
table thead th{
background: url(../images/table-header-bg.png) repeat-x;
height: 42px;
line-height: 40px;
border: 0px solid transparent;
font-weight:normal;
}
th.action_header span {
margin-right:50px;
}
th.action_header {
width: 120px;
text-align: left;
padding-left: 20px
}
th.action_header_short{
padding-left: 20px;
}
th a.sortable,th.action_header span,th.action_header_short span {
color: #fff;
font-size: 15px;
font-weight: normal;
text-decoration: none;
}
th a.sortable{
padding: 0 15px;
background: url(../images/icons/arrow_dwn.png) right center no-repeat;
}
th.sortable span{
background: url(../images/cols-seperator.png) right top no-repeat;
float:right;
margin-right: -2px;
width:5px;
height: 42px;
}
th a:hover{
color: #fff;
}
tbody td{
padding: 0 5px;
}
td.action{
width:74px;
padding: 2px;
}
.tableWrapper{
border-bottom: 1px solid #E5E5E5;
padding-bottom: 8px;
}
Style this with CSS instead of an image. You're always going to have issues using an image like this.