I am trying to recreate this material design table I made in a Photoshop mockup:
I've got everything I want except for a drop shadow. When I apply a drop shadow to the tbody element, it shows in Firefox, but not Chrome or Edge.If I apply a "display: block" style to it as well, it will show. However, this removes the default "display: table-row-group" style, effectively ruining the structure of the table. How can I add a drop shadow without affecting the rest of the layout?
* {
font-family: Roboto, Arial;
}
body {
background: #f8f8f8;
}
table {
border-collapse: collapse;
width: 100%;
}
th {
font-weight: normal;
opacity: .7;
text-align: left;
padding-left: 20px;
padding-bottom: 10px;
}
td {
padding: 20px;
}
tbody tr:nth-child(even) {
background: rgba(128,128,128,.05);
}
tbody {
background: #fff;
/* This doesn't work unless "display: block" is applied, which ruins the structure */
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
-moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}
.grey {
opacity: .5;
}
.green {
color: #4caf50;
}
<table>
<thead>
<tr>
<th>Name</th>
<th>Date</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>You</td>
<td>Today, 4:12 PM</td>
<td class="green">92%</td>
</tr>
<tr>
<td>John Smith</td>
<td>Today, 3:28 PM</td>
<td class="grey">Hidden</td>
</tr>
<tr>
<td>Bobby Newport</td>
<td>Yesterday</td>
<td class="grey">Hidden</td>
</tr>
<tr>
<td>Jim Halpert</td>
<td>2 days ago</td>
<td class="grey">Hidden</td>
</tr>
<tr>
<td>Detlow Coffin</td>
<td>2 days ago</td>
<td class="grey">Hidden</td>
</tr>
</tbody>
</table>
I spent a few hours on this issue and have finally a working solution that doesn't break the table layout. But now that I think about it flexbox would probably be much simpler...
table {
position: relative;
}
table:after {
content: '';
position: absolute;
box-shadow: 0 2px 4px 0 rgba(37, 37, 37, 0.2); // your box-shadow
left: 0;
right: 0;
top: 36px; // height of your table header
bottom: 0;
z-index: -1;
}
Here is the fiddle: https://jsfiddle.net/jitowix/o2gx7sc4/
Add a property of
display:table;
or
display:inherit;
to tbody and see what happens.
You can also try :before and :after.
Related
How can let the rows at the top (not at the bottom) with fixed tbody height of 500px!
html,body{
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 1rem;
}
main{
margin: 10px;
padding: 10px;
}
table{
border-collapse: collapse;
border: 1px solid;
width: 100%;
}
tr,th,td{
border: 1px solid;
padding: 3px;
text-align: center;
}
.minHeight{
height: 500px;
}
<table>
<thead>
<tr>
<th>Code Article</th>
<th>Code TVA</th>
<th>Remise</th>
</tr>
</thead>
<tbody class="minHeight">
<tr>
<td>100</td>
<td>10</td>
<td>2</td>
</tr>
</tbody>
</table>
I would clarify it as I get output like this:
But I want it to be like this:
Remove text-align:center on the td and add vertical-align:top
html,
body {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 1rem;
}
main {
margin: 10px;
padding: 10px;
}
table {
border-collapse: collapse;
border: 1px solid;
width: 100%;
}
tr {
border: 1px solid;
padding: 3px;
}
th,
td {
border: 1px solid;
padding: 3px;
vertical-align: top;
}
.minHeight {
height: 500px;
}
<table>
<thead>
<tr>
<th>Code Article</th>
<th>Code TVA</th>
<th>Remise</th>
</tr>
</thead>
<tbody class="minHeight">
<tr>
<td>100</td>
<td>10</td>
<td>2</td>
</tr>
</tbody>
</table>
You are not very descriptive on what you want but I'll give it a try.
I think you mean that you want the numbers on top of the list under the name and not in the center of it's entire box.
If so, then one simple solution is to add padding to the bottom of your first row of data (td). The padding should be equal to the height of your liking (warning: if you add more data you will need to adjust the padding).
I'm styling a table with CSS, I want my th has box shadow when its position is sticky. I've tried but I want to get rid the shadow that's in the right (so I'm expecting the shadow only appear in the bottom of the th element)
this is my table CSS
table {
text-align: left;
position: relative;
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
th {
font-family: $font2;
font-size: 13px;
font-weight: 700;
padding: 12px 16px;
padding-right: 32px;
color: #555;
background: white;
position: -webkit-sticky;
position: sticky;
border-bottom: 5px solid #eee;
top: 0; /* Don't forget this, required for the stickiness */
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}
You can do it with javascript, check the below snippet
const header = document.querySelectorAll('.fixed-top');
const rowObserver = new IntersectionObserver(entries => {
if (entries[0].isIntersecting) {
header.forEach(th => th.classList.add('noShadow'));
} else {
header.forEach(th => th.classList.remove('noShadow'));
}
});
rowObserver.observe(document.querySelector('.observed-row'));
div {
display: flex;
max-height: 20rem;
overflow: auto;
}
table {
border-spacing: 0;
}
th {
text-align: left;
}
th,
td {
border-bottom: 1px solid #c6c6c6;
height: 5rem;
white-space: nowrap;
padding-right: 2rem;
}
.fixed-top {
background-color: white;
position: sticky;
box-shadow: 0 10px 6px -5px rgba(0, 0, 0, 0.4);
top: 0;
z-index: 2;
}
.noShadow {
box-shadow: none !important;
}
<div>
<table>
<thead>
<tr>
<th class="fixed-top">Column 1</th>
<th class="fixed-top">Column 2</th>
<th class="fixed-top">Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Row One</td>
<td class="observed-row">1</td>
</tr>
<tr>
<td>2</td>
<td>Row Two</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>Row Three</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>Row Four</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>Row Five</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>Row Six</td>
<td>6</td>
</tr>
</tbody>
</table>
</div>
You can understand by the syntax below taken from MDN:
th{
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 0px 5px 2px -2px rgba(0, 0, 0, 0.2);
}
You can decrease the spread-radius until the shadow doesn't extend to lefft or right sides.. It will make your shadow a little smaller though
Edit: I think I understand your problem now.. A similar Problem
Summary: It's not possible to use box-shadow like you mention. Just use pseudo-elements to simulate a shadow to the bottom.
I assume you want shadow on each of the th boxes, so putting shadow on tr:has(th) is not possible
I'm trying to create a table with rounded top corners and a different background color for the header line. I succeeded in making both individually (super beginner in html/css) thanks to online ressources but I fail when it comes to have the two at the same time.
What I mean is (and you can see it in the fiddle below), I can round the corners just fine and have the design I want for my table except that the header background-color is still a perfect rectangle and thus is overflowing outside the rounded corners.
I tried adding the border-radius property in various places but none worked the way I intended. How can I make the corners rounded and having the thead background-color fitting nicely in it ?
table.std {
margin-top: 0.2cm;
width: 100%;
border: 0.03cm solid #8a8a8a;
border-spacing: 0;
border-radius: 15px 15px 0px 0px;
font-size: 10pt;
}
table.std thead {
text-align: left;
background-color: lightgray;
height: 25px;
}
table.std thead tr th:first-child {
padding-left: 0.25cm;
/* To align with section title */
border-bottom: 0.03cm solid #8a8a8a;
}
table.std tbody tr td:first-child {
padding-left: 0.25cm;
/* To align with section title */
width: 30%;
}
table.std tbody tr td {
border-bottom: 0.01cm dashed lightgray;
height: 20px;
}
<div>
<table class="std">
<thead>
<tr>
<th colspan=2>Test</th>
</tr>
</thead>
<tbody>
<tr>
<td>ID</td>
<td>id1</td>
</tr>
<tr>
<td>Date</td>
<td>2019/12/19</td>
</tr>
<tr>
<td>foo</td>
<td>bar</td>
</tr>
<tr>
<td>lorem</td>
<td>ipsum</td>
</tr>
<tr>
<td>john</td>
<td>doe</td>
</tr>
</tbody>
</table>
</div>
https://jsfiddle.net/co7xb42n/
Thanks for the help
Add the border-radius to th
table.std thead tr th:first-child {
padding-left: 0.25cm; /* To align with section title */
border-bottom: 0.03cm solid #8a8a8a;
border-radius: 15px 15px 0px 0px;
}
https://jsfiddle.net/53eshg64/
add border-radius from th tag.
table.std {
margin-top: 0.2cm;
width: 100%;
border: 0.03cm solid #8a8a8a;
border-spacing: 0;
border-radius: 15px 15px 0px 0px;
font-size: 10pt;
}
table.std thead {
text-align: left;
background-color: lightgray;
height: 25px;
}
table.std thead tr th:first-child {
padding-left: 0.25cm; /* To align with section title */
border-bottom: 0.03cm solid #8a8a8a;
border-radius: 15px 15px 0px 0px;
}
table.std tbody tr td:first-child {
padding-left: 0.25cm; /* To align with section title */
width: 30%;
}
table.std tbody tr td {
border-bottom: 0.01cm dashed lightgray;
height: 20px;
}
<div>
<table class="std">
<thead>
<tr>
<th colspan=2>Test</th>
</tr>
</thead>
<tbody>
<tr>
<td>ID</td>
<td>id1</td>
</tr>
<tr>
<td>Date</td>
<td>2019/12/19</td>
</tr>
<tr>
<td>foo</td>
<td>bar</td>
</tr>
<tr>
<td>lorem</td>
<td>ipsum</td>
</tr>
<tr>
<td>john</td>
<td>doe</td>
</tr>
</tbody>
</table>
</div>
This is cause the th tag is above of the table tag and it doesn't have any border-radius
Add the border-radius to th
I use :nth-child(odd/even) selector to make different background for table rows for better readability. And now I have to set "border-spacing" or "border-color: transparent" for my table, to make background visible thru the space between cells. The problem is, that horizontal spacing should be different for different columns - the last column should have larger spacing than whole table (marked with red in the sample below).
How can I do that? Have no idea. Please help. Thank you!
body
{
background: #3a7;
}
table
{
border-collapse: separate;
border-spacing: 5px;
border: 0px solid #ffffff;
margin: 1em;
table-layout: fixed;
}
td
{
font-size: 1rem;
empty-cells: show;
/*background: white;*/
padding: 0;
}
td.last
{
font-size: 1rem;
empty-cells: show;
/*background: white;*/
/*border-left: 20px transparent;*/
border-left: 20px solid rgba(255,0,0,0.5);
}
tr:nth-child(odd)
{
padding: 0px;
margin: 0;
background: #fff;
color: #000;
border: 0px solid transparent;
overflow: visible;
}
tr:nth-child(even)
{
padding: 0px;
margin: 0;
background: #000;
color: #fff;
border: 0px solid transparent;
overflow: visible;
}
input
{
border: 0px;
outline: 0px transparent;
background-color: transparent;
color: inherit;
margin: 5px;
}
<table>
<tr>
<td><div><input></div></td>
<td><div><input></div></td>
<td class="last"><div><input></div></td>
</tr>
<tr>
<td><div><input></div></td>
<td><div><input></div></td>
<td class="last"><div><input></div></td>
</tr>
<tr>
<td><div><input></div></td>
<td><div><input></div></td>
<td class="last"><div><input></div></td>
</tr>
<tr>
<td><div><input></div></td>
<td><div><input></div></td>
<td class="last"><div><input></div></td>
</tr>
</table>
This should work
body {
background: #3a7;
}
td.last {
font-size: 1rem;
empty-cells: show;
}
tr:nth-child(odd) {
padding: 0px;
color: #000;
border: 0px solid transparent;
overflow: visible;
}
tr:nth-child(even) {
padding: 0px;
margin: 0;
color: #fff;
border: 0px solid transparent;
overflow: visible;
}
input {
border: 0px;
outline: 0px transparent;
background-color: transparent;
color: inherit;
margin: 5px;
}
tr:nth-child(odd) div {
background: white;
}
tr:nth-child(even) div {
background: black;
}
.last > div {
margin-left: 20px;
}
<table>
<tr>
<td><div><input></div></td>
<td><div><input></div></td>
<td class="last"><div><input></div></td>
</tr>
<tr>
<td><div><input></div></td>
<td><div><input></div></td>
<td class="last"><div><input></div></td>
</tr>
<tr>
<td><div><input></div></td>
<td><div><input></div></td>
<td class="last"><div><input></div></td>
</tr>
<tr>
<td><div><input></div></td>
<td><div><input></div></td>
<td class="last"><div><input></div></td>
</tr>
</table>
Another option is to set the last cell's background to none and instead color the background of the input field and its border:
https://jsfiddle.net/e1fnoa34/
You could make the last cell background: none, and give it padding-left: 20px. Then wrap the cell's content in a DIV or SPAN and apply the background styling to the inner wrapper instead.
Not ideal, but unfortunately you can't vary the with of the table cell spacing, and margin is ignored for table cells.
I'm new to CSS and SCSS. My issue seems very simple to fix but I'm not sure where to start.
I have three pages and they each have a table that look similar to this:
On the other pages I want the boxes (on the left) to go away, but I want to use the same CSS style sheet. Here is what the one of the other page's table look like:
I want the space on the right to go away and the word second to align all the way to the left.
Here is my scss:
section {
#include grid-row();
}
section p {
#include grid-column(12);
font-family: $font-stack;
font-size: 23px;
padding: 0;
margin: 0;
}
.button {
font-family: $font-stack;
color: #fff;
background-color: $secondary-color;
height: 27px;
text-align: center;
border-radius: 7px;
margin: 6px 0 5px 0;
padding: 5px 7px 5px 7px;
}
.button:hover {
background-color: $primary-color;
}
table {
#include grid-column(12);
padding: 0;
border-left: none;
border-right: none;
text-align:right;
border-collapse:separate;
border-spacing: 0 2px;
}
table {
tr {
background: #fff;
}
tr:hover {
background: #EBF7FC;
}
tr td {
padding:6px 8px;
}
tr td:first-child {
border-left: 3px solid #fff;
}
tr td:last-child {
border-right:3px solid #fff;
}
tr:hover td:first-child {
border-left: 3px solid $secondary-color;
}
tr:hover td:last-child {
border-right:3px solid $secondary-color;
}
}
.status {
color:#fff;
width: 33px;
padding: 5px 0;
text-align: center;
}
.statusRunning {
background-color: #5AD427;
#extend .status;
}
.statusQueued {
background-color: #A4E786;
#extend .status;
}
.statusIncomplete {
background-color: #FFCC00;
#extend .status;
}
.statusBlank {
width: 1px;
}
table tr td:nth-child(2) {
text-align:left;
}
.tightcell a {
margin-right:25px;
color: $secondary-color;
}
Here is my HTML for the page that is not working:
<section>
<p>Test Number 6 </p>
<table>
<tbody>
<tr>
<td class="statusBlank"></td>
<td>second</td>
<td>0000-00-00 00:00:00</td>
<td class="tightcell">Download
</tr>
<tr>
<td class="statusBlank"></td>
<td>second</td>
<td>0000-00-00 00:00:00</td>
<td class="tightcell">Download
</tr>
<tr>
<td class="statusBlank"></td>
<td>second</td>
<td>0000-00-00 00:00:00</td>
<td class="tightcell">Download
</tr>
<tr>
<td class="statusBlank"></td>
<td>second</td>
<td>0000-00-00 00:00:00</td>
<td class="tightcell">Download
</tr>
</tbody>
</table>
<p>Final Project </p>
<table>
<tbody>
<tr>
<td class="statusBlank"></td>
<td>second</td>
<td>0000-00-00 00:00:00</td>
<td class="tightcell">Download
</tr>
<tr>
<td class="statusBlank"></td>
<td>second</td>
<td>0000-00-00 00:00:00</td>
<td class="tightcell">Download
</tr>
</tbody>
</table>
</section>
The problem comes from this:
tr td {
padding:6px 8px;
}
No matter how small you try to make your cell, it will always take up at least 16px of space. Your best option is to just not have the empty cells in your markup at all if they're not serving an actual purpose.
Alternately, you could kill the padding:
.statusBlank {
padding: 0;
}