Is it possible for a table header to have rounded corners and a 1px border?
When I apply a border to the th elements, the border corners are square instead of round.
table {
border-collapse: collapse;
}
th {
background: cyan;
border: 1px solid;
}
th:first-child {
border-radius: 10px 0 0 0;
}
th:last-child {
border-radius: 0 10px 0 0;
}
td {
border: 1px solid;
}
<table>
<tr><th>Col 1</th><th>Col 2</th></tr>
<tr><td>a</td><td>b</td></tr>
<tr><td>c</td><td>d</td></tr>
</table>
This makes all table headers (if you are using semantic th cells instead of body td cells) have rounded corners, but if you wish it for only selected tables - then rename the class to table.rounded th and just add rounded class to those tables:
th {
-khtml-border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-ms-border-radius: 4px 4px 4px 4px;
-o-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
border: solid 1px black;
}
EDIT: you need to have border-collapse: separate; on your table for this to be possible...
Add a <div> wrapper inside of each <th>. Add your border styles to the wrappers.
table {
border-collapse: collapse;
}
th {
padding: 0;
}
th div {
background: cyan;
border: 1px solid;
width: 80px;
}
th:first-child div {
border-radius: 10px 0 0 0;
}
th:last-child div {
border-radius: 0 10px 0 0;
}
<table>
<tr>
<th><div>Col 1</div></th>
<th><div>Col 2</div></th>
<th><div>Col 3</div></th>
<th><div>Col 4</div></th>
</tr>
</table>
You can use box-shadow to fake the border:
box-shadow: 0px 0px 2px #ddd inset;
Admittedly, this results in a brighter color than with normal borders, so you'll have to compensate for that.
Related
I have a table on which I want to highlight a number of successive rows (TR's) by applying a box-shadow around them.
My strategy was to apply a class called "selected-top" to the first row of the selection, classes "selected-middle" for the middle part, and "selected-bottom" for the last row.
However, the shadows of the middle rows bleed over. I tried to rectify this by using z-index (I know that I have to add a relative property with that, so I did), but they seem to have no effect:
Here's the code:
tr.selected-top {
box-shadow: -5px -5px 5px #000, 5px -5px 5px #000;
position: relative;
z-index:10;
}
tr.selected-middle {
box-shadow: -5px 0px 5px #000, 5px 0px 5px #000;
position: relative;
z-index: -1;
}
The table is just a regular table:
<table>
<tr><td>stuff</td></tr>
<tr class="selected-top"><td>highlighting starts</td></tr>
<tr class="selected-middle"><td>highlighting middle</td></tr>
<tr class="selected-bottom"><td>highlighting end</td></tr>
<tr><td>other stuff</td></tr>
</table>
What am I doing wrong?
By the way, I did try to only apply a shadow to only the sides for the middle rows, but that way the shadow is not continuous.
Update: #Aditya Toke, like so: (left is wrong shading, right is correct shading)
You can achieve it using ::before and ::after pseudo elements to mask the top and bottom shadow from "middle" row.
The height of the pseudo elements is set exactly equal to the length of the shadow for masking and is absolute position.
Since the shadow hides the top borders of selected-bottom and it's next sibling element we need to add them back as:
tr.selected-middle td,
tr.selected-bottom td {
border-bottom: 1px solid #666;
}
body {
background-color: #1b1b1b;
margin: 20px;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: auto;
box-sizing: border-box;
border: none;
margin: auto;
}
tr { display: block; }
tr, td {
height: 50px;
background: #333;
color: #eee;
}
td {
padding-left: 16px;
min-width: 170px;
width: 100%;
border-top: 1px solid #666;
}
tr.selected-top {
position: relative;
box-shadow: -5px -5px 5px #000, 5px -5px 5px #000;
}
tr.selected-middle {
position: relative;
box-shadow: 0px 0px 5px 5px #000;
}
tr.selected-bottom {
position: relative;
box-shadow: 5px 5px 5px #000, -5px 5px 5px #000;
}
tr.selected-middle ::before,
tr.selected-middle ::after {
pointer-events: none;
position: absolute;
content:" ";
background-color: #333;
left: 0;
width: 100%;
}
tr.selected-middle ::before {
height: 10px;
top: -10px;
}
tr.selected-middle ::after {
top: calc(100% + 4px);
height: 5px;
}
tr.selected-middle td,
tr.selected-bottom td {
border-bottom: 1px solid #666;
}
<table>
<tbody>
<tr>
<td>Some stuffs</td>
</tr>
<tr class="selected-top">
<td>highlighting starts</td>
</tr>
<tr class="selected-middle">
<td>highlighting middle</td>
</tr>
<tr class="selected-bottom">
<td>highlighting ends</td>
</tr>
<tr>
<td>Some stuffs</td>
</tr>
</tbody>
</table>
table {
height: 67vh;
width: 59vw;
background-color: #333333;
}
td {
/* background-color: #333333; */
color: white;
}
div {
display: flex;
justify-content: center;
align-items: center;
}
.div1 {
box-shadow: -5px -5px 5px #000, 5px -5px 5px #000;
height: 100%;
border: 1px solid darkgrey;
border-left: 0;
border-right: 0;
}
.div2 {
box-shadow: -4px 0px 2px 0.5px #000, 2px 0px 0.5px 0.5px #000, 5px 0.5px 3px 0px #000;
height: 100%;
border: 1px solid #333333;
}
.div3 {
box-shadow: -6px 3px 5px #000, 6px 5px 6px 1px #000;
height: 100%;
position: relative;
border: 1px solid darkgrey;
border-left: 0;
border-right: 0;
}
<!DOCTYPE html>
<html lang="en">
<body>
<table>
<tr>
<td>stuff</td>
</tr>
<tr class="selected-top">
<td>
<div class="div1">
highlighting starts
</div>
</td>
</tr>
<tr class="selected-middle">
<td>
<div class="div2">
highlighting middle
</div>
</td>
</tr>
<tr class="selected-bottom">
<td>
<div class="div3">
highlighting end
</div>
</td>
</tr>
<tr>
<td>other stuff</td>
</tr>
</table>
</body>
</html>
I tried to create similar to what you have provided in the expected output
I’m trying to adapt some css code I found, however my table seems ugly (according to me). I'll explain this on a picture.
css:
td, th {
border-left: 1px solid #494437;
border-top: 1px solid #494437;
padding: 10px;
text-align: left;
}
th {
background-color: #b8ae9c;
-webkit-box-shadow: inset 2px 2px 0px 0px rgba(255,255,255,1);
-moz-box-shadow: inset 2px 2px 0px 0px rgba(255,255,255,1);
box-shadow: inset 2px 2px 0px 0px rgba(255,255,255,1);
border-top: none;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
td:first-child, th:first-child {
border-left: none;
}
I explained what I want by an image:
EDIT: For example I expect white area on right side, when I add padding-right: 0.2em; into "th". But it doesn't change anything.
Is this what you are expecting?
.table {
border: 1px solid #000;
float: left;
}
.header {
border: 2px solid #ccc;
border-width: 2px 0 0 2px;
background-color: #b8ae9c;
margin: 2px;
float: left;
}
<div class="table">
<div class="header">Header</div>
<div class="header">Header</div>
</div>
When I add td element with a dark background in my table that has a light background with a border, I want that in the dark td element, the border of the table doesn't see.
For example:
table {
border: 1px solid yellow;
width: 40%;
border-spacing: 0;
}
td {
padding: 10px;
}
td.black {
background: #000;
color: #fff;
}
<table>
<tr>
<td class="black">Something</td>
</tr>
<tr>
<td>Something else</td>
</tr>
</table>
In the first td, the dark td, I don't want to see the yellow border of the table.
You can't, but you could just add the border to the default 'td' element insted of 'table' and create a special rule for the black one.
table {
width: 40%;
border-spacing: 0;
/* border-collapse: collapse; // get a single border */
}
td {
padding: 10px;
border: 2px solid yellow;
}
td.black {
background: #000;
color: #fff;
border: 2px solid green;
}
http://jsfiddle.net/pr1d3c5b/
If you want to add just a box-shadow, you can try with this variation (for red color), but it's not precise
-webkit-box-shadow: 0px 0px 0px 2px rgba(255, 0, 0, 1);
-moz-box-shadow: 0px 0px 0px 2px rgba(255, 0, 0, 1);
box-shadow: 0px 0px 0px 2px rgba(255, 0, 0, 1);
http://jsfiddle.net/pr1d3c5b/1/
You can try this generator http://css3gen.com/box-shadow/ and play with the 'spread' value under the optional settings
I need to make box-shadow for each table cell using :before pseudo element. It works perfect in all browsers except firefox.
CSS
table {
border-collapse: collapse;
}
.box2 .c-table {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
border-left: 1px solid #e5e3d5;
border-top: 1px solid #e5e3d5;
border-bottom: 1px solid #ebe8da;
border-right: 1px solid #ebe8da;
}
.box .c-table {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
border-left: 1px solid #e0ded1;
border-top: 1px solid #e0ded1;
border-bottom: 1px solid #e6e4d6;
border-right: 1px solid #e6e4d6;
}
.inbox .c-table {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
border-left: 1px solid #e0ded1;
border-top: 1px solid #e0ded1;
border-bottom: 1px solid #e6e4d6;
border-right: 1px solid #e6e4d6;
}
.c-table tr > td {
position: relative;
padding: 5px;
}
.c-table tr + tr {
border-top: 1px solid #f0eee0;
}
.c-table td + td {
border-left: 1px solid #f0eee0;
}
.c-table td:before {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
content: '';
-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.15);
-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.15);
box-shadow: inset 0 0 4px rgba(0,0,0,0.15);
}
.inbox {
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #444444;
padding: 5px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
background-color: #d3d2c5;
border: 1px solid #f0eee0;
text-shadow: -1px -1px rgba(240,238,224,1), 1px 1px rgba(240,238,224,1);
-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.15);
-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.15);
box-shadow: inset 0 0 4px rgba(0,0,0,0.15);
}
.box2 .inbox {
border-left: 1px solid #e5e3d5;
border-top: 1px solid #e5e3d5;
border-bottom: 1px solid #ebe8da;
border-right: 1px solid #ebe8da;
}
HTML
<div class="inbox margin-space">
<table class="c-table ">
<tbody>
<tr class="th">
<td>column1</td>
<td>column2</td>
<td>column3</td>
</tr>
<tr>
<td>row1</td>
<td>row2</td>
<td>row3</td>
</tr>
<tr>
<td>row4</td>
<td>row5</td>
<td>row6</td>
</tr>
<tr>
<td>row7</td>
<td>row8</td>
<td>row9</td>
</tr>
<tr>
<td>row10</td>
<td>row11</td>
<td>row12</td>
</tr>
</tbody>
</table>
</div>
I want to use pseudo for .c-table td because it makes a visual diffrence. ( visible in chrome )
http://fiddle.jshell.net/UXeBj/10/
Temporary solution
#-moz-document url-prefix() {
.c-table td:before {
content: none;
}
.c-table td {
box-shadow: inset 0 0 4px rgba(0,0,0,0.15);
}
}
apparently this bug report causes the same issue:
https://bugzilla.mozilla.org/show_bug.cgi?id=63895
I have the following css:
fieldset ul li input {
width: 96%;
margin: 0;
padding: 6px;
font-size: 13px;
border: 1px solid #CCC;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 2px 2px white, inset 0 1px 3px #EEE;
-webkit-box-shadow: 0 2px 2px white, inset 0 1px 3px #EEE;
box-shadow: 0 2px 2px white, inset 0 1px 3px #EEE;
}
Which is working under Firefox and Chrome. However in IE9, when I insert some text, I can't see it completely. As you can see is hidden in the half of it:
Either increase the height or the padding.
input {
padding: 10px;
}