For some reason these 2 tables won't center, I tried the bootstrap container class, tried margin 0 auto. But they won't center smack in the middle, any idea?
I want both tables centered and displayed horizontally in the middle side by side.
It's on codepen over here:
enter link description here
http://codepen.io/Satearn/pen/ybvXLR
.z
{position :absolute ;
top:50%;
left:50%;
transform :translate(-50%,-50%) ;}
To centre align them just remove width: 100%; from your following CSS code.
.table-fill {
background: white;
border-radius:3px;
border-collapse: collapse;
height: 320px;
margin: auto;
max-width: 300px;
padding:5px;
width: 100%;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
animation: float 5s infinite;
}
Like this? I used Bootstrap. And I reduced the data inside the table for simplicity
html {
background-color: #3e94ec;
}
/*** Table Styles **/
.table-fill {
border-radius: 3px;
border-collapse: collapse;
padding: 5px;
}
th {
color: #D5DDE5;
background: #1b1e24;
border-bottom: 4px solid #9ea7af;
border-right: 1px solid #343a45;
font-size: 23px;
font-weight: 100;
padding: 24px;
text-align: left;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
vertical-align: middle;
}
th:first-child {
border-top-left-radius: 3px;
}
th:last-child {
border-top-right-radius: 3px;
border-right: none;
}
tr {
border-top: 1px solid #C1C3D1;
border-bottom-: 1px solid #C1C3D1;
color: #666B85;
font-size: 16px;
font-weight: normal;
text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
}
tr:hover td {
background: #4E5066;
color: #FFFFFF;
border-top: 1px solid #22262e;
border-bottom: 1px solid #22262e;
}
tr:first-child {
border-top: none;
}
tr:last-child {
border-bottom: none;
}
tr:nth-child(odd) td {
background: #EBEBEB;
}
tr:nth-child(odd):hover td {
background: #4E5066;
}
tr:last-child td:first-child {
border-bottom-left-radius: 3px;
}
tr:last-child td:last-child {
border-bottom-right-radius: 3px;
}
td {
background: #FFFFFF;
padding: 20px;
text-align: left;
vertical-align: middle;
font-weight: 300;
font-size: 18px;
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
border-right: 1px solid #C1C3D1;
}
td:last-child {
border-right: 0px;
}
th.text-left {
text-align: left;
}
th.text-center {
text-align: center;
}
th.text-right {
text-align: right;
}
td.text-left {
text-align: left;
}
td.text-center {
text-align: center;
}
td.text-right {
text-align: right;
}
.middlepage {
margin: 0 auto;
}
#outer-cont {
text-align: center;
}
#target-element-to-center {
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<table class="table-fill col-xs-6" id="a">
<thead>
<tr>
<th class="text-center" colspan="2">Month</th>
</tr>
</thead>
<tbody class="table-hover">
<tr>
<td class="text-left">January</td>
<td class="text-left">$ 50,000.00</td>
</tr>
</tbody>
</table>
<table class="table-fill col-xs-6" id="a">
<thead>
<tr>
<th class="text-center" colspan="2">Strategies</th>
</tr>
</thead>
<tbody class="table-hover">
<tr>
<td class="text-left">January</td>
<td class="text-left">$ 50,000.00</td>
</tr>
</tbody>
</table>
</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 created a table in HTML5 and used CSS to make it pretty. Then I decided to add a scroll bar and used webkit to change the style of that. Now after I used a div to get my scroll bar working it seems like my CSS code for the tbody,tr,thead,etc. are not working. I was wondering what I am doing wrong. I am positive that I am not calling the html table attributes correctly. I am very new to html5 and css but would really like to learn more.
Here is my code:
UPDATED 7/11/2013 9:36pm
CSS CODE
::-webkit-scrollbar {
width: 12px;
color:crimson;
background-color: black;
border-radius: 10px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color:black;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
background-color:gray;
}
.mytablecontainer #mytable{
width:500px;
border-collapse:separate;
background:crimson;
border-radius: 15px;
}
.mytablecontainer tbody {
overflow: auto;
height: 150px;
float: left;
width: 100%;
}
.mytablcontainer #mytable td {
text-align:center;
background:gray;
border-bottom:5px solid black;
border-radius: 15px;
}
.mytablecontainer #mytable th {
font-weight:bold;
text-align:center;
background:crimson;
border-bottom:5px solid black;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
float: left;
width: 100%;
}
.mytablecontainer #mytable tr {
width: 100%;
display: table;
}
HTML5 CODE
<div class="mytablecontainer">
<table id="mytable">
<thead>
<tr>
<span>
Playlist
</span>
</tr>
</thead>
<tbody>
<tr>
<td> <span>
LINK 1
</span>
</td>
</tr>
<tr>
<td> <span>
LINK 2
</span>
</td>
</tr>
<tr>
<td> <span>
LINK 3
</span>
</td>
</tr>
<tr>
<td> <span>
LINK 4
</span>
</td>
</tr>
<tr>
<td> <span>
LINK 5
</span>
</td>
</tr>
<tr>
<td> <span>
LINK 6
</span>
</td>
</tr>
<tr>
<td> <span>
LINK 7
</span>
</td>
</tr>
</tbody>
</table>
</div>
.mytablcontainer #mytable.td {} remove "." dot before td and correct the spelling of your class
.mytablecontainer #mytable td {}
Demo
you do not need to call each time your main div selector try this css
::-webkit-scrollbar {
width: 12px;
color:crimson;
background-color: black;
border-radius: 10px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color:black;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
background-color:gray;
}
.mytablecontainer #mytable{
width:500px;
border-collapse:separate;
background:crimson;
border-radius: 15px;
}
#mytable tbody {
overflow: auto;
height: 150px;
float: left;
width: 100%;
}
#mytable td {
text-align:center;
background:gray;
border-bottom:5px solid black;
border-radius: 15px;
}
#mytable th {
font-weight:bold;
text-align:center;
background:crimson;
border-bottom:5px solid black;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
float: left;
width: 100%;
}
#mytable tr {
width: 100%;
display: table;
}
for multiple attribute use this:
#mytable table, #mytable th, #mytable td {
border: 1px solid black;
border-collapse: collapse;
}
CSS box-shadow on table rows - tr - doesn't seem to be working consistently across browsers. On some browsers the shadow is displayed; on others, there is no shadow.
I'm using the following CSS:
tr {
background-color: rgb(165, 182, 229);
box-shadow: 0px 2px 2px black;
-moz-box-shadow: 0px 2px 2px black;
-webkit-box-shadow: 0px 2px 2px black;
}
td, th {
padding: 5px;
text-align: left;
}
Here is a jsFiddle of the below snippet:
tr {
background-color: rgb(165, 182, 229);
box-shadow: 0px 2px 2px black;
-moz-box-shadow: 0px 2px 2px black, ;
-webkit-box-shadow: 0px 2px 2px black;
}
td, th {
padding: 5px;
text-align: left;
}
<table>
<tr>
<td> </td>
<th>One</th>
<th>Two</th>
</tr>
<tr>
<th>Title</th>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<th>Title2</th>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<th>Title3</th>
<td>Seven</td>
<td>Eight</td>
</tr>
<tr>
<th>Title4</th>
<td>Nine</td>
<td>Ten</td>
</tr>
</table>
Note: The same behavior is observed when substituting <tr> with <div> and adding display: table-row.
Use transform scale(1,1) property with box-shadow it will solve the problem.
tr:hover {
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
}
Fiddle: https://jsfiddle.net/ampicx/5p91xr48/
Thanks!!
As previously mentioned, box-shadow property works only with elements that have display: block or display:inline-block property.
If you'll add display: block to the table cell as a general styling rule, it will collapse, since automatic width/height proportions that cells had with display:table won't be applied anymore. To simulate that behavior just assign min-width attribute to each th and td.
Then apply box-shadow to the row (on hover or without).
In summary, your code should look like this:
table { box-sizing: border-box; }
td, th { padding-left: 16px; min-width: 170px; text-align: left; }
tr { display: block; }
tr:hover { box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.5); cursor: pointer; }
I've omitted vendor prefixes for simplicity.
Here is the full example:
table {
box-sizing: border-box;
border-bottom: 1px solid #e8e8e8;
}
td,
th {
padding-left: 16px;
min-width: 170px;
border: 1px solid #e8e8e8;
border-bottom: none;
font: 14px/40px;
text-align: left;
}
td {
color: #666;
}
tr {
display: block;
}
th {
color: #333;
}
tr:hover {
background-color: #fbfbfb;
box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.5);
cursor: pointer;
}
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Phone number</th>
<th>Date</th>
<th>Name</th>
<th>Label</th>
</tr>
</thead>
<tbody>
<tr>
<td>0342443</td>
<td>10 August 2013</td>
<td>Kate</td>
<td>Loves cats</td>
</td>
<tr>
<td>0342442</td>
<td>9 August 2013</td>
<td>Mary</td>
<td>Boring</td>
</tr>
<tr>
<td>0342441</td>
<td>8 August 2013</td>
<td>Anna</td>
<td>Loves extreme stuff</td>
</tr>
</tbody>
</table>
You can also check out the fiddle here.
Please star this bug if you want to see it get fixed:
https://code.google.com/p/chromium/issues/detail?id=94871
If you want the table cell widths to continue to adjust themselves automatically, you can apply the shadow to the individual cells instead:
td:first-child {
box-shadow:
inset 0px 11px 8px -10px blue,
inset 0px -11px 8px -10px blue,
inset 11px 0px 8px -10px blue;
}
td {
box-shadow:
inset 0px 11px 8px -10px blue,
inset 0px -11px 8px -10px blue;
}
td:last-child {
box-shadow:
inset 0px 11px 8px -10px blue,
inset 0px -11px 8px -10px blue,
inset -11px 0px 8px -10px blue;
}
Full example here. (jsfiddle)
(Inspired by https://stackoverflow.com/a/10150898/724752)
In each box shadow value:
Adjust the 3rd number (blur radius) to change the blur radius.
The 4th number (spread radius) must always be negative and its absolute value must be greater than the 3rd number (blur radius).
Make the 1st number (offset x) nonzero to get a shadow on the left or right. Make its absolute value 1 greater than the absolute value of the 4th number (see the example above again, much easier to see what I mean).
Make the 2nd number (offset y) nonzero to get a shadow at top or bottom. Make its absolute value 1 greater than the absolute value of the 4th number.
I had the same issue. I was trying to highlight an entire row when the mouse was over it. Below is the css code for it:
tr:hover {
outline: none;
-webkit-box-shadow: inset 0 0 10px #337AB7;
box-shadow: inset 0 0 10px #337AB7;
}
It works fine on Mozilla Firefox (38.0.1) and Internet Explorer (11.0.9600.17801), both on Windows 7. However, did not work on Chrome (43.0.2357.81).
Therefore, I had to workaround and I did a mix of the answers of Sviatoslav Zalishchuk and David Winiecki. As an result I got:
#media screen and (-webkit-min-device-pixel-ratio:0) {
tr:hover td:first-child {
box-shadow: inset 0px 11px 8px -10px #337AB7,
inset 0px -11px 8px -10px #337AB7,
inset 11px 0px 8px -10px #337AB7;
}
tr:hover td {
box-shadow: inset 0px 11px 8px -10px #337AB7,
inset 0px -11px 8px -10px #337AB7;
}
tr:hover td:last-child {
box-shadow: inset 0px 11px 8px -10px #337AB7,
inset 0px -11px 8px -10px #337AB7,
inset -11px 0px 8px -10px #337AB7;
}
}
tbody > tr:hover {
outline: none;
-webkit-box-shadow: inset 0 0 10px #337AB7;
box-shadow: inset 0 0 10px #337AB7;
}
That works fine and it does not break the column width of the table and still working on Mozilla and Explorer.
Below there is a full example:
table {
box-sizing: border-box;
border-collapse: collapse;
}
td,
th {
padding-left: 10px;
padding-right: 10px;
border: 1px solid #dddddd;
font: 14px;
text-align: left;
}
/*To work only on Chrome and Safari*/
#media screen and (-webkit-min-device-pixel-ratio:0) {
tr:hover td:first-child {
box-shadow: inset 0px 11px 8px -10px #337AB7,
inset 0px -11px 8px -10px #337AB7,
inset 11px 0px 8px -10px #337AB7;
}
tr:hover td {
box-shadow: inset 0px 11px 8px -10px #337AB7,
inset 0px -11px 8px -10px #337AB7;
}
tr:hover td:last-child {
box-shadow: inset 0px 11px 8px -10px #337AB7,
inset 0px -11px 8px -10px #337AB7,
inset -11px 0px 8px -10px #337AB7;
}
}
/*To work on the others browsers*/
tbody > tr:hover {
outline: none;
-webkit-box-shadow: inset 0 0 10px #337AB7;
box-shadow: inset 0 0 10px #337AB7;
}
<table>
<thead>
<tr>
<th>Name</th>
<th>Born</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>David Gilmour</td>
<td>6 March 1946</td>
<td>Cambridge, England</td>
</tr>
<tr>
<td>Roger Waters</td>
<td>6 September 1943</td>
<td>Surrey, England</td>
</tr>
<tr>
<td>Nick Mason</td>
<td>27 January 1944</td>
<td>Birmingham, England</td>
</tr>
<tr>
<td>Richard Wright</td>
<td>28 July 1943</td>
<td>London, England</td>
</tr>
</tbody>
</table>
I've got an effect quite similar to box-shadow using filter and drop-shadow. It's a bit hacky and you'll need to find the best configuration of the shadow to match your scenario though.
My original class:
.project-row {
box-shadow: 0 0 15px 0 black;
}
My new class:
.project-row {
filter: drop-shadow(0 0 9px black);
}
https://codepen.io/nico_nj/pen/XWbaZPJ
Reasons behind it seem down to default CSS - the display: block was the biggest factor.
CSS / HTML / Demo
tr {
background-color: rgb(165, 182, 229);
display: block;
margin-bottom: 5px;
-moz-box-shadow: 0px 2px 2px black;
-webkit-box-shadow: 0px 2px 2px black;
box-shadow: 0px 2px 2px black;
}
td,th {
padding: 5px;
text-align: left;
}
<table>
<tr>
<td> </td>
<th>One</th>
<th>Two</th>
</tr>
<tr>
<th>Title</th>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<th>Title2</th>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<th>Title3</th>
<td>Seven</td>
<td>Eight</td>
</tr>
<tr>
<th>Title4</th>
<td>Nine</td>
<td>Ten</td>
</tr>
</table>
Now, in v53 Chrome it fixed and box-shadow work fine for <tr></tr>!
CSS / HTML / Demo
table {
border-spacing: 0 10px;
border-collapse: separate;
}
tbody {
display: table-row-group;
vertical-align: middle;
}
tr {
margin-bottom: 9px;
}
tr:hover {
box-shadow: 0 5px 8px 0 rgba(50, 50, 50, 0.35);
-webkit-box-shadow: 0 5px 8px 0 rgba(50, 50, 50, 0.35);
-moz-box-shadow: 0 5px 8px 0 rgba(50, 50, 50, 0.35);
}
<table class="table">
<caption>Optional table caption.</caption>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
I wanted a box-shadow on the left side of the row when hovered:
I fixed it simply by setting the box-shadow on the first cell in the row. Like this:
tr:hover { background: #EEF0F3; cursor: pointer; }
tr:hover td:first-child { box-shadow: inset 2px 0 0 0 #323335; }
I've tried it in Firefox, Chrome, and IE9. Seems to work fine.
If you want a 1px wide border around the whole row you could do something like:
tr:hover td { box-shadow: 0 1px 0 0 black, 0 -1px 0 0 black; }
tr:hover td:first-child { box-shadow: 0 -1px 0 0 black, -1px 0 0 0 black, 0 1px 0 0 black; }
tr:hover td:last-child { box-shadow: 0 -1px 0 0 black, 1px 0 0 0 black, 0 1px 0 0 black; }
You can use the pseudo element :after of the table row to display above the whole tr, with pointer events: none; and apply the box-shadow on hover of the tr.
example:
.custom-table {
border-radius: 10px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}
table {
margin-bottom: 0;
color: #4e4e4e;
}
thead {
background: #000000;
color: #FFFFFF;
text-transform: uppercase;
font-size: 15px;
line-height: 18px;
font-weight: 600;
}
th {
padding: 20px 40px;
}
tr:hover:after {
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease-in-out;
}
tbody tr {
background: #FFFFFF;
position: relative;
}
tbody tr:after {
display: block;
content: '';
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
pointer-events: none;
top: 0;
left: 0;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0);
transition: box-shadow 0.3s ease-in-out;
}
td {
padding: 17px 40px;
border: 0;
vertical-align: middle;
}
<div class="custom-table table-responsive">
<table class="table">
<thead class="table-header">
<tr class="table-row">
<th scope="col" class="table-col">Date & Time</th>
<th scope="col" class="table-col">Meeting Name</th>
<th scope="col" class="table-col">Document</th>
<th scope="col" class="table-col">Type of Meeting</th>
</tr>
</thead>
<tbody class="table-body">
<tr class="table-row">
<td class="table-col"><span class="meeting-date">16 Nov 2021 <b>Saturday</b></span><span class="meeting-time">7:00 PM</span></td>
<td class="table-col">Lorem ipsum dolor sit amet</td>
<td class="table-col"><span class="member-document">quis nostrud exercitation ullamco</span></td>
<td class="table-col"><span class="meeting-type type-1">MEETINGS</span></td>
</tr>
<tr class="table-row">
<td class="table-col"><span class="meeting-date">16 Nov 2021 <b>Saturday</b></span><span class="meeting-time">7:00 PM</span></td>
<td class="table-col">Lorem ipsum dolor sit amet</td>
<td class="table-col"><span class="member-document">quis nostrud exercitation ullamco</span></td>
<td class="table-col"><span class="meeting-type type-1">MEETINGS</span></td>
</tr>
<tr class="table-row">
<td class="table-col"><span class="meeting-date">16 Nov 2021 <b>Saturday</b></span><span class="meeting-time">7:00 PM</span></td>
<td class="table-col">Lorem ipsum dolor sit amet</td>
<td class="table-col"><span class="member-document">quis nostrud exercitation ullamco</span></td>
<td class="table-col"><span class="meeting-type type-1">MEETINGS</span></td>
</tr>
</tbody>
</table>
</div>
This could be done with the ::before or ::after pseudo-element
HTML - If you have a table like this
<table>
<thead>
<tr>
<th>S/N</th>
<th>Name</th>
<th>Age</th>
<th>Pet Choice</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Emeka Orji</td>
<td>200</td>
<td>Cat</td>
</tr>
<tr>
<td>2</td>
<td>Enoch Orji</td>
<td>12</td>
<td>Dog</td>
</tr>
<tr>
<td>3</td>
<td>Favour Orji</td>
<td>17</td>
<td>Monkey</td>
</tr>
</tbody>
</table>
CSS - You can add a shadow to a table cell like this
table {
border-collapse: collapse;
}
table td, table th {
position: relative;
padding: .5em;
}
tr td:first-of-type::before, tr th:first-of-type::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #6060bf;
z-index: -1;
box-shadow: 7px 1px 6px 0px #0006;
}
But the downside of this is that you may run into a few problems when trying to select and alter the value of the ::before or ::after pseudo-element with javascript. So the best solution I have to this is:
You could put a span element inside the table cell you want to style like this:
HTML
<table>
<thead>
<tr>
<th>S/N <span class="shadow"></span></th>
<th>Name</th>
<th>Age</th>
<th>Pet Choice</th>
</tr>
</thead>
<tbody>
<tr>
<td>1 <span class="shadow"></span></td>
<td>Emeka Orji</td>
<td>200</td>
<td>Cat</td>
</tr>
<tr>
<td>2 <span class="shadow"></span></td>
<td>Enoch Orji</td>
<td>12</td>
<td>Dog</td>
</tr>
<tr>
<td>3 <span class="shadow"></span></td>
<td>Favour Orji</td>
<td>17</td>
<td>Monkey</td>
</tr>
</tbody>
</table>
And in your CSS style the shadow element with the same styles you as before, like so:
table {
border-collapse: collapse;
}
table td, table th {
position: relative;
padding: .5em;
}
.shadow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #6060bf;
z-index: -1;
box-shadow: 7px 1px 6px 0px #0006;
}
This way you would be able to select the span element in your javascript like this:
const cellShadow = document.querySelector('td .shadow');
Check out this pen below. Full code demo there.
https://codepen.io/emekaorji/pen/QWQzBeM
in react, i have combined the answer as below. It worked fine in chrome, >firefox, ie11
.select_row{
color: #43B149;
font-weight: bolder !important;
background: #e4e5e6 !important;
box-shadow: 1px 0px 1px 0px #cad6ce !important;
-moz-box-shadow:1px 0px 1px 0px #cad6ce !important;
-webkit-box-shadow:1px 0px 1px 0px #cad6ce !important;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
td{box-shadow: 0px 3px 0px 0px #cad6ce !important;
-moz-box-shadow:0px 3px 0px 0px #cad6ce !important;
-webkit-box-shadow:0px 3px 0px 0px #cad6ce !important;
background: #e4e5e6 !important;
}
}
.table-forecast{
border-collapse: separate;
border-spacing: 0px;
}
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.