Avoid page break in table with rowspan on print - html

The table row will overflow table head when page breaks on print. I tried page-break-inside: avoid, but not working.
screenshot
Added some code, the is dynamically changed. On print when page break point is at rowspan part, always causes problems.
<table class="table table-bordered reportTable" id="contentToConvert">
<thead style="text-align: center" class="report-container">
<tr>
<th scope="col" rowspan="2" style="width: 10%; vertical-align: middle;">Order #</th>
<th scope="col" rowspan="2" style="width: 20%; vertical-align: middle;">Customer Information</th>
<th scope="col" rowspan="2" style="width: 9%; vertical-align: middle;">Package(s)</th>
<th scope="col" colspan="5" style="width: 61%; vertical-align: middle;">Package Information</th>
</tr>
<tr>
<th style="width: 17%; vertical-align: middle">Tracking Number</th>
<th style="width: 10%; vertical-align: middle">Size</th>
<th style="width: 10%; vertical-align: middle">Weight</th>
<th style="width: 14%; vertical-align: middle">Instructions</th>
<th style="width: 10%; vertical-align: middle">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3" style="text-align: center; padding-left: 0rem; padding-right: 0rem">RetailOrder_0023
</td>
<td rowspan="3" style="padding-left: 1rem">
George Jason <br>
123 Arlington street <br>
Arlington VA 22222<br>
123-456-7890<br>
GEORGE.Jason#gmail.com
</td>
<td rowspan="3" style="text-align: center">3</td>
<td style="text-align: center; vertical-align: middle; padding: 0">5134134231231261341231</td>
<td style="text-align: center; vertical-align: middle">5 / 5/ 5 inches</td>
<td style="text-align: center; vertical-align: middle">10 lbs 10 oz</td>
<td style="text-align: center; vertical-align: middle"></td>
<td style="text-align: center; vertical-align: middle">Delivered</td>
</tr>
<tr>
<td style="text-align: center; vertical-align: middle; padding: 0">018635013640123401234</td>
<td style="text-align: center; vertical-align: middle">5 / 5/ 5 inches</td>
<td style="text-align: center; vertical-align: middle">10 lbs 10 oz</td>
<td style="text-align: center; vertical-align: middle">Leave at front door</td>
<td style="text-align: center; vertical-align: middle">Delivered</td>
</tr>
<tr>
<td style="text-align: center; vertical-align: middle; padding: 0">018635013640123401234</td>
<td style="text-align: center; vertical-align: middle">5 / 5/ 5 inches</td>
<td style="text-align: center; vertical-align: middle">10 lbs 10 oz</td>
<td style="text-align: center; vertical-align: middle"></td>
<td style="text-align: center; vertical-align: middle">Delivered</td>
</tr>
</tbody>
</table>

Related

Vertical-align middle not working in a table

I am trying to vertically align the text inside of the table cell however it is not working. It currently shows the text in mobile as shown in the picture below. The problem only exist in mobile.
Screenshot vs How I want it to look
DCR
<table width="100%">
<tbody>
<tr>
<td style="text-align: center;"><strong> Estimated Delivery Times</strong></td>
</tr>
</tbody>
</table>
<table width="100%">
<tbody>
<tr>
<td style="width: 26.2704%; text-align: center;vertical-align: middle;">United States</td>
<td style="text-align: center; width: 31.7604%;vertical-align: middle;"><span>3 - 6 business days</span></td>
<td style="text-align: center; width: 39.2015%;vertical-align: middle;"><span>7 - 13 business days</span></td>
</tr>
<tr>
<td style="width: 26.2704%; text-align: center;vertical-align: middle;">Canada</td>
<td style="text-align: center; width: 31.7604%;vertical-align: middle;"><span>5 - 11 business days</span></td>
<td style="text-align: center; width: 39.2015%;vertical-align: middle;"><span>7 - 15 business days</span></td>
</tr>
<tr>
<td style="width: 26.2704%; text-align: center;vertical-align: middle;">United Kingdom</td>
<td style="text-align: center; width: 31.7604%;vertical-align: middle;"><span>7 - 10 business days</span></td>
<td style="text-align: center; width: 39.2015%;vertical-align: middle;"><span>7 - 12 business days</span></td>
</tr>
<tr>
<td style="width: 26.2704%; text-align: center;vertical-align: middle;">Australia</td>
<td style="text-align: center; width: 31.7604%;vertical-align: middle;"><span>3 - 6 business days</span></td>
<td style="text-align: center; width: 39.2015%;vertical-align: middle;"><span>7 - 15 business days</span></td>
</tr>
<tr>
<td style="width: 26.2704%; text-align: center;vertical-align: middle;">New Zealand</td>
<td style="text-align: center; width: 31.7604%;vertical-align: middle;"><span>6 - 11 business days</span></td>
<td style="text-align: center; width: 39.2015%;vertical-align: middle;"><span>7 - 15 business days</span></td>
</tr>
</tbody>
</table>

just make the width of 2nd and 3rd columns the same
td{
height:15vh;
border:solid 1px black;
}
<table width="100%">
<tbody>
<tr>
<td style="text-align: center;"><strong> Estimated Delivery Times</strong></td>
</tr>
</tbody>
</table>
<table width="100%">
<tbody>
<tr>
<td style="width: 30%; text-align: center;">United States</td>
<td style="text-align: center; width: 35%;"><span>3 - 6 business days</span></td>
<td style="text-align: center; width: 35%;"><span>7 - 13 business days</span></td>
</tr>
<tr>
<td style="width: 30%; text-align: center;vertical-align: middle;">Canada</td>
<td style="text-align: center; width: 35%;vertical-align: middle;"><span>5 - 11 business days</span></td>
<td style="text-align: center; width: 35%;vertical-align: middle;"><span>7 - 15 business days</span></td>
</tr>
<tr>
<td style="width: 30%; text-align: center;vertical-align: middle;">United Kingdom</td>
<td style="text-align: center; width: 35%;vertical-align: middle;"><span>7 - 10 business days</span></td>
<td style="text-align: center; width: 35%;vertical-align: middle;"><span>7 - 12 business days</span></td>
</tr>
<tr>
<td style="width: 30%; text-align: center;vertical-align: middle;">Australia</td>
<td style="text-align: center; width: 35%;vertical-align: middle;"><span>3 - 6 business days</span></td>
<td style="text-align: center; width: 35%;vertical-align: middle;"><span>7 - 15 business days</span></td>
</tr>
<tr>
<td style="width: 30%; text-align: center;vertical-align: middle;">New Zealand</td>
<td style="text-align: center; width: 35%;vertical-align: middle;"><span>6 - 11 business days</span></td>
<td style="text-align: center; width: 35%;vertical-align: middle;"><span>7 - 15 business days</span></td>
</tr>
</tbody>
</table>

The html table is showing different cell width in each page

I was trying to list some data, the first table may contain first 10 data of the list remaining will show in the next table. I achieve this by looping the same table. But the table is showing different cell width in each page.
The first page shows table like this,
The second page shows the table like this,
The code i used is
<html>
<head>
<style type="text/css" media="print">
#media print {
html, body {
color: black;
margin: 0 !important;
padding: 0 !important;
width: 100%;
height: 100vh !important;
/* overflow: hidden !important; */
font-size: 15px;
}
#page {
page-break-inside: avoid;
size: A4 landscape;
margin: 10;
}
.footer {
display: table-cell;
vertical-align: bottom;
}
input[type=checkbox], input[type=radio] {
opacity: 1 !important;
}
}
</style>
<style type="text/css">
page {
background: white;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
}
page[size="A4"] {
width: 21cm;
height: 29.7cm;
}
page[size="A4"][layout="landscape"] {
width: 29.7cm;
height: 21cm;
}
.table-wtotbr {
width: 100%;
}
.table-wtbr {
width: 100%;
}
.table-wtotbr th, td {
border-bottom: 1px solid black;
}
.table-wtbr th, td {
border: 1px solid black;
}
.container-table {
color: black;
width: 100%;
height: 100%;
font-size: 11px;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
}
.checkbox {
width:12px;
height:12px;
border: 1px solid #000;
display: inline-block;
}
</style>
</head>
<body>
<%
int rwln = Integer.parseInt(request.getAttribute("rwln").toString());
int cnt = 0;
int cntt = 0;
int listlngth = 9;
int begin = 0;
int mnlpcnt = rwln / 10;
double mlopct = (double) rwln / 10;
%>
<c:set value="<%=cntt%>" var="cntt"></c:set>
<c:set value="<%=cnt%>" var="cnt"></c:set>
<c:set value="<%=mnlpcnt%>" var="mnlpcnt"></c:set>
<c:set value="<%=listlngth%>" var="listlngth"></c:set>
<c:set value="<%=begin%>" var="begin"></c:set>
<!-- getting current date -->
<%
Date dNow = new Date();
SimpleDateFormat ft = new SimpleDateFormat("dd.MM.yyyy");
String cdate = ft.format(dNow);
%>
<!-- /getting current date -->
<jsp:useBean id="today" class="java.util.Date" />
<c:forEach var="kk" begin="0" end="<%=mnlpcnt%>">
<page size="A4" layout="landscape">
<div class="container-table">
<table class="table-wtotbr">
<tr>
<td style="vertical-align: middle; text-align: center;">
<img alt="logo" src="assets/images/logo.png" height="40px">
</td>
<td style="text-align: center; width: 60%; font-size: 20px;">
<b>Comapany</b>
</td>
</tr>
</table>
<table class="table-wtotbr">
<tr height="10px">
<td rowspan="2" style="text-align: center; vertical-align: middle;">Job
Travel Card</td>
<td style="widtd: 10%;">JTC No:<%=request.getAttribute("jtcnum")%></td>
</tr>
<tr height="10px">
<td>Date</td>
</tr>
</table>
<table class="table-wtotbr">
<tr height="10px">
<td style="text-align: left; font-size: 8px;" colspan="2">Project
Number: <%=request.getAttribute("prjnno")%> </td>
<td style="text-align: left; font-size: 8px;" colspan="2">Unit
No. / Tag No.:</td>
</tr>
<tr height="10px">
<td style="text-align: left;" colspan="3">Area Number:</td>
<td style="text-align: left;">Material Class: <%=request.getAttribute("mclass")%></td>
</tr>
<tr height="10px">
<td style="text-align: left;">Drawing No: / ISO Number: <%=request.getAttribute("drwno")%></td>
<td style="text-align: left;" widtd="25%">JC No: <%=request.getAttribute("miv")%></td>
<td style="text-align: left;">Sheet No:</td>
<td style="text-align: left;">Rev. No.:</td>
</tr>
<tr height="10px">
<td style="text-align: left; font-size: 8px;">Item Description:</td>
<td style="text-align: left; font-size: 8px;" colspan="3">ITP
Stage Nos.:</td>
</tr>
</table>
<!-- Fitup data table-sm -->
<table class="table-wtbr">
<tr height="10px">
<td rowspan="12" style="text-align: center; vertical-align: middle;">
<span class="verticaltext"> Fabrication Assembly Fit-Up </span>
</td>
<td style="text-align: center; vertical-align: middle;" rowspan="2">Weld/joint
No</td>
<td colspan="2" style="text-align: center;">Material Spec Grade</td>
<td style="text-align: center; vertical-align: middle;" rowspan="2">Size</td>
<td style="text-align: center; vertical-align: middle;" rowspan="2">Thickness</td>
<td colspan="2" style="text-align: center;">Heat/Plate/TestNo</td>
<td style="text-align: center; vertical-align: middle;" rowspan="2">Welder
No. for tracking</td>
<td colspan="2" style="text-align: center;">Fitup Result</td>
<td style="text-align: center; vertical-align: middle;" rowspan="2">Date</td>
<td style="text-align: center; vertical-align: middle;" rowspan="2" width="5%">Sign</td>
</tr>
<tr height="10px">
<td style="text-align: center; font-size: 8px;" width="10%">Material
1</td>
<td style="text-align: center; font-size: 8px;" width="10%">Material
2</td>
<td style="text-align: center; font-size: 8px;" width="10%">Material
1</td>
<td style="text-align: center; font-size: 8px;" width="10%">Material
2</td>
<td style="text-align: center; font-size: 8px;">Accept</td>
<td style="text-align: center; font-size: 8px;">Reject</td>
</tr>
<c:choose>
<c:when test="${mnlpcnt <1 }">
<c:forEach var="jdata" items="${jtcdata}">
<tr height="10px" style="font-size: 12px;">
<td style="text-align: center;" width="7%">${jdata.getJointno()}</td>
<td style="text-align: center;" width="7%">${jdata.getItem1()}</td>
<td style="text-align: center;" width="7%">${jdata.getItem2()}</td>
<td style="text-align: center;" width="7%">${jdata.getDia()}</td>
<td style="text-align: center;" width="7%">${jdata.getThick()}</td>
<td style="text-align: center;" width="7%"></td>
<td style="text-align: center;" width="7%"></td>
<td style="text-align: center;" width="7%"></td>
<td style="text-align: center;" width="7%"></td>
<td style="text-align: center;" width="7%"></td>
<td style="text-align: center;" width="7%"></td>
<td style="text-align: center;" width="7%"></td>
</tr>
</c:forEach>
</c:when>
<c:when test="${mnlpcnt >= 1 }">
<c:forEach var="qq" begin="${begin}" end="${listlngth}">
<tr height="10px" style="font-size: 12px;">
<td style="text-align: center;">${jtcdata[qq].getJointno()}</td>
<td style="text-align: center;">${jtcdata[qq].getItem1()}</td>
<td style="text-align: center;">${jtcdata[qq].getItem2()}</td>
<td style="text-align: center;">${jtcdata[qq].getDia()}</td>
<td style="text-align: center;">${jtcdata[qq].getThick()}</td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
</tr>
</c:forEach>
</c:when>
</c:choose>
<tr>
<td colspan="5" style="font-size: 10px;">Name & Signature of
fabrication foreman</td>
<td colspan="2" style="font-size: 10px;">Released to</td>
<td colspan="1" style="font-size: 10px;">
<div class="checkbox"></div>
QC/NDE/DIM.</td>
<td colspan="3" style="font-size: 10px;"><div class="checkbox"></div>
Welding</td>
<td colspan="4" style="font-size: 10px;"><div class="checkbox"></div>
Fabrication/Assembly</td>
</tr>
<tr>
<td colspan="7" style="font-size: 10px;">Date</td>
<td colspan="7" style="font-size: 10px;">Date</td>
</tr>
</table>
<!-- welding data -->
<table class="table-wtbr">
<tr heigth="10px">
<td rowspan="13" style="text-align: center; vertical-align: middle;">
<span class="verticaltext"> Welding Details </span>
</td>
<td style="text-align: center; vertical-align: middle;" width="7%"
rowspan="3">Joint No</td>
<td style="text-align: center; vertical-align: middle;" rowspan="3"
width="15%">WPS No.</td>
<td colspan="3" style="text-align: center;">Welding Process</td>
<td colspan="3" style="text-align: center;">Welder/Operation
No.</td>
<td colspan="2" rowspan="2"
style="text-align: center; vertical-align: middle;">Visual
Inspection</td>
<td style="text-align: center; vertical-align: middle;" rowspan="3"
width="5%">Date</td>
<td style="text-align: center; vertical-align: middle;" rowspan="3"
width="5%">Sign</td>
</tr>
<tr heigth="10px">
<td colspan="3" style="text-align: center;">Passes</td>
<td colspan="3" style="text-align: center;">Passes</td>
</tr>
<tr heigth="10px">
<td style="text-align: center; font-size: 8px;" width="10%">Root/Hot</td>
<td style="text-align: center; font-size: 8px;" width="10%">Fill</td>
<td style="text-align: center; font-size: 8px;" width="10%">Cap</td>
<td style="text-align: center; font-size: 8px;" width="10%">Root/Hot</td>
<td style="text-align: center; font-size: 8px;" width="10%">Fill</td>
<td style="text-align: center; font-size: 8px;" width="10%">Cap</td>
<td style="text-align: center; font-size: 8px;" width="4%">Accept</td>
<td style="text-align: center; font-size: 8px;" width="4%">Reject</td>
</tr>
<c:choose>
<c:when test="${mnlpcnt <1 }">
<c:forEach var="jdata" items="${jtcdata}">
<tr height="10px" style="font-size: 12px;">
<td style="text-align: center;">${jdata.getJointno()}</td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
</tr>
</c:forEach>
</c:when>
<c:when test="${mnlpcnt >= 1 }">
<c:forEach var="pp" begin="${begin}" end="${listlngth}">
<tr height="10px" style="font-size: 12px;">
<td style="text-align: center;">${jtcdata[pp].getJointno()}</td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
</tr>
</c:forEach>
</c:when>
</c:choose>
<tr>
<td colspan="4" style="font-size: 10px;">Name & Signature of
fabrication foreman</td>
<td colspan="2" style="font-size: 10px;">Released to</td>
<td colspan="1" style="font-size: 10px;"><div class="checkbox"></div>
QC/NDE/DIM.</td>
<td colspan="2" style="font-size: 10px;"><div class="checkbox"></div>
Welding</td>
<td colspan="5" style="font-size: 10px;"><div class="checkbox"></div>
Fabrication/Assembly</td>
</tr>
<tr>
<td colspan="14" style="font-size: 10px;">Name & Signature of
QC Personel</td>
</tr>
<tr>
<td colspan="7" style="font-size: 10px;">Date</td>
<td colspan="7" style="font-size: 10px;">Date</td>
</tr>
</table>
<div class="footer">
<div style="float: left;">
<!--
<%=request.getAttribute("prjnno")%>-JTC-<%=request.getAttribute("jtcnum")%>-PIP-REV-01
-->
10636-JTC-276-PIP-REV-01
</div>
<div style="float: right;">
<%=cdate%>
</div>
</div>
</div>
</page>
<%
begin = listlngth+1;
listlngth = listlngth+9;
%>
<c:set value="<%=listlngth%>" var="listlngth"></c:set>
<c:set value="<%=begin%>" var="begin"></c:set>
</c:forEach>
</body>
</html>
Can anyone help me to solving this issue.
Thank you in advance.

How to add scroll bar to the table with fixed header row?

My table have too many columns and it overflows the page's 100% width. So I need to add a horizontal scroll bar to table.
But I also need to fix the header for vertical scroll bar when there are too many rows to scroll.
What is the correct way to accomplish it, using CSS and HTML?
First code is a CSS
table .titleFormat{
text-align: center;
width:170px;
font-size:14px;
}
This is HTML code
<div style="width: 400px;height:150px;overflow-x: auto;overflow-y: auto">
<table id="example-basic" style="width: 100%;">
<thead>
<tr class="TitleHeader">
<th width="200px"><div class="titleFormat">A</div></th>
<th width="100px"><div class="titleFormat">B</div></th>
<th width="100px"><div class="titleFormat">C</div></th>
<th width="100px"><div class="titleFormat">D</div></th>
<th width="100px"><div class="titleFormat">E</div></th>
</tr>
</thead>
<tbody>
<tr>
<td style=" text-align: left ">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
</tr>
<tr>
<td style=" text-align: left ">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
</tr>
<tr>
<td style=" text-align: left ">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
</tr>
<tr>
<td style=" text-align: left ">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
</tr>
<tr>
<td style=" text-align: left ">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
</tr>
<tr>
<td style=" text-align: left ">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
</tr>
<tr>
<td style=" text-align: left ">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
</tr>
</tbody>
</table>
</div>

you can use position:Sticky Element on your th and set the table position:relative and that will do the job.
check below:
table .titleFormat {
text-align: center;
width: 170px;
font-size: 14px;
}
#example-basic {
position: relative;
}
#example-basic th {
position: -webkit-sticky;
/* Safari */
position: sticky;
top: 0;
z-index: 100;
background: green;
}
<div style="width: 400px;height:150px;overflow-x: auto;overflow-y: auto">
<table id="example-basic" style="width: 100%;">
<thead>
<tr class="TitleHeader">
<th width="200px">
<div class="titleFormat">A</div>
</th>
<th width="100px">
<div class="titleFormat">B</div>
</th>
<th width="100px">
<div class="titleFormat">C</div>
</th>
<th width="100px">
<div class="titleFormat">D</div>
</th>
<th width="100px">
<div class="titleFormat">E</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td style=" text-align: left ">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
</tr>
<tr>
<td style=" text-align: left ">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
</tr>
<tr>
<td style=" text-align: left ">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
</tr>
<tr>
<td style=" text-align: left ">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
</tr>
<tr>
<td style=" text-align: left ">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
</tr>
<tr>
<td style=" text-align: left ">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
</tr>
<tr>
<td style=" text-align: left ">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
</tr>
</tbody>
</table>
</div>

check this style
I hope you enjoy it
table {
text-align: left;
position: relative;
border-collapse: collapse;
}
th, td {
padding: 0.25rem;
}
tr th {
background: red;
color: white;
}
th {
background: white;
position: sticky;
top: 0; /* Don't forget this, required for the stickiness */
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}

table column alignment mismatch with the table header

I am working on html table with bootstrap css and want to make the table header fixed with scrollable content.
Below is my code demo:
https://plnkr.co/edit/uRJ6WFVWevksH3ip4kct?p=preview
In my the above plunker demo,you can notice that the header is fixed and the content is scolling but the alignment of the column with the header is mismatched.I have given the same width for the <td> as given the width for <th> but still facing the alignment issue. Please advice what changes to be done to make the column of the content and the header matches and the other issue i noticed is some content of the first row is hidden back to the table header. I tried to resolve using different ways in CSS by setting the width of the header and the <td> but unable to make it..
code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.header-fixed {
width: 100%
}
.table-fixed thead {
}
.table-fixed tbody {
height: 100%;
width: 100%;
}
thead {
position: fixed;
}
</style>
</head>
<body>
<div>
<div class="modal-body">
<div class="row">
<div class="" style="width: 80%; margin: 0px auto">
<table class="table table-bordered header-fixed" style="border :1px">
<thead>
<tr style="background-color: #cdd0d6;">
<th style="width:10%;white-space: wrap;text-align: center;">ID</th>
<th style="width:30%;white-space: nowrap;text-align: center;">Description</th>
<th style="width:10%;white-space: wrap;text-align: center;">DoorNum</th>
<th style="width:10%;white-space: wrap;text-align: center;">First Name</th>
<th style="width:10%;white-space: wrap;text-align: center;">Num of ordered items</th>
<th style="width:30%;white-space: wrap;text-align: center;">Desc Comments</th>
</tr>
</thead>
<tbody >
<tr>
<td style="width:10%;text-align: center;">10</td>
<td style="width:30%;text-align: center; ">Item belongs to Navvy modal 2014WE belomgs to the user name JOE dispathched after one week of odered date</td>
<td style="width:10%;text-align: center; ">798</td>
<td style="width:10%;text-align: center; ">Joe</td>
<td style="width:10%;text-align: center; ">4</td>
<td style="widtg:30%;text-align: center; ">Order dispatched</td>
</tr>
<tr>
<td style="width:10%;text-align: center;">20</td>
<td style="width:30%;text-align: center; "></td>
<td style="width:10%;text-align: center; ">798</td>
<td style="width:10%;text-align: center; ">Joe</td>
<td style="width:10%;text-align: center; ">4</td>
<td style="widtg:30%;text-align: center; ">Order dispatched</td>
</tr>
<tr>
<td style="width:10%;text-align: center;">30</td>
<td style="width:30%;text-align: center; ">Item belongs to Navvy modal 2014WE belomgs to the user name JOE dispathched after one week of odered date</td>
<td style="width:10%;text-align: center; "></td>
<td style="width:10%;text-align: center; ">Joe</td>
<td style="width:10%;text-align: center; ">4</td>
<td style="widtg:30%;text-align: center; ">Order dispatched</td>
</tr>
<tr>
<td style="width:10%;text-align: center;">40</td>
<td style="width:30%;text-align: center; ">Item belongs to Navvy modal 2014WE belomgs to the user name JOE dispathched after one week of odered date</td>
<td style="width:10%;text-align: center; ">798</td>
<td style="width:10%;text-align: center; ">Joe</td>
<td style="width:10%;text-align: center; ">4</td>
<td style="widtg:30%;text-align: center; ">Order dispatched</td>
</tr>
<tr>
<td style="width:10%;text-align: center;">50</td>
<td style="width:30%;text-align: center; ">Item belongs to Navvy modal 2014WE belomgs to the user name JOE dispathched after one week of odered date</td>
<td style="width:10%;text-align: center; ">798</td>
<td style="width:10%;text-align: center; ">Joe</td>
<td style="width:10%;text-align: center; ">4</td>
<td style="widtg:30%;text-align: center; ">Order dispatched</td>
</tr>
<tr>
<td style="width:10%;text-align: center;">60</td>
<td style="width:30%;text-align: center; ">Item belongs to Navvy modal 2014WE belomgs to the user name JOE dispathched after one week of odered date</td>
<td style="width:10%;text-align: center; ">798</td>
<td style="width:10%;text-align: center; ">Joe</td>
<td style="width:10%;text-align: center; ">4</td>
<td style="widtg:30%;text-align: center; ">Order dispatched</td>
</tr>
<tr>
<td style="width:10%;text-align: center;">70</td>
<td style="width:30%;text-align: center; ">Item belongs to Navvy modal 2014WE belomgs to the user name JOE dispathched after one week of odered date</td>
<td style="width:10%;text-align: center; ">798</td>
<td style="width:10%;text-align: center; ">Joe</td>
<td style="width:10%;text-align: center; ">4</td>
<td style="widtg:30%;text-align: center; ">Order dispatched</td>
</tr>
<tr>
<td style="width:10%;text-align: center;">8</td>
<td style="width:30%;text-align: center; ">Item belongs to Navvy modal 2014WE belomgs to the user name JOE dispathched after one week of odered date</td>
<td style="width:10%;text-align: center; ">798</td>
<td style="width:10%;text-align: center; ">Joe</td>
<td style="width:10%;text-align: center; ">4</td>
<td style="widtg:30%;text-align: center; ">Order dispatched</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>>
</body>
</html>

Set that div width <div class="" style="width: 80%; margin: 0px auto"> to 100%
That,
<div class="" style="width: 100%; margin: 0px auto">
Maybe this can solve your problem.

This is because of the table behaviour. If you set a width for td and th it will still increase if the content is wider. One possible 'fix' would be to set the table-layout to fixed (in css), this will result in all tds and ths to have the same width but this may not be desirable. For smaller screens you can perhaps consider a responsive table. There's a really cool one for the Foundation framework: https://zurb.com/playground/responsive-tables or for Twitter Bootstrap (I see you're using that): https://bootsnipp.com/snippets/featured/no-more-tables-respsonsive-table

Make table auto scroll vertically via HTML & CSS

I have a simple bootstrap table that I am trying to have vertically scroll automatically. The reason for this, is that the table will be displayed on a screen and the table could have 10 items in it or 100. So I would like it to auto scroll vertically so the user does not have to do it manually. After it reaches the end, it will just reset and start back from the top...
This is my markup thus far:
<div class="table-responsive" style="height: 700px; overflow: auto;">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th style="text-align: left; font-size: 23px;">#</th>
<th style="text-align: left; font-size: 23px;">Name</th>
<th style="text-align: left; font-size: 23px;">Description</th>
<th style="text-align: left; font-size: 23px;">Date</th>
</tr>
</thead>
<tbody>
<tr class="danger">
<td style="text-align: left; font-size: 16px;">1213</td>
<td style="text-align: left; font-size: 16px;">John Doe</td>
<td style="text-align: left; font-size: 16px;">my short description</td>
<td style="text-align: left; font-size: 16px;">Today's Date</td>
</tr>
</tbody>
</table>
</div>
NOTE: I am hoping this can be achieved with only HTML and CSS.
Any suggestions?

JS (or jQuery) is needed to get the actual element height and scrollHeight and perform the animation on those values
var $el = $(".table-responsive");
function anim() {
var st = $el.scrollTop();
var sb = $el.prop("scrollHeight")-$el.innerHeight();
$el.animate({scrollTop: st<sb/2 ? sb : 0}, 4000, anim);
}
function stop(){
$el.stop();
}
anim();
$el.hover(stop, anim);
.table-responsive{
height:180px; width:50%;
overflow-y: auto;
border:2px solid #444;
}.table-responsive:hover{border-color:red;}
table{width:100%;}
td{padding:24px; background:#eee;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr><th>#</th></tr>
</thead>
<tbody>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr><td>7</td></tr>
<tr><td>8</td></tr>
<tr><td>9</td></tr>
<tr><td>10</td></tr>
</tbody>
</table>
</div>

I highly recommend using using javascript for this. I tried this using CSS only once and then promptly abandoned the idea, but it is theoretically possible. The following demo is not tested on all browsers, has huge compatibility issues, and was the jankiest thing ever on Safari. Moral of the story: use javascript.
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css);
.table-responsive {
overflow-x: hidden;
}
table.table {
animation: ani linear 1s alternate infinite;
}
.table-responsive:hover {
overflow: auto;
}
.table-responsive:hover table.table {
animation: none ;
}
#keyframes ani {
0% { margin-left: 0; transform: translate3d(0%, 0, 0);}
25% { margin-left: 0; transform: translate3d(0%, 0, 0);}
75% { margin-left: 100%; transform: translate3d(-100%, 0, 0);}
100% { margin-left: 100%; transform: translate3d(-100%, 0, 0);}
}
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th style="text-align: left; font-size: 23px;">#</th>
<th style="text-align: left; font-size: 23px;">Name</th>
<th style="text-align: left; font-size: 23px;">Description</th>
<th style="text-align: left; font-size: 23px;">Date</th>
<th style="text-align: left; font-size: 23px;">Date</th>
<th style="text-align: left; font-size: 23px;">Date</th>
<th style="text-align: left; font-size: 23px;">Date</th>
<th style="text-align: left; font-size: 23px;">Date</th>
</tr>
</thead>
<tbody>
<tr class="danger">
<td style="text-align: left; font-size: 16px;">1213</td>
<td style="text-align: left; font-size: 16px;">John Doe</td>
<td style="text-align: left; font-size: 16px;">my short description</td>
<td style="text-align: left; font-size: 16px;">Today's Date</td>
<td style="text-align: left; font-size: 16px;">Today's Date</td>
<td style="text-align: left; font-size: 16px;">Today's Date</td>
<td style="text-align: left; font-size: 16px;">Today's Date</td>
<td style="text-align: left; font-size: 16px;">Today's Date</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th style="text-align: left; font-size: 23px;">#</th>
<th style="text-align: left; font-size: 23px;">Name</th>
<th style="text-align: left; font-size: 23px;">Description</th>
<th style="text-align: left; font-size: 23px;">Date</th>
</tr>
</thead>
<tbody>
<tr class="danger">
<td style="text-align: left; font-size: 16px;">1213</td>
<td style="text-align: left; font-size: 16px;">John Doe</td>
<td style="text-align: left; font-size: 16px;">my short description</td>
<td style="text-align: left; font-size: 16px;">Today's Date</td>
</tr>
</tbody>
</table>
</div>

The code below will not reset and start back from the top the table as asked in the question, but this will help some future readers who trying to scroll and loop the table rows automatically with a fixed header.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$.fn.infiniteScrollUp=function(){
var self=this,kids=self.children()
kids.slice(20).hide()
setInterval(function(){
kids.filter(':hidden').eq(0).fadeIn()
kids.eq(0).fadeOut(function(){
$(this).appendTo(self)
kids=self.children()
})
},1000)
return this
}
$(function(){
$('tbody').infiniteScrollUp()
})
</script>
<title>infiniteScrollUp</title>
</head>
<body>
<table>
<colgroup><col /><col /><col /><col /><col /><col /></colgroup>
<thead>
<tr><th>a</th><th>b</th><th>c</th><th>d</th><th>e</th><th>f</th></tr>
</thead>
<tbody>
<tr><td>1a</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1b</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1c</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1d</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1e</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1f</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1g</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1h</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1i</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1j</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1k</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1l</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1m</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1n</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1o</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1p</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1q</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1r</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1s</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1t</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1u</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1v</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1w</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1x</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1y</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1z</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
</tbody>
</table>
</body>
</html>