I am trying to create a weekly view calendar, the calendar is not responsive. The days should be fixed to the top, and the time should be fixed to the left. The calendar should have scrollbars on both sides, but the scrollbars must be inside the schedule. (See the screenshot from google calendar/ mine below):
Here is my current solution: https://codepen.io/Rahmans/pen/LvWZpN
body {
background: #f0ece2;
}
.inner {
width: 700px;
height: 450px;
margin: 50px auto;
overflow: scroll;
}
table {
}
table td {
background: #acdbdf;
padding: 20px 60px;
}
table thead th {
position: sticky;
top: 0;
background-color: #010101;
color: #fff;
padding: 20px ;
text-transform: uppercase;
font-size: 21px;
z-index: 5;
}
table tbody tr th {
position: sticky;
left: 0;
background-color: #69779b;
color: #fff;
padding: 20px ;
}
<div class="container">
<div class="inner">
<table>
<thead>
<tr>
<th> </th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
</thead>
<tbody>
<tr>
<th>00:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>01:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>02:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>03:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>04:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>05:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>06:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>07:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>08:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>09:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>10:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>11:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>12:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>13:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>14:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>15:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>16:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>17:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>18:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>19:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>20:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>21:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>22:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>23:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
</tbody>
</table>
</div>
</div>
For your .container div which is the parent of your .inner div which has your calendar. Add this CSS :
.container{
width: 100vw;
}
so that it spans the whole width of the viewport. Then on your .inner div I've seen you have a defined width and height and also overflow on your css, this means you can now style your .inner div scrollbar as follows:
.inner {
width: 700px;
height: 450px;
margin: 50px auto;
overflow: scroll;
}
/* width */
.inner::-webkit-scrollbar {
width: 10px;
}
/* Track */
,inner::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
.inner::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
See this codepen for a working example :
https://codepen.io/itscosmas/pen/bGNqGXV
Here's what you achieve:
Also, scrollbar styling is supported in major browsers using prefixes, see here : https://caniuse.com/#search=scrollbar
I am not sure this will work for you or not but hope it will help you out.
table.scroll {
width: 100%;
border-spacing: 0;
border: 2px solid black;
}
table.scroll th,
table.scroll td,
table.scroll tr,
table.scroll thead,
table.scroll tbody {
display: block;
}
table.scroll thead tr {
width: 97%;
width: -webkit-calc(100% - 16px);
width: -moz-calc(100% - 16px);
width: calc(100% - 16px);
}
table.scroll tr:after {
content: ' ';
display: block;
visibility: hidden;
clear: both;
}
table.scroll tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
table.scroll tbody td,
table.scroll thead th {
width: 19%;
float: left;
border-right: 1px solid black;
}
thead tr th {
height: 30px;
line-height: 30px;
}
tbody {
border-top: 2px solid black;
}
tbody td:last-child, thead th:last-child {
border-right: none !important;
}
<table class="scroll">
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
<th>Head 4</th>
<th>Head 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
<tr>
<td>Content 1</td>
<td>Lorem ipsum</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
</tbody>
</table>
If I am understanding the question correctly I recommend SimpleBar
it's really easy to use
Example Codepen Here
body {
background: #f0ece2;
}
.inner {
width: 700px;
height: 450px;
margin: 50px auto;
overflow: auto;
}
table {}
table td {
background: #acdbdf;
padding: 20px 60px;
}
table thead th {
position: sticky;
top: 0;
background-color: #010101;
color: #fff;
padding: 20px;
text-transform: uppercase;
font-size: 21px;
z-index: 5;
}
table tbody tr th {
position: sticky;
left: 0;
background-color: #69779b;
color: #fff;
padding: 20px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Table Calendar</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://unpkg.com/simplebar#latest/dist/simplebar.css" />
<script src="https://unpkg.com/simplebar#latest/dist/simplebar.min.js"></script>
</head>
<body>
<div class="container">
<div data-simplebar class="inner">
<table>
<thead>
<tr>
<th> </th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
</thead>
<tbody>
<tr>
<th>00:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>01:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>02:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>03:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>04:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>05:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>06:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>07:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>08:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>09:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>10:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>11:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>12:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>13:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>14:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>15:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>16:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>17:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>18:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>19:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>20:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>21:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>22:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>23:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
table {
border: 1px solid #ddd;
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 10px;
max-width: 100%;
width: 100%;
}
table > thead > tr > th,
table > thead > tr > td,
table > tbody > tr > th,
table > tbody > tr > td,
table > tfoot > tr > th,
table > tfoot > tr > td {
border: 1px solid #ddd;
line-height: 20px;
padding: 13px;
vertical-align: top;
}
table > thead > tr > th {
background: #444;
color: #fff;
font-weight: normal;
vertical-align: bottom;
}
table th {
text-align: left;
}
table,
table th,
table td,
table tr,
table tr th,
table tr td,
table thead,
table thead th,
table thead td,
table thead tr,
table thead tr th,
table thead tr td,
table tbody,
table tbody th,
table tbody td,
table tbody tr,
table tbody tr th,
table tbody tr td,
table tfoot,
table tfoot th,
table tfoot td,
table tfoot tr,
table tfoot tr th,
table tfoot tr td {
display: block;
}
table > thead {
float: left;
}
table > tbody > tr {
display: inline-block;
vertical-align: top;
}
table > tbody {
width: auto;
white-space: nowrap;
overflow-x: auto;
}
.inner {
width: 700px;
height: 450px;
margin: 50px auto;
}
table td {
background: #acdbdf;
padding: 20px 60px;
}
<div class="container">
<div class="inner">
<table>
<thead>
<tr>
<th> </th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
</thead>
<tbody>
<tr>
<th>00:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>01:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>02:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>03:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>04:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>05:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>06:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>07:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>08:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>09:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>10:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>11:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>12:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>13:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>14:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>15:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>16:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>17:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>18:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>19:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>20:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>21:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>22:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>23:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
</tbody>
</table></div>
Related
I'm facing some problems with my HTML code. I am trying to display a button toolbar at the row when user hover over the row in a table. Below is my code:
$(document).ready(function () {
var $divOverlay = $('#DivToShow');
$('#grid').on("mouseover", "tbody > tr", function ()
{
var bottomWidth = $(this).css('width');
var bottomHeight = $(this).css('height');
var rowPos = $(this).position();
bottomTop = $(this).offset().top;
bottomLeft = rowPos.left;
$divOverlay.css({
position: 'absolute',
top: bottomTop,
//left: bottomLeft,
height: bottomHeight
});
$divOverlay.show();
});
$('#resultGrid').on("mouseleave", "tbody > tr", function ()
{
$divOverlay.hide();
});
$divOverlay.mouseleave(function ()
{
$divOverlay.hide();
});
});
#DivToShow {
display:none;
position:absolute;
z-index:10;
right:0;
padding-right:10px;
}
tr:hover {
background-color: #ebebeb;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div style="overflow-x:auto;">
<table id="grid" width="100%" border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr >
<td>b</td>
<td>b</td>
<td>b</td>
<td>b</td>
<td>b</td>
<td>b</td>
<td>b</td>
<td>b</td>
<td>b</td>
<td>b</td>
<td>b</td>
<td>b</td>
<td>b</td>
<td>b</td>
<td>b</td>
<td>b</td>
</tr>
<tr>
<td>c</td>
<td>c</td>
<td>c</td>
<td>c</td>
<td>c</td>
<td>c</td>
<td>c</td>
<td>c</td>
<td>c</td>
<td>c</td>
<td>c</td>
<td>c</td>
<td>c</td>
<td>c</td>
<td>c</td>
<td>c</td>
</tr>
<tr >
<td>d</td>
<td>d</td>
<td>d</td>
<td>d</td>
<td>d</td>
<td>d</td>
<td>d</td>
<td>d</td>
<td>d</td>
<td>d</td>
<td>d</td>
<td>d</td>
<td>d</td>
<td>d</td>
<td>d</td>
<td>d</td>
</tr>
<tr>
<td>e</td>
<td>e</td>
<td>e</td>
<td>e</td>
<td>e</td>
<td>e</td>
<td>e</td>
<td>e</td>
<td>e</td>
<td>e</td>
<td>e</td>
<td>e</td>
<td>e</td>
<td>e</td>
<td>e</td>
<td>e</td>
</tr>
</tbody>
</table>
</div>
<div id="DivToShow" >
<button>Edit</button>
<button>Dup</button>
<button>Delete</button>
</div>
And here is some of the things that I want to achieve:
Currently the table row gets highlighted when user mouse over it. I would like to keep the row highlighted when user hover on the button toolbar section too.
When user mouse leave the row, the button toolbar should disappear. Now it will only disappear when the user got mouse over the button toolbar section.
Is there anyway that I can get the current row data when I click on the edit button?
I will appreciate any help.
i believe what you are trying to accomplish can easily be done with css,, except the clickevent part
here is the easiest way to do this, i hope this is what wanted
function edit(value){
console.log(value);
}
function dup(value){
console.log(value);
}
function remove(value){
console.log(value);
}
#DivToShow {
display:none;
position:absolute;
z-index:10;
top: 0;
right:0;
bottom: 0;
left: 0;
text-align: right;
}
td {
position: relative;
}
tr:hover {
background-color: #ebebeb;
}
tr:hover #DivToShow{
display:block
}
<table id="grid" width="100%" border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a
<div id="DivToShow" >
<button onClick="edit('a')">Edit</button>
<button onClick="dup('a')">Dup</button>
<button onClick="remove('a')">Delete</button>
</div>
</td>
</tr>
<tr >
<td>b</td>
<td>b</td>
<td>b</td>
<td>b
<div id="DivToShow" >
<button onClick="edit('b')">Edit</button>
<button onClick="dup('b')">Dup</button>
<button onClick="remove('b')">Delete</button>
</div>
</td>
</tr>
<tr>
<td>c</td>
<td>c</td>
<td>c</td>
<td>c
<div id="DivToShow" >
<button onClick="edit('c')">Edit</button>
<button onClick="dup('c')">Dup</button>
<button onClick="remove('c')">Delete</button>
</div>
</td>
</tr>
<tr >
<td>d</td>
<td>d</td>
<td>d</td>
<td>d
<div id="DivToShow" >
<button onClick="edit('d')">Edit</button>
<button onClick="dup('d')">Dup</button>
<button onClick="remove('d')">Delete</button>
</div>
</td>
</tr>
<tr>
<td>e</td>
<td>e</td>
<td>e</td>
<td>e
<div id="DivToShow" >
<button onClick="edit('e')">Edit</button>
<button onClick="dup('e')">Dup</button>
<button onClick="delete('e')">Delete</button>
</div>
</td>
</tr>
</tbody>
</table>
I have sticky table thead with 2 rows of headers. The colour of the background for thead has to be white so I can keep the sticky behaviour but the background is covering the border of the rows.
How can I make the border appear over the background ?
.table-responsive {
height: 500px;
}
thead {
position: sticky;
top: 0px;
background: white;
/* removing background color allow border to appear (though not perfectly) but then the sticky behavior doesn't quite work */
z-index: 3;
}
.sticky-col-top {
position: sticky;
left: 0px;
top: 0px;
max-width: 6em;
min-width: 6em;
background: white;
background-clip: padding-box;
z-index: 3;
}
.weekday-row {
border-top: 3px solid #E2E2E2;
}
.sticky-col {
position: sticky;
left: 0px;
width: 6em;
background: white;
background-clip: padding-box;
border-bottom: 1px solid #E2E2E2;
font-weight: normal;
font-size: 14px;
z-index: 2;
}
td:nth-child(even),
th:not(.days):nth-child(even) {
background: #F7F7F7;
}
.days {
color: #606060;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="table-responsive">
<table class="table calendar">
<thead>
<tr>
<th class="sticky-col-top"></th>
<th class="days">1</th>
<th class="days">2</th>
<th class="days">3</th>
<th class="days">4</th>
<th class="days">5</th>
<th class="days">6</th>
<th class="days">7</th>
<th class="days">8</th>
<th class="days">9</th>
<th class="days">10</th>
</tr>
<tr>
<th class="sticky-col-top"></th>
<th class="weekday-row">M</th>
<th class="weekday-row">T</th>
<th class="weekday-row">W</th>
<th class="weekday-row">T</th>
<th class="weekday-row">F</th>
<th class="weekday-row">S</th>
<th class="weekday-row">S</th>
<th class="weekday-row">M</th>
<th class="weekday-row">T</th>
<th class="weekday-row">W</th>
</tr>
</thead>
<tbody id="table-body">
<tr>
<th class="sticky-col">
<div>Title 1</div>
</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
</tr>
<tr>
<th class="sticky-col">
<div>Title 2</div>
</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
</tr>
<tr>
<th class="sticky-col">
<div>Title 3</div>
</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
</tr>
<tr>
<th class="sticky-col">
<div>Title 4</div>
</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
</tr>
<tr>
<th class="sticky-col">
<div>Title 5</div>
</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
</tr>
<tr>
<th class="sticky-col">
<div>Title 6</div>
</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
</tr>
<tr>
<th class="sticky-col">
<div>Title 7</div>
</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
</tr>
<tr>
<th class="sticky-col">
<div>Title 8</div>
</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
</tr>
<tr>
<th class="sticky-col">
<div>Title 9</div>
</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
</tr>
<tr>
<th class="sticky-col">
<div>Title 10</div>
</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
</tr>
</tbody>
</table>
</div>
The js fiddle: https://jsfiddle.net/base_kh/t59xrjw6/13/
I don't think it is possible to do it with border.
But you can mimic border using pseudo-elements ::after and ::before:
First: remove default bootstrap border:
.table tbody td, .table tbody th {
border: none;
}
Then add position relative to table row:
.table tbody tr {
position: relative;
}
And now, add pseudo-element:
.table tbody tr::after {
display: block;
content: '';
top: 0;
left: 0;
width: 100%;
height: 1px;
background-color: #dee2e6;
position: absolute;
z-index: 4;
}
Result:
.table-responsive {
height: 500px;
}
thead {
position: sticky;
top: 0px;
background: white;
/* removing background color allow border to appear (though not perfectly) but then the sticky behavior doesn't quite work */
z-index: 3;
}
.sticky-col-top {
position: sticky;
left: 0px;
top: 0px;
max-width: 6em;
min-width: 6em;
background: white;
background-clip: padding-box;
z-index: 3;
}
.weekday-row {
border-top: 3px solid #E2E2E2;
}
.sticky-col {
position: sticky;
left: 0px;
width: 6em;
background: white;
background-clip: padding-box;
border-bottom: 1px solid #E2E2E2;
font-weight: normal;
font-size: 14px;
z-index: 2;
}
.table tbody td, .table tbody th {
border: none;
}
.table tbody tr {
position: relative;
}
.table tbody tr::after {
display: block;
content: '';
top: 0;
left: 0;
width: 100%;
height: 1px;
background-color: #dee2e6;
position: absolute;
z-index: 4;
}
td:nth-child(even),
th:not(.days):nth-child(even) {
background: #F7F7F7;
}
.days {
color: #606060;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="table-responsive">
<table class="table calendar">
<thead>
<tr>
<th class="sticky-col-top"></th>
<th class="days">1</th>
<th class="days">2</th>
<th class="days">3</th>
<th class="days">4</th>
<th class="days">5</th>
<th class="days">6</th>
<th class="days">7</th>
<th class="days">8</th>
<th class="days">9</th>
<th class="days">10</th>
</tr>
<tr>
<th class="sticky-col-top"></th>
<th class="weekday-row">M</th>
<th class="weekday-row">T</th>
<th class="weekday-row">W</th>
<th class="weekday-row">T</th>
<th class="weekday-row">F</th>
<th class="weekday-row">S</th>
<th class="weekday-row">S</th>
<th class="weekday-row">M</th>
<th class="weekday-row">T</th>
<th class="weekday-row">W</th>
</tr>
</thead>
<tbody id="table-body">
<tr>
<th class="sticky-col">
<div>Title 1</div>
</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
</tr>
<tr>
<th class="sticky-col">
<div>Title 2</div>
</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
</tr>
<tr>
<th class="sticky-col">
<div>Title 3</div>
</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
</tr>
<tr>
<th class="sticky-col">
<div>Title 4</div>
</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
</tr>
<tr>
<th class="sticky-col">
<div>Title 5</div>
</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
</tr>
<tr>
<th class="sticky-col">
<div>Title 6</div>
</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
</tr>
<tr>
<th class="sticky-col">
<div>Title 7</div>
</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
</tr>
<tr>
<th class="sticky-col">
<div>Title 8</div>
</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
</tr>
<tr>
<th class="sticky-col">
<div>Title 9</div>
</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
</tr>
<tr>
<th class="sticky-col">
<div>Title 10</div>
</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
</tr>
</tbody>
</table>
</div>
Applying the pseudo element ::before on the headers did the trick, thanks #m51 for giving me the crucial clues !
All I needed was to add the below to my css:
th {
position: relative;
}
.sticky-border th::before{
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
border-top: 1px solid #E2E2E2;
}
and the js fiddle: https://jsfiddle.net/base_kh/t59xrjw6/22/
I've encountered a glitch while printing a table, which contains cells with rowspan and colspan attributes, using Google Chrome.
If you run the following snippet, the table is displayed normally.
print();
thead{background-color:#d3d3d3}table{border-collapse:collapse;border-spacing:0}th{border-bottom:1px solid #e6e6e6;border-left:1px solid #e6e6e6;font-size:12px;font-weight:700;text-align:center;padding:12px 12px}th:last-child{border-right:1px solid #e6e6e6}thead>tr:first-child{border-top:1px solid #e6e6e6}td{border-bottom:1px solid #e6e6e6;border-top:1px solid #e6e6e6;border-left:1px solid #e6e6e6;font-size:12px;font-weight:400;padding:8px 12px}td:last-child{border-right:1px solid #e6e6e6}tbody>tr:nth-child(3n+1){background:#ffe1c3}tbody>tr:nth-child(3n+2){background:#fff8d8}tbody>tr:nth-child(3n+3){background:#ffffea}
<table> <thead> <tr> <th colspan="1" rowspan="2">Year</th> <th colspan="3" rowspan="1">Other</th> </tr> <tr> <th colspan="1" rowspan="1">A</th> <th colspan="1" rowspan="1">B</th> <th colspan="1" rowspan="1">C</th> </tr> </thead> <tbody> <tr> <td rowspan="3">2000</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1999</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1998</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1997</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1996</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1995</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">2000</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1999</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1998</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1997</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1996</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1995</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1994</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1993</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1992</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1991</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1990</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1989</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1988</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1987</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1986</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1985</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1984</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1983</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1982</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1981</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1980</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> </tbody></table>
But if you try to print (Print Preview or convert to PDF) the table using Google Chrome, the table glitches. Please check the following outputs from Chome and Firefox respectively:
Is this a bug? Is there a way to overcome it?
It sure sounds like chrome bug.
Have you considered using table-row-group?
thead {
display: table-row-group
}
This will remove the repetition of table headers at page breaks.
Hope it helps, cheers!
Having the years in their own td element is confusing because the browsers then don't break the table at the end of a page as expected. Since the year column spans two rows, it won't break with the relevant cells, which are shorter.
So then here's the required changes to your code to make the table break properly when printed.
print();
thead {
background-color: #d3d3d3
}
table {
border-collapse: collapse;
border-spacing: 0
}
th {
border-bottom: 1px solid #e6e6e6;
border-left: 1px solid #e6e6e6;
font-size: 12px;
font-weight: 700;
text-align: center;
padding: 12px 12px
}
th:last-child {
border-right: 1px solid #e6e6e6
}
thead>tr:first-child {
border-top: 1px solid #e6e6e6
}
td {
border-bottom: 1px solid #e6e6e6;
border-top: 1px solid #e6e6e6;
border-left: 1px solid #e6e6e6;
font-size: 12px;
font-weight: 400;
padding: 8px 12px
}
td:last-child {
border-right: 1px solid #e6e6e6
}
tbody>tr:nth-child(odd) {
background: #fff8d8
}
tbody>tr:nth-child(odd) :first-child {
background: #ffe1c3
}
tbody>tr:nth-child(even) {
background: #ffffea
}
<table>
<thead>
<tr>
<th colspan="1" rowspan="2">Year</th>
<th colspan="3" rowspan="1">Other</th>
</tr>
<tr>
<th colspan="1" rowspan="1">A</th>
<th colspan="1" rowspan="1">B</th>
<th colspan="1" rowspan="1">C</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">2000</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1999</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1998</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1997</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1996</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1995</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">2000</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1999</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1998</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1997</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1996</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1995</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1994</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1993</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1992</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1991</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1990</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1989</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1988</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1987</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1986</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1985</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1984</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1983</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1982</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1981</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1980</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</tbody>
</table>
The point of this pen is to have the body of the table scroll without scrolling the header.
That part works, but I can't get the headers to spread out within the Html body to match the data rows. What am I doing wrong?
Thanks, in advance, for the help.
Codepen
body {
margin: 0;
padding: 0;
height: 100vh;
}
div {
background-color: green;
width: 100%;
height: 100%
}
table {
width: 100%;
background-color: red;
height: 100%;
display: flex;
flex-direction: column;
}
thead {
background-color: purple;
width: 100%;
display: block;
}
thead tr {
background-color: orange;
width: 100%;
display: block;
}
;
thead tr td {
min-width: 30%;
width: 30%;
display: inline-block;
}
tbody {
flex: 1;
background-color: blue;
overflow-y: auto;
display: block
}
tbody tr {
background-color: aqua;
width: 100%;
display: block;
}
tbody tr td {
min-width: 30%;
width: 30%;
display: inline-block;
}
<div>
<table>
<thead>
<tr>
<td>Header A</td>
<td>Header B</td>
<td>Header C</td>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</tbody>
</table>
</div>
screen capture of codepen
Simple syntax error. You have a ; at the end on line 5.
Remove it and enjoy your table.
Use display: flex and justify-content: space-around in your thead tr styles.
body {
margin: 0;
padding: 0;
height: 100vh;
}
div {
background-color: green;
width: 100%;
height: 100%;
}
table {
width: 100%;
background-color: red;
height: 100%;
display: flex;
flex-direction: column;
}
thead {
background-color: purple;
width: 100%;
display: block;
}
thead tr {
background-color: orange;
width: 100%;
overflow: hidden;
display: flex;
justify-content: space-around;
}
thead tr td {
min-width: 30%;
width: 30%;
display: inline-block;
}
tbody {
flex: 1;
background-color: blue;
overflow-y: auto;
display: block;
}
tbody tr {
background-color: aqua;
width: 100%;
display: block;
}
tbody tr td {
min-width: 30%;
width: 30%;
display: inline-block;
}
<html>
<body>
<div>
<table>
<thead>
<tr>
<td>Header A</td>
<td>Header B</td>
<td>Header C</td>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I've managed to get a simple scrolling table and fixed header, with column width control using display blocked items.
See jsfiddle here http://jsfiddle.net/joshmoto/xjq41yng/4/
table {
width: 100%; /* your table width */
background: blue;
border: 0;
border-spacing: 0;
}
thead,
tbody,
tr,
td,
th {
display: block;
padding: 0;
}
tr:after {
content: ' ';
display: block;
visibility: hidden;
clear: both;
}
thead th {
height: 30px;
background: orange;
}
tbody td {
background: aqua;
}
tbody {
height: 120px; /* fixed tbody height to show scroll example */
overflow-y: auto;
}
tbody td,
thead th {
width: 30%; /* your column width */
float: left;
}
<table>
<thead>
<tr>
<th>Header A</th>
<th>Header B</th>
<th>Header C</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</tbody>
</table>
I have a very basic table, made up of 3 rows and 3 columns, and i'm trying to make it look like in this picture
(that is, the thead should be wider than the other rows). How do i achieve this effect? I tried with colspan but i can't get it right. The basic table is something like:
<table>
<thead>
<tr>
<th>Extra details</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</tbody>
</table>
Thanks!
You need to add colspan="3" to the th (number of cols must be identical in all tr in a table). Then make every last td in each tr much wider than the first two (using :last-child pseudo selector, see https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child).
table {
width: 100%;
}
thead th {
background-color: #ddd;
}
td:last-child {
width: 60%;
}
<table>
<thead>
<tr>
<th colspan="3">Extra details</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</tbody>
</table>
you may use colspan and add a virtual forth col of 50% width:
tbody tr:after {
content: '';
display: table-cell;
width:50%
}
th {
background: gray;
border: solid;
}
table {
width: 100%;
}
<table>
<thead>
<tr>
<th colspan="4">Extra details</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</tbody>
</table>
You can use the caption element, which spans the table's width and is more semantically correct in your situation since it describes the entire table. Then use a pseudo-element to fill the remaining space in the rows and collapse the other columns.
table {
width: 100%;
}
caption {
border: 2px solid darkgray;
background-color: lightgray;
}
tr:after {
display: table-cell;
content: "";
width: 100%;
}
<table>
<caption>Extra details</caption>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</tbody>
</table>