table > thead > tr >th>.empty-cell{
background-color: transparent ;
border : none;
}
<html>
<head><title>Table</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<table>
<thead>
<tr>
<th class="empty-cell"></th>
<th> Smart Starter </th>
<th> Smart Medium </th>
<th> Smart Business </th>
<th> Smart Deluxe </th>
</thead>
<tbody>
</tr>
</table>
</body>
I want to have a empty cell in header table in css like this pic:
Can anyone help me? I'm a very beginner.
This is an exemple without Bootstrap, i used font-awesome for icon, look the complete code here https://codepen.io/alex-grz/pen/KKNZvOZ.
table {
font-family: sans-serif;
}
.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
text-align:center;
padding:1rem 3rem;
font-size: .8rem;
}
.table > thead > tr > th:first-child {
background-color:unset;
}
.table > thead > tr > th {
border-radius: 6px 6px 0 0;
}
.table > tbody > tr > th {
border-radius: 6px 0 0px 6px;
}
.table > thead > tr > th, .table > tbody > tr > th {
background-color:#9BD727;
color:white;
}
.table > tbody > tr > td {
background-color:#DEF2CC;
color:black;
}
.table>tfoot>tr>td {
color: #9BD727;
font-size:1rem;
}
.fa-check {
color:#9BD727;
}
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<table class="table">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Smart Starter</th>
<th scope="col">Smart Medium</th>
<th scope="col">Smart Buisiness</th>
<th scope="col">Smart Deluxe</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Storage Space</th>
<td>512 MB</td>
<td>1 GB</td>
<td>2 GB</td>
<td>4 GB</td>
</tr>
<tr>
<th scope="row">Bandiwdth</th>
<td>50 GB</td>
<td>100 GB</td>
<td>150 GB</td>
<td>Unlimited</td>
</tr>
<tr>
<th scope="row">MySQL Databases</th>
<td>Unlimited</td>
<td>Unlimited</td>
<td>Unlimited</td>
<td>Unlimited</td>
</tr>
<tr>
<th scope="row">Setup</th>
<td>19.90 $</td>
<td>12.90 $</td>
<td>free</td>
<td>free</td>
</tr>
<tr>
<th scope="row">PHP 5</th>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr>
<th scope="row">Ruby on Rails</th>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
</tr>
<tfoot>
<tr>
<th scope="row">Price per month</th>
<td>$ 2.90</td>
<td>$ 5.90</td>
<td>$ 9.90</td>
<td>$ 14.90</td>
</tr>
</tfoot>
</tbody>
</table>
</body>
</html>
You may have not noticed the empty cell in the first line because of no content in any other cell in the first column below. I have moved a misplaced </tr> and made a bit of order in the style:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table</title>
<style>
table{
border: 0;
border-collapse: collapse;
}
th,td{
border: 1px solid #000;
text-align:center;
padding: 5px;
}
th,td.greenc{
background-color: #0c0;
}
th.empty{
border: 0;
background-color: transparent;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th class="empty"></th>
<th> Smart Starter </th>
<th> Smart Medium </th>
<th> Smart Business </th>
<th> Smart Deluxe </th>
</tr>
</thead>
<tbody>
<tr>
<td class="greenc"> Storage Space </td>
<td> Content </td>
<td> Content </td>
<td> Content </td>
<td> Content </td>
</tr>
<tr>
<td class="greenc"> B </td>
<td> Content </td>
<td> Content </td>
<td> Content </td>
<td> Content </td>
</tr>
<tr>
<td class="greenc"> C </td>
<td> Content </td>
<td> Content </td>
<td> Content </td>
<td> Content </td>
</tr>
<tr>
<td class="greenc"> D </td>
<td> Content </td>
<td> Content </td>
<td> Content </td>
<td> Content </td>
</tr>
<tr>
<td class="greenc"> E </td>
<td> ✓ </td>
<td> ✓ </td>
<td> ✓ </td>
<td> ✓ </td>
</tr>
<tr>
<td class="greenc"> F </td>
<td> ✓ </td>
<td> ✓ </td>
<td> ✓ </td>
<td> ✓ </td>
</tr>
</tbody>
</table>
</body>
</html>
Check the updated snippet:
table{
border: 0;
border-collapse: collapse;
}
th,td{
border: 1px solid #000;
text-align:center;
padding: 5px;
}
th,td.greenc{
background-color: #0c0;
}
th.empty{
border: 0;
background-color: transparent;
}
<table>
<thead>
<tr>
<th class="empty"></th>
<th> Smart Starter </th>
<th> Smart Medium </th>
<th> Smart Business </th>
<th> Smart Deluxe </th>
</tr>
</thead>
<tbody>
<tr>
<td class="greenc"> Storage Space </td>
<td> Content </td>
<td> Content </td>
<td> Content </td>
<td> Content </td>
</tr>
<tr>
<td class="greenc"> B </td>
<td> Content </td>
<td> Content </td>
<td> Content </td>
<td> Content </td>
</tr>
<tr>
<td class="greenc"> C </td>
<td> Content </td>
<td> Content </td>
<td> Content </td>
<td> Content </td>
</tr>
<tr>
<td class="greenc"> D </td>
<td> Content </td>
<td> Content </td>
<td> Content </td>
<td> Content </td>
</tr>
<tr>
<td class="greenc"> E </td>
<td> ✓ </td>
<td> ✓ </td>
<td> ✓ </td>
<td> ✓ </td>
</tr>
<tr>
<td class="greenc"> F </td>
<td> ✓ </td>
<td> ✓ </td>
<td> ✓ </td>
<td> ✓ </td>
</tr>
</tbody>
</table>
Then you can further customize the style as you prefer. We couldn't see your style.css file before answering: always remember that CSS is cascade style sheet.
i will give you example using boostrap css
table > thead > tr > th.empty-cell{
background-color: transparent ;
border : none;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<div style="padding: 20px;">
<table class="table table-dark table-striped">
<thead>
<tr>
<th class="empty-cell"></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
</tbody>
</table>
</div>
i add class empty-cell to <th> like image example , and add to style background-color: transparent ; to make the cell like nothing, if your css table have a border you can add border: none to style to, its depend on you style table
Related
I am trying to print some tables and an image on two separate pages.
However when I do this I always get additional page that spills over into a 3rd page when I am trying to print.
How do I get rid of the additional page space or overflow that appears on a 3rd page when printing?
I have added page break after and before in the past in various places to remedy this with no success.
The tables will move in size due to data that is shoved in them - but never more than a page. So the image on the secopnd page needs to allow for that as well as keeping to the second page. I am struggling with this. I've tried using absolute position to get it to stay fixed, but it still moves when the table moves, pushing into a third page at times.
Any suggestions help. Thanks
HTML:
<body>
<table class="tableWrapper" cellpadding="3">
<tr class="no-counter">
<td>
<table class="table headingTable">
<tr class="no-counter">
<td>Total<br />Persons<br />Onboard</td>
<td> </td>
</tr>
</table>
</td>
<td>
<table class="table headingTable">
<tr class="no-counter">
<th colspan="4"> <#Tour_Resource type="lookup" value="resource_resource" display="resource_name"></th>
</tr>
<tr class="no-counter">
<td>Date</td>
<td><#Tour_Date_In format="ddd d mmm yyyy"></td>
<td>Wind Direction</td>
<td> </td>
</tr>
<tr class="no-counter">
<td>Dept Time</td>
<td><#Tour_Date_In format="h:nn am/pm"></td>
<td>Wind Strength</td>
<td></td>
</tr>
<tr class="no-counter">
<td>Ret Time</td>
<td></td>
<td>Swell/Waves</td>
<td></td>
</tr>
<tr class="no-counter">
<td>Dive Site</td>
<td>
<#Tour_TourTemp type="lookup" value="tourtemp_tourtemp" display="tourtemp_name">
</td>
<td>Tide</td>
<td></td>
</tr>
</table>
</td>
<td>
<table class="table headingTable">
<tr class="no-counter">
<th colspan="2">Dive Plan / Skipper</th>
</tr>
<tr class="no-counter">
<td>Planned Total Dive Time</td>
<td style="text-align:right;">min</td>
</tr>
<tr class="no-counter">
<td>Time in (first dive)</td>
<td style="text-align: center;">:</td>
</tr>
<tr class="no-counter">
<td>Time out (last dive)</td>
<td style="text-align: center;">:</td>
</tr>
<tr class="no-counter">
<td>Master/Skipper</td>
<td> </td>
</tr>
</table>
</td>
<td>
<table class="table headingTable">
<tr class="no-counter">
<th colspan="2">Boat Crew</th>
</tr>
<tr class="no-counter">
<td nowrap>G.P Crew 1</td>
<td> </td>
</tr>
<tr class="no-counter">
<td nowrap>G.P Crew 2</td>
<td></td>
</tr>
<tr class="no-counter">
<td nowrap>G.P Crew 3</td>
<td></td>
</tr>
<tr class="no-counter">
<td nowrap>G.P Crew 4</td>
<td></td>
</tr>
</table>
</td>
<td>
<table class="table headingTable">
<tr class="no-counter">
<th colspan="4">Passenger Count</th>
</tr>
<tr class="no-counter">
<td colspan="2">Before Departure</td>
<td colspan="2">Before Return</td>
</tr>
<tr class="no-counter">
<td>Divers</td>
<td> </td>
<td>Divers</td>
<td> </td>
</tr>
<tr class="no-counter">
<td>Non Divers</td>
<td> </td>
<td>Non Divers</td>
<td> </td>
</tr>
<tr class="no-counter">
<td>Signed</td>
<td> </td>
<td>Signed</td>
<td> </td>
</tr>
</table>
</td>
<td>
<table class="table headingTable">
<tr class="no-counter">
<th colspan="2">Checks</th>
</tr>
<tr class="no-counter">
<td>Air On & Checked</td>
<td style="text-align: center;"><input type="checkbox"></td>
</tr>
<tr class="no-counter">
<td>BCDs Connected?</td>
<td style="text-align: center;"><input type="checkbox"></td>
</tr>
<tr class="no-counter">
<td>BCDs Inflate?</td>
<td style="text-align: center;"><input type="checkbox"></td>
</tr>
<tr class="no-counter">
<td>Signed</td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<table class="table service-cart">
<tr class="no-counter">
<th>#</th>
<th style="margin:0; padding: 0;">Buddy<br/>Group</th>
<th>Name</th>
<th>Booked</th>
<th>Loc</th>
<th>Last Dive</th>
<th>Air Full</th>
<th>Plan<br/>Depth</th>
<th>Plan<br/>Bottom<br/>Time</th>
<th>Safety<br/>Stop<br/>Time</th>
<th style="padding-left: 5px; padding-right: 5px;">Total<br/>Time</th>
<th style="padding-left: 6px; padding-right: 6px;">Gas<br/>Mix</th>
<th>M.O.D.</th>
<th style="padding-left: 5px; padding-right: 5px;">In<br/>Time</th>
<th style="padding-left: 5px; padding-right: 5px;">Out<br/>Time</th>
<th>Actual<br/>Depth</th>
<th>Actual<br/>Run<br/>Time</th>
<th>Stops<br/>Cmpld</th>
<th style="padding-left: 40px; padding-right: 40px; text-align: left;">Sign for<br/>- Dive Parameters Done<br />- Returned Onboard</th>
</tr>
<#Reference filter="reference_status = 'A'" order="Guest_surname">
<tr style="background-color: #ffffff;">
<td> </td>
<td> </td>
<td class="text-left"><input type="checkbox"></td>
<td> </td>
<td> </td>
<td> </td>
<td class="text-center"><input type="checkbox"></td>
<td style="text-align:right;">M</td>
<td> </td>
<td> </td>
<td> </td>
<td style="text-align:right;">%</td>
<td style="text-align:right;">M</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="text-center"><input type="checkbox"></td>
<td> </td>
</tr>
<tr style="background-color: #ffffff;">
<td> </td>
<td> </td>
<td class="text-left"><input type="checkbox"></td>
<td> </td>
<td> </td>
<td> </td>
<td class="text-center"><input type="checkbox"></td>
<td style="text-align:right;">M</td>
<td> </td>
<td> </td>
<td> </td>
<td style="text-align:right;">%</td>
<td style="text-align:right;">M</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="text-center"><input type="checkbox"></td>
<td> </td>
</tr>
</table>
<hr class="break">
<div class="second">
<img src="/vessellog.png" class="dlog">
</div>
</body>
</html>
CSS:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="styletable.css">
<style>
table tbody tr:not(.no-counter) {
counter-increment: rowNumber;
}
table tbody tr:not(.no-counter) td:nth-child(1)::before {
content: counter(rowNumber);
min-width: 1em;
margin-right: 0.5em;
}
.headingTable {
height: 150px;
font-size: 12px;
width: 100%;
}
.tableWrapper {
width: 100%;
border-collapse: collapse;
}
.second {
transform: rotate(270deg);
margin-left: 180px;
margin-top: -60px;
width: 720px;
height: 1080px;
position: absolute;
}
.dlog {
max-width: 100%;
max-height: 100%;
}
.break {
page-break-after: always;
}
</style>
</head>
To solve my issue what I did was add: <div style="page-break-before:always;"> </div> after the last <table> on first page. This created the page break I needed to print on separate pages. As in:
</table> /* End of First Page */
<div style="page-break-before: always;"> </div>
<div class="vlogimage"> /*Second Page*/
<img class="logologext" alt='<#Business_name>' src= "<#servername>/<#Register_Directory>/<#Splash_Logo>?v=<#now format='yy-mm-dd-hh-nn'>">
<p class="vlogtext"><#Business_name> Daily Vessel Log</p>
<img src="/vessellog.png" class="dlog" >
</div>
I tried applying page-break-before: always; to the first <div> on my second page and this did not work how I was hoping.
Hope this helps someone out there!
I have a simple table structure.
table > tbody > tr > td{
text-align:center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet"/>
<table class="table table-hover">
<thead>
<tr>
<td>Client</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-4">
C 1
</td>
</tr>
<tr>
<td class="col-md-4">
Client 2
</td>
</tr>
</tbody>
</table>
The question is : How can I align td-s content left and center. ?
The output should be something like this :
If you are wanting the lower cells to be left justified from the centre, then just add padding-left 50% to your body cells
.table tbody td {
padding-left: 50%;
text-align;
left;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet" />
<table class="table table-hover">
<thead>
<tr>
<td>Client</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-4">
C 1
</td>
</tr>
<tr>
<td class="col-md-4">
Client 2
</td>
</tr>
</tbody>
</table>
If you want them centred to the largest word, then left-aligned, you cannot have separate rows for the tbody, you would need to wrap all the words in an inline block div:
.col-md-4 {
text-align: center;
}
.inline-block {
display: inline-block;
text-align: left;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet" />
<table class="table table-hover">
<thead>
<tr>
<td>Client</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-4">
<div class="inline-block">
C 1<br> Client 2
</div>
</td>
</tr>
</tbody>
</table>
Try this:
td {
width: 50%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet"/>
<table class="table table-hover">
<thead>
<tr>
<td>Client</td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td>
</td>
<td>
C 1
</td>
</tr>
<tr>
<td>
</td>
<td>
Client 2
</td>
</tr>
</tbody>
</table>
If you can't add extra table-cells you could use padding:
.table tbody td {
padding-left: 50%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet"/>
<table class="table table-hover">
<thead>
<tr>
<td>Client</td>
</tr>
</thead>
<tbody>
<tr>
<td>
C 1
</td>
</tr>
<tr>
<td>
Client 2
</td>
</tr>
</tbody>
</table>
td {
width: 50%;
}
td:last-child {
border-left:1px solid #333;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet"/>
<table class="table table-hover">
<thead>
<tr>
<td>Client</td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td>
</td>
<td>
C 1
</td>
</tr>
<tr>
<td>
</td>
<td>
Client 2
</td>
</tr>
</tbody>
</table>
Try colspan="<number of columns to merge>" and rowspan="<number of rows to merge>" to merge row or column:
<table>
<thead>
<tr>
<td colspan="2" align="center">Client</td>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2" width="50%"></td>
<td>
C 1
</td>
</tr>
<tr>
<td>
Client 2
</td>
</tr>
</tbody>
</table>
First of all, there are indeed multiple similar questions but they are not working in my case. Related, Other related
The structure is like page > div > div > stuff + table
I am using Gridstack.js and here is my current code
$('.grid-stack').gridstack();
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.min.css" />
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.min.js'></script>
<body>
<div class="grid-stack">
<div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="10" data-gs-height="2">
<div class="grid-stack-item-content">
<h3>Title</h3>
<div>
<input type="text">
</div>
<div>
<button>Button A</button>
<button>Button B</button>
</div>
<div>
<a>Link A</a>
<a>Link B</a>
</div>
<table>
<thead>
<tr>
<th>ColA</th>
<th>ColB</th>
<th>ColC</th>
<th>ColD</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mauritius</td>
<td>Castor</td>
<td>F14 3QF</td>
<td>dignissim.pharetra#aliquetmolestietellus.net</td>
</tr>
<tr>
<td>Guyana</td>
<td>Inuvik</td>
<td>67752</td>
<td>Nam.porttitor#sitamet.edu</td>
</tr>
<tr>
<td>Norfolk Island</td>
<td>Sparwood</td>
<td>10899-987</td>
<td>in.consectetuer#ametmetusAliquam.net</td>
</tr>
<tr>
<td>Afghanistan</td>
<td>Sant'Urbano</td>
<td>7142</td>
<td>lectus.convallis#ornareIn.co.uk</td>
</tr>
<tr>
<td>Macao</td>
<td>Bon Accord</td>
<td>16-568</td>
<td>auctor.velit.Aliquam#consectetuerrhoncus.edu</td>
</tr>
<tr>
<td>Philippines</td>
<td>Anghiari</td>
<td>280294</td>
<td>neque.vitae#eu.org</td>
</tr>
<tr>
<td>Bangladesh</td>
<td>Falciano del Massico</td>
<td>90856</td>
<td>id#vitae.edu</td>
</tr>
<tr>
<td>Micronesia</td>
<td>Divinópolis</td>
<td>45-520</td>
<td>scelerisque.neque#vitaesemper.co.uk</td>
</tr>
<tr>
<td>Antigua and Barbuda</td>
<td>Dudzele</td>
<td>728363</td>
<td>dignissim.tempor.arcu#vulputate.net</td>
</tr>
<tr>
<td>Papua New Guinea</td>
<td>Joué-lès-Tours</td>
<td>958173</td>
<td>amet#eleifendnondapibus.net</td>
</tr>
<tr>
<td>Hong Kong</td>
<td>Gateshead</td>
<td>83548-761</td>
<td>fringilla.purus#enimnec.com</td>
</tr>
<tr>
<td>Iran</td>
<td>Minto</td>
<td>80622</td>
<td>adipiscing.ligula#fringillaDonec.edu</td>
</tr>
<tr>
<td>Curaçao</td>
<td>Whitby</td>
<td>59472</td>
<td>ante#anteNunc.org</td>
</tr>
<tr>
<td>Korea, South</td>
<td>Montpelier</td>
<td>L8 2TT</td>
<td>a#sagittisDuisgravida.org</td>
</tr>
<tr>
<td>Papua New Guinea</td>
<td>Dokkum</td>
<td>205204</td>
<td>sed.libero#convallisest.co.uk</td>
</tr>
<tr>
<td>New Zealand</td>
<td>Maisires</td>
<td>9279</td>
<td>ultrices.posuere.cubilia#sem.org</td>
</tr>
<tr>
<td>Panama</td>
<td>Rankweil</td>
<td>30910</td>
<td>elit.fermentum#odio.org</td>
</tr>
<tr>
<td>New Zealand</td>
<td>Melsele</td>
<td>23428</td>
<td>sed.libero.Proin#nequevitaesemper.com</td>
</tr>
<tr>
<td>Cuba</td>
<td>Wolvertem</td>
<td>93687-468</td>
<td>auctor.odio#pellentesqueafacilisis.edu</td>
</tr>
<tr>
<td>Indonesia</td>
<td>Rothesay</td>
<td>919761</td>
<td>augue.scelerisque#asollicitudin.com</td>
</tr>
<tr>
<td>Japan</td>
<td>Inuvik</td>
<td>2899</td>
<td>massa.non#ligulaDonecluctus.org</td>
</tr>
<tr>
<td>Mauritius</td>
<td>Zeitz</td>
<td>603912</td>
<td>consequat#diamPellentesquehabitant.edu</td>
</tr>
<tr>
<td>Curaçao</td>
<td>Lincoln</td>
<td>11148</td>
<td>tristique.neque#Nullamlobortis.org</td>
</tr>
<tr>
<td>Swaziland</td>
<td>Newtown</td>
<td>9616</td>
<td>ipsum#sapien.ca</td>
</tr>
<tr>
<td>Brazil</td>
<td>Rodì Milici</td>
<td>861316</td>
<td>fames#variusultricesmauris.ca</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
Current behavior
While scrolling inside the div there is nothing special, you will first scroll thought the input, links,... then though the table
Expected behavior
While scrolling, when the header hits the top of the div - the header should be fixed on the top of the div (Not the top of the page). When scrolled back, the header should go back to its normal state.
There is no need to check for the end of the div to hide the header. The end of the div will always be the end of the table.
How can this be achieved ? The header should not be fixed to the top of the page but the top of the div
Note: this should work for IE11 also
Add style for your table
table thead tr:nth-child(1) th{
background: RED;
position: sticky;
top: 0;
z-index: 10;
}
support of sticky
$('.grid-stack').gridstack();
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
table thead tr:nth-child(1) th{
background: RED;
position: sticky;
top: 0;
z-index: 10;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.min.css" />
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.min.js'></script>
<body>
<div class="grid-stack">
<div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="10" data-gs-height="2">
<div class="grid-stack-item-content">
<h3>Title</h3>
<div>
<input type="text">
</div>
<div>
<button>Button A</button>
<button>Button B</button>
</div>
<div>
<a>Link A</a>
<a>Link B</a>
</div>
<table>
<thead>
<tr>
<th>ColA</th>
<th>ColB</th>
<th>ColC</th>
<th>ColD</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mauritius</td>
<td>Castor</td>
<td>F14 3QF</td>
<td>dignissim.pharetra#aliquetmolestietellus.net</td>
</tr>
<tr>
<td>Guyana</td>
<td>Inuvik</td>
<td>67752</td>
<td>Nam.porttitor#sitamet.edu</td>
</tr>
<tr>
<td>Norfolk Island</td>
<td>Sparwood</td>
<td>10899-987</td>
<td>in.consectetuer#ametmetusAliquam.net</td>
</tr>
<tr>
<td>Afghanistan</td>
<td>Sant'Urbano</td>
<td>7142</td>
<td>lectus.convallis#ornareIn.co.uk</td>
</tr>
<tr>
<td>Macao</td>
<td>Bon Accord</td>
<td>16-568</td>
<td>auctor.velit.Aliquam#consectetuerrhoncus.edu</td>
</tr>
<tr>
<td>Philippines</td>
<td>Anghiari</td>
<td>280294</td>
<td>neque.vitae#eu.org</td>
</tr>
<tr>
<td>Bangladesh</td>
<td>Falciano del Massico</td>
<td>90856</td>
<td>id#vitae.edu</td>
</tr>
<tr>
<td>Micronesia</td>
<td>Divinópolis</td>
<td>45-520</td>
<td>scelerisque.neque#vitaesemper.co.uk</td>
</tr>
<tr>
<td>Antigua and Barbuda</td>
<td>Dudzele</td>
<td>728363</td>
<td>dignissim.tempor.arcu#vulputate.net</td>
</tr>
<tr>
<td>Papua New Guinea</td>
<td>Joué-lès-Tours</td>
<td>958173</td>
<td>amet#eleifendnondapibus.net</td>
</tr>
<tr>
<td>Hong Kong</td>
<td>Gateshead</td>
<td>83548-761</td>
<td>fringilla.purus#enimnec.com</td>
</tr>
<tr>
<td>Iran</td>
<td>Minto</td>
<td>80622</td>
<td>adipiscing.ligula#fringillaDonec.edu</td>
</tr>
<tr>
<td>Curaçao</td>
<td>Whitby</td>
<td>59472</td>
<td>ante#anteNunc.org</td>
</tr>
<tr>
<td>Korea, South</td>
<td>Montpelier</td>
<td>L8 2TT</td>
<td>a#sagittisDuisgravida.org</td>
</tr>
<tr>
<td>Papua New Guinea</td>
<td>Dokkum</td>
<td>205204</td>
<td>sed.libero#convallisest.co.uk</td>
</tr>
<tr>
<td>New Zealand</td>
<td>Maisires</td>
<td>9279</td>
<td>ultrices.posuere.cubilia#sem.org</td>
</tr>
<tr>
<td>Panama</td>
<td>Rankweil</td>
<td>30910</td>
<td>elit.fermentum#odio.org</td>
</tr>
<tr>
<td>New Zealand</td>
<td>Melsele</td>
<td>23428</td>
<td>sed.libero.Proin#nequevitaesemper.com</td>
</tr>
<tr>
<td>Cuba</td>
<td>Wolvertem</td>
<td>93687-468</td>
<td>auctor.odio#pellentesqueafacilisis.edu</td>
</tr>
<tr>
<td>Indonesia</td>
<td>Rothesay</td>
<td>919761</td>
<td>augue.scelerisque#asollicitudin.com</td>
</tr>
<tr>
<td>Japan</td>
<td>Inuvik</td>
<td>2899</td>
<td>massa.non#ligulaDonecluctus.org</td>
</tr>
<tr>
<td>Mauritius</td>
<td>Zeitz</td>
<td>603912</td>
<td>consequat#diamPellentesquehabitant.edu</td>
</tr>
<tr>
<td>Curaçao</td>
<td>Lincoln</td>
<td>11148</td>
<td>tristique.neque#Nullamlobortis.org</td>
</tr>
<tr>
<td>Swaziland</td>
<td>Newtown</td>
<td>9616</td>
<td>ipsum#sapien.ca</td>
</tr>
<tr>
<td>Brazil</td>
<td>Rodì Milici</td>
<td>861316</td>
<td>fames#variusultricesmauris.ca</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
It can be done with CSS position: fixed and jQuery script. Check out the snippet below or JSFiddle.
$('.grid-stack').gridstack();
$('thead th').each(function(index) {
$('.fixed-header th').eq(index).css('width', $(this).width());
});
$('.fixed-header-container').height($('.fixed-header').height());
$('.fixed-header-container').hide();
$('.grid-stack-item-content').scroll(function() {
var $table = $('.content-table');
if ($table.offset().top >= 0) {
$('.fixed-header-container').hide();
} else if ($table.offset().top < 0) {
$('.fixed-header-container').show();
}
});
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
.fixed-header {
position: fixed;
background-color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.min.css" rel="stylesheet" />
<div class="grid-stack">
<div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="10" data-gs-height="2">
<div class="grid-stack-item-content fixed-header-container" style="z-index: 1 !important;">
<table class="fixed-header">
<tr>
<th>ColA</th>
<th>ColB</th>
<th>ColC</th>
<th>ColD</th>
</tr>
</table>
</div>
<div class="grid-stack-item-content">
<div>
<h3>Title</h3>
<input type="text">
<div>
<button>Button A</button>
<button>Button B</button>
</div>
<div>
<a>Link A</a>
<a>Link B</a>
</div>
</div>
<table class="content-table">
<thead>
<tr>
<th>ColA</th>
<th>ColB</th>
<th>ColC</th>
<th>ColD</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mauritius</td>
<td>Castor</td>
<td>F14 3QF</td>
<td>dignissim.pharetra#aliquetmolestietellus.net</td>
</tr>
<tr>
<td>Guyana</td>
<td>Inuvik</td>
<td>67752</td>
<td>Nam.porttitor#sitamet.edu</td>
</tr>
<tr>
<td>Norfolk Island</td>
<td>Sparwood</td>
<td>10899-987</td>
<td>in.consectetuer#ametmetusAliquam.net</td>
</tr>
<tr>
<td>Afghanistan</td>
<td>Sant'Urbano</td>
<td>7142</td>
<td>lectus.convallis#ornareIn.co.uk</td>
</tr>
<tr>
<td>Macao</td>
<td>Bon Accord</td>
<td>16-568</td>
<td>auctor.velit.Aliquam#consectetuerrhoncus.edu</td>
</tr>
<tr>
<td>Philippines</td>
<td>Anghiari</td>
<td>280294</td>
<td>neque.vitae#eu.org</td>
</tr>
<tr>
<td>Bangladesh</td>
<td>Falciano del Massico</td>
<td>90856</td>
<td>id#vitae.edu</td>
</tr>
<tr>
<td>Micronesia</td>
<td>Divinópolis</td>
<td>45-520</td>
<td>scelerisque.neque#vitaesemper.co.uk</td>
</tr>
<tr>
<td>Antigua and Barbuda</td>
<td>Dudzele</td>
<td>728363</td>
<td>dignissim.tempor.arcu#vulputate.net</td>
</tr>
<tr>
<td>Papua New Guinea</td>
<td>Joué-lès-Tours</td>
<td>958173</td>
<td>amet#eleifendnondapibus.net</td>
</tr>
<tr>
<td>Hong Kong</td>
<td>Gateshead</td>
<td>83548-761</td>
<td>fringilla.purus#enimnec.com</td>
</tr>
<tr>
<td>Iran</td>
<td>Minto</td>
<td>80622</td>
<td>adipiscing.ligula#fringillaDonec.edu</td>
</tr>
<tr>
<td>Curaçao</td>
<td>Whitby</td>
<td>59472</td>
<td>ante#anteNunc.org</td>
</tr>
<tr>
<td>Korea, South</td>
<td>Montpelier</td>
<td>L8 2TT</td>
<td>a#sagittisDuisgravida.org</td>
</tr>
<tr>
<td>Papua New Guinea</td>
<td>Dokkum</td>
<td>205204</td>
<td>sed.libero#convallisest.co.uk</td>
</tr>
<tr>
<td>New Zealand</td>
<td>Maisires</td>
<td>9279</td>
<td>ultrices.posuere.cubilia#sem.org</td>
</tr>
<tr>
<td>Panama</td>
<td>Rankweil</td>
<td>30910</td>
<td>elit.fermentum#odio.org</td>
</tr>
<tr>
<td>New Zealand</td>
<td>Melsele</td>
<td>23428</td>
<td>sed.libero.Proin#nequevitaesemper.com</td>
</tr>
<tr>
<td>Cuba</td>
<td>Wolvertem</td>
<td>93687-468</td>
<td>auctor.odio#pellentesqueafacilisis.edu</td>
</tr>
<tr>
<td>Indonesia</td>
<td>Rothesay</td>
<td>919761</td>
<td>augue.scelerisque#asollicitudin.com</td>
</tr>
<tr>
<td>Japan</td>
<td>Inuvik</td>
<td>2899</td>
<td>massa.non#ligulaDonecluctus.org</td>
</tr>
<tr>
<td>Mauritius</td>
<td>Zeitz</td>
<td>603912</td>
<td>consequat#diamPellentesquehabitant.edu</td>
</tr>
<tr>
<td>Curaçao</td>
<td>Lincoln</td>
<td>11148</td>
<td>tristique.neque#Nullamlobortis.org</td>
</tr>
<tr>
<td>Swaziland</td>
<td>Newtown</td>
<td>9616</td>
<td>ipsum#sapien.ca</td>
</tr>
<tr>
<td>Brazil</td>
<td>Rodì Milici</td>
<td>861316</td>
<td>fames#variusultricesmauris.ca</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
We have some product data that has varying table data. Sometimes there is 2 column, then perhaps 4. When there is 4 columns, it causes problems on mobile and doesn't fit with our responsive layout.
Can anyone help get the table to work better on mobile.
Here is the original table: https://jsfiddle.net/Lnjsv48g/
A guide I am using: https://css-tricks.com/examples/ResponsiveTables/responsive.php
Here is my responsive attempt: https://jsfiddle.net/f1z6czeo/
<table align="center" border="2" style="height:445px; width:761px">
<caption>Technical Information</caption>
<tbody>
<tr>
<td>Washer Speeds</td>
<td>Speed 1</td>
<td>Speed 2</td>
<td>Speed 3</td>
</tr>
<tr>
<td>Revs per minute squared</td>
<td>480m³/hr</td>
<td>600m³/hr</td>
<td>950³/hr</td>
</tr>
<tr>
<td>Extraction Rate ³/hr Recirculated</td>
<td>322m³/hr</td>
<td>402m³/hr</td>
<td>636m³/hr</td>
</tr>
<tr>
<td>Noise Levels DB/A</td>
<td>54 DB</td>
<td>57 DB</td>
<td>63 DB</td>
</tr>
<tr>
<td>Minimum Height of Product</td>
<td>No Less Than 650mm From Your Base</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>DPP Rating</td>
<td>D</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Backup Filter (Optional Extra)</td>
<td>Round 5 (2 Filters required)</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Light Options</td>
<td>2x 1.2w LED Bulk BBT299</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Marble Size (Marble Kit optional Extra)</td>
<td>125mm Minimum(150mm is recommended)(Up to 4 Mtr Only)</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Remote Control</td>
<td>No</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Warranty (Subject to registration)</td>
<td>3 years</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>BPP Scheme Colour Code</td>
<td>N/A</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>BOR Rand Filters (Cleaner Safe)</td>
<td>Y</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Box Type</td>
<td>3 Amp</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Gang Type</td>
<td>Toggle Control</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>
<table border="0" style="height:82px; width:273px">
<tbody>
<tr>
<td><img alt="pdf icon" src="https://s18.postimg.org/wlzpg6c21/PDF_Logo_2.png" style="float:left; height:75px; margin-right:20px; width:75px"></td>
<td>Installation Guide<br>
PDF File - Opens in a New Window</td>
</tr>
</tbody>
</table>
</td>
<td>
<table border="0">
<tbody>
<tr>
<td><img alt="pdf icon" src="https://s18.postimg.org/wlzpg6c21/PDF_Logo_2.png" style="float:left; height:75px; margin-right:20px; width:75px"></td>
<td>Product Specification Guide<br>
PDF File - Opens in a New Window</td>
</tr>
</tbody>
</table>
</td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
Here is an solution: look at snippet
#media only screen and (max-width: 760px){
table {
width: 100%;
border-collapse: collapse;
border: none;
}
table, thead, tbody, th {
display: block;
}
tbody, td, tr {
display: inline-block;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr.techinfo {
border: 1px solid #aaa;
width: 100%;
background: #eee;
box-sizing: border-box;
}
.techinfo > td {
float: right;
width: 60%;
display: inline-block;
background: #eee;
padding-left: 3px;
border: none;
box-sizing: border-box;
overflow: hidden;
white-space: nowrap;
}
.techinfo > td:first-child {
width: 39%;
float: left;
line-height: 4em;
}
.techinfo > td:nth-child(2){
background: #bbb;
}
.techinfo > td:nth-child(3){
background: #ccc;
}
.techinfo > td:nth-child(4){
background: #ddd;
}
.docs {
width: 100%;
border: none;
}
.docs > td {
width: 100%;
box-sizing: border-box;
background-color: #eee;
}
.docs > td > table {
box-sizing: border-box;
padding: 0 3px;
}
.docs > td tr {
border: none;
box-sizing: border-box;
}
}
<table align="center" border="2">
<caption>Technical Information</caption>
<tbody>
<tr class="techinfo">
<td>Washer Speeds</td>
<td>Speed 1</td>
<td>Speed 2</td>
<td>Speed 3</td>
</tr>
<tr class="techinfo">
<td>Revs per minute squared</td>
<td>480m³/hr</td>
<td>600m³/hr</td>
<td>950³/hr</td>
</tr>
<tr class="techinfo">
<td>Extraction Rate ³/hr Recirculated</td>
<td>322m³/hr</td>
<td>402m³/hr</td>
<td>636m³/hr</td>
</tr>
<tr class="techinfo">
<td>Noise Levels DB/A</td>
<td>54 DB</td>
<td>57 DB</td>
<td>63 DB</td>
</tr>
<tr class="techinfo">
<td>Minimum Height of Product</td>
<td>No Less Than 650mm From Your Base</td>
<td> </td>
<td> </td>
</tr>
<tr class="techinfo">
<td>DPP Rating</td>
<td>D</td>
<td> </td>
<td> </td>
</tr>
<tr class="techinfo">
<td>Backup Filter (Optional Extra)</td>
<td>Round 5 (2 Filters required)</td>
<td> </td>
<td> </td>
</tr>
<tr class="techinfo">
<td>Light Options</td>
<td>2x 1.2w LED Bulk BBT299</td>
<td> </td>
<td> </td>
</tr>
<tr class="techinfo">
<td>Marble Size (Marble Kit optional Extra)</td>
<td>125mm Minimum(150mm is recommended)(Up to 4 Mtr Only)</td>
<td> </td>
<td> </td>
</tr>
<tr class="techinfo">
<td>Remote Control</td>
<td>No</td>
<td> </td>
<td> </td>
</tr>
<tr class="techinfo">
<td>Warranty(Subject to registration)</td>
<td>3 years</td>
<td> </td>
<td> </td>
</tr>
<tr class="techinfo">
<td>BPP Scheme Colour Code</td>
<td>N/A</td>
<td> </td>
<td> </td>
</tr>
<tr class="techinfo">
<td>BOR Rand Filters (Cleaner Safe)</td>
<td>Y</td>
<td> </td>
<td> </td>
</tr>
<tr class="techinfo">
<td>Box Type</td>
<td>3 Amp</td>
<td> </td>
<td> </td>
</tr>
<tr class="techinfo">
<td>Gang Type</td>
<td>Toggle Control</td>
<td> </td>
<td> </td>
</tr>
<tr class="docs">
<td>
<table>
<tbody>
<tr>
<td><img alt="pdf icon" src="https://s18.postimg.org/wlzpg6c21/PDF_Logo_2.png" style="float:left; height:75px; margin-right:20px; width:75px"></td>
<td>Installation Guide<br>
PDF File - Opens in a New Window</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td><img alt="pdf icon" src="https://s18.postimg.org/wlzpg6c21/PDF_Logo_2.png" style="float:left; height:75px; margin-right:20px; width:75px"></td>
<td>Product Specification Guide<br>
PDF File - Opens in a New Window</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
i would suggest using text-align:center instead of padding:50% as this doesn't align very well.
That said, it does appear that your table re-renders at the appropriate size. What is it you are wanting it to do specifically? Could you mock-up an 'after' image?
Lastly, this may not be helpful for you if this is just a learning exercise, but a jQuery plugin exists to do exactly this: tablesaw
Here I have 2 tables, I want these 2 tables' width to be same, when the Confirmer name is long the second table expands but the first one remains same, I want both of them to be of same width in any situation, how can that be done? Check this JS Bin example.
HTML:
<table>
<tbody><thead><tr><th>1.5 - STATE</th>
</tr></thead><tr>
<td>
<b>Issued by </b>User Administrator <b>on</b><font face="verdana" size="1" color="red"> 24/05/2013 06:43
</font></td>
</tr>
</tbody></table>
<table>
<tbody><tr>
<th>
Confirmer
</th>
<th>Status</th>
<th>Date</th>
<th>Comment</th>
</tr>
<tr>
<td>Pathak Chankey</td>
<td>
<img src="xyz.png">
</td>
<td> 24/05/2013 06:43 </td>
<td> </td>
</tr>
<tr>
<td>Lastname Firstname</td>
<td>
<img src="xyz.png">
</td>
<td> 24/05/2013 06:43 </td>
<td> </td>
</tr>
<tr>
<td>User Administrator</td>
<td>
<img src="xyz.png">
</td>
<td> 24/05/2013 06:43 </td>
<td> </td>
</tr>
</tbody></table>
CSS:
thead{
background-color: grey;
}
table, td
{
background:#fffAF0;
border: 1px solid black;
border-collapse:collapse;
}
Just add a container and set a width in your container then apply the 100% width to your tables like this
div{
width:400px;
}
table {
width:100%;
}
<div>
<table></table>
<table></table>
</div>
http://jsbin.com/iduciw/32/edit
Why do not you use a single table?
<table>
<tr>
<th colspan="4">1.5 - STATE</th>
</tr>
<tr>
<td colspan="4"><b>Issued by </b>User Administrator <b>on</b><font face="verdana" size="1" color="red"> 24/05/2013 06:43 </font></td>
</tr>
<tr>
<th> Confirmer </th>
<th>Status</th>
<th>Date</th>
<th>Comment</th>
</tr>
<tr>
<td>Pathak Chankey</td>
<td><img src="xyz.png"></td>
<td> 24/05/2013 06:43 </td>
<td> </td>
</tr>
<tr>
<td>Lastname Firstname</td>
<td><img src="xyz.png"></td>
<td> 24/05/2013 06:43 </td>
<td> </td>
</tr>
<tr>
<td>User Administrator</td>
<td><img src="xyz.png"></td>
<td> 24/05/2013 06:43 </td>
<td> </td>
</tr>
</table>