Vertical-align middle not working in a table - html

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>

Related

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);
}

Avoid page break in table with rowspan on print

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>

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

<td style="width:"> Is Not Applying To Internet Explorer 7 And Internet Explorer 5

I have tables on some of my web pages. One part of the table has a style in the title above. On all web browsers except Internet Explorer 7 and Internet Explorer 5, the width above is correct. Whereas, on Internet Explorer 7 and 5 the width is wrong. It is too big.
Thanks,
William
Code for the whole page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"/>
<meta name="description" content="<#location> weather data"/>
<meta name="keywords" content="Cumulus, <#location> weather data, weather, data, weather station"/>
<meta http-equiv="refresh" content="300"/>
<title><#location></title>
<link href="weatherstyle.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="content">
<h1><#location></h1>
<h2 style="text-align: left; text-transform: none;"> Latitude: 50.70189285 Longitude: -3.30849957 Elevation <#altitude></h2>
<!--[if IE]>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td colspan="3" class="tableseparator_temp">Temperature/Humidity</td>
</tr>
<tr class="td_temperature_data">
<td class="main_table_text_labels" style="width: 199px">High Temperature</td>
<td align="center"><#tempTH><#tempunit></td>
<td align="right"><#TtempTH></td>
</tr>
<tr class="td_temperature_data">
<td class="main_table_text_labels" style="width: 199px">Low Temperature</td>
<td align="center"><#tempTL><#tempunit></td>
<td align="right"><#TtempTL></td>
</tr>
<tr class="td_temperature_data">
<td class="main_table_text_labels" style="width: 199px">High Heat Index</td>
<td align="center"><#heatindexTH><#tempunit></td>
<td align="right"><#TheatindexTH></td>
</tr>
<tr class="td_temperature_data">
<td class="main_table_text_labels" style="width: 199px">Low Wind Chill</td>
<td align="center"><#wchillTL><#tempunit></td>
<td align="right"><#TwchillTL></td>
</tr>
<tr class="td_temperature_data">
<td class="main_table_text_labels" style="width: 199px">High Apparent Temperature</td>
<td align="center"><#apptempTH><#tempunit></td>
<td align="right"><#TapptempTH></td>
</tr>
<tr class="td_temperature_data">
<td class="main_table_text_labels" style="width: 199px">Low Apparent Temperature</td>
<td align="center"><#apptempTL><#tempunit></td>
<td align="right"><#TapptempTL></td>
</tr>
<tr class="td_temperature_data">
<td class="main_table_text_labels" style="width: 199px">High Dew Point</td>
<td align="center"><#dewpointTH><#tempunit></td>
<td align="right"><#TdewpointTH></td>
</tr>
<tr class="td_temperature_data">
<td class="main_table_text_labels" style="width: 199px">Low Dew Point</td>
<td align="center"><#dewpointTL><#tempunit></td>
<td align="right"><#TdewpointTL></td>
</tr>
<tr class="td_temperature_data">
<td class="main_table_text_labels" style="width: 199px">Temperature Range</td>
<td align="center"><#temprange><#tempunit></td>
<td align="right"></td>
</tr>
<tr class="td_temperature_data">
<td class="main_table_text_labels" style="width: 199px">High Humidity</td>
<td align="center"><#humTH>%</td>
<td align="right"><#ThumTH></td>
</tr>
<tr class="td_temperature_data">
<td class="main_table_text_labels" style="width: 199px">Low Humidity</td>
<td align="center"><#humTL>%</td>
<td align="right"><#ThumTL></td>
</tr>
<tr>
<td colspan="3" class="tableseparator_wind">Wind</td>
</tr>
<tr class="td_wind_data">
<td class="main_table_text_labels" style="width: 199px">High Wind Gust</td>
<td align="center"><#wgustTM> <#windunit></td>
<td align="right"><#TwgustTM></td>
</tr>
<tr class="td_wind_data">
<td class="main_table_text_labels" style="width: 199px">High Average Wind Speed</td>
<td align="center"><#windTM> <#windunit></td>
<td align="right"><#TwindTM></td>
</tr>
<tr class="td_wind_data">
<td class="main_table_text_labels" style="width: 199px">Dominant Direction</td>
<td align="center"><#domwindbearing>° <#domwinddir></td>
<td align="right"></td>
</tr>
<tr class="td_wind_data">
<td class="main_table_text_labels" style="width: 199px">Wind Run</td>
<td align="center"><#windrun> <#windrununit></td>
<td align="right"></td>
</tr>
<tr>
<td colspan="3" class="tableseparator_rainfall">Rainfall</td>
</tr>
<tr class="td_rainfall_data">
<td class="main_table_text_labels" style="width: 199px">High Rainfall Rate</td>
<td align="center"><#rrateTM> <#rainunit>/hr</td>
<td align="right"><#TrrateTM></td>
</tr>
<tr class="td_rainfall_data">
<td class="main_table_text_labels" style="width: 199px">High Hourly Rainfall</td>
<td align="center"><#hourlyrainTH> <#rainunit></td>
<td align="right"><#ThourlyrainTH></td>
</tr>
<tr class="td_rainfall_data">
<td class="main_table_text_labels" style="width: 199px">Rainfall Today</td>
<td align="center"><#rfall> <#rainunit></td>
<td align="right"></td>
</tr>
<tr class="td_rainfall_data">
<td class="main_table_text_labels" style="width: 199px">Days Since Last Dry Day</td>
<td align="center"><#ConsecutiveRainDays></td>
<td align="right"></td>
</tr>
<tr class="td_rainfall_data">
<td class="main_table_text_labels" style="width: 199px">Days Since It Last Rained</td>
<td align="center"><#ConsecutiveDryDays></td>
<td align="right"></td>
</tr>
<tr>
<td colspan="3" class="tableseparator_pressure">Pressure</td>
</tr>
<tr class="td_pressure_data">
<td class="main_table_text_labels" style="width: 199px">High Pressure</td>
<td align="center"><#pressTH> <#pressunit></td>
<td align="right"><#TpressTH></td>
</tr>
<tr class="td_pressure_data">
<td class="main_table_text_labels" style="width: 199px">Low Pressure</td>
<td align="center"><#pressTL> <#pressunit></td>
<td align="right"><#TpressTL></td>
</tr>
<tr>
<td colspan="4" class="td_navigation_bar">:Index::Today::Yesterday::This Month::Monthly Records::This Year::All Time Records::Trends:</td>
</tr>
</tbody>
</table>
<![endif]-->
<!--[if !IE]>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td colspan="3" class="tableseparator_temp">Temperature/Humidity</td>
</tr>
<tr class="td_temperature_data">
<td class="main_table_text_labels" style="width: 199px">High Temperature</td>
<td align="center"><#tempTH><#tempunit></td>
<td align="right"><#TtempTH></td>
</tr>
<tr class="td_temperature_data">
<td class="main_table_text_labels" style="width: 199px">Low Temperature</td>
<td align="center"><#tempTL><#tempunit></td>
<td align="right"><#TtempTL></td>
</tr>
<tr class="td_temperature_data">
<td class="main_table_text_labels" style="width: 199px">High Heat Index</td>
<td align="center"><#heatindexTH><#tempunit></td>
<td align="right"><#TheatindexTH></td>
</tr>
<tr class="td_temperature_data">
<td class="main_table_text_labels" style="width: 199px">Low Wind Chill</td>
<td align="center"><#wchillTL><#tempunit></td>
<td align="right"><#TwchillTL></td>
</tr>
<tr class="td_temperature_data">
<td class="main_table_text_labels" style="width: 199px">High Apparent Temperature</td>
<td align="center"><#apptempTH><#tempunit></td>
<td align="right"><#TapptempTH></td>
</tr>
<tr class="td_temperature_data">
<td class="main_table_text_labels" style="width: 199px">Low Apparent Temperature</td>
<td align="center"><#apptempTL><#tempunit></td>
<td align="right"><#TapptempTL></td>
</tr>
<tr class="td_temperature_data">
<td class="main_table_text_labels" style="width: 199px">High Dew Point</td>
<td align="center"><#dewpointTH><#tempunit></td>
<td align="right"><#TdewpointTH></td>
</tr>
<tr class="td_temperature_data">
<td class="main_table_text_labels" style="width: 199px">Low Dew Point</td>
<td align="center"><#dewpointTL><#tempunit></td>
<td align="right"><#TdewpointTL></td>
</tr>
<tr class="td_temperature_data">
<td class="main_table_text_labels" style="width: 199px">Temperature Range</td>
<td align="center"><#temprange><#tempunit></td>
<td align="right"></td>
</tr>
<tr class="td_temperature_data">
<td class="main_table_text_labels" style="width: 199px">High Humidity</td>
<td align="center"><#humTH>%</td>
<td align="right"><#ThumTH></td>
</tr>
<tr class="td_temperature_data">
<td class="main_table_text_labels" style="width: 199px">Low Humidity</td>
<td align="center"><#humTL>%</td>
<td align="right"><#ThumTL></td>
</tr>
<tr>
<td colspan="3" class="tableseparator_wind">Wind</td>
</tr>
<tr class="td_wind_data">
<td class="main_table_text_labels" style="width: 199px">High Wind Gust</td>
<td align="center"><#wgustTM> <#windunit></td>
<td align="right"><#TwgustTM></td>
</tr>
<tr class="td_wind_data">
<td class="main_table_text_labels" style="width: 199px">High Average Wind Speed</td>
<td align="center"><#windTM> <#windunit></td>
<td align="right"><#TwindTM></td>
</tr>
<tr class="td_wind_data">
<td class="main_table_text_labels" style="width: 199px">Dominant Direction</td>
<td align="center"><#domwindbearing>° <#domwinddir></td>
<td align="right"></td>
</tr>
<tr class="td_wind_data">
<td class="main_table_text_labels" style="width: 199px">Wind Run</td>
<td align="center"><#windrun> <#windrununit></td>
<td align="right"></td>
</tr>
<tr>
<td colspan="3" class="tableseparator_rainfall">Rainfall</td>
</tr>
<tr class="td_rainfall_data">
<td class="main_table_text_labels" style="width: 199px">High Rainfall Rate</td>
<td align="center"><#rrateTM> <#rainunit>/hr</td>
<td align="right"><#TrrateTM></td>
</tr>
<tr class="td_rainfall_data">
<td class="main_table_text_labels" style="width: 199px">High Hourly Rainfall</td>
<td align="center"><#hourlyrainTH> <#rainunit></td>
<td align="right"><#ThourlyrainTH></td>
</tr>
<tr class="td_rainfall_data">
<td class="main_table_text_labels" style="width: 199px">Rainfall Today</td>
<td align="center"><#rfall> <#rainunit></td>
<td align="right"></td>
</tr>
<tr class="td_rainfall_data">
<td class="main_table_text_labels" style="width: 199px">Days Since Last Dry Day</td>
<td align="center"><#ConsecutiveRainDays></td>
<td align="right"></td>
</tr>
<tr class="td_rainfall_data">
<td class="main_table_text_labels" style="width: 199px">Days Since It Last Rained</td>
<td align="center"><#ConsecutiveDryDays></td>
<td align="right"></td>
</tr>
<tr>
<td colspan="3" class="tableseparator_pressure">Pressure</td>
</tr>
<tr class="td_pressure_data">
<td class="main_table_text_labels" style="width: 199px">High Pressure</td>
<td align="center"><#pressTH> <#pressunit></td>
<td align="right"><#TpressTH></td>
</tr>
<tr class="td_pressure_data">
<td class="main_table_text_labels" style="width: 199px">Low Pressure</td>
<td align="center"><#pressTL> <#pressunit></td>
<td align="right"><#TpressTL></td>
</tr>
<tr>
<td colspan="4" class="td_navigation_bar">:Index::Today::Yesterday::This Month::Monthly Records::This Year::All Time Records::Trends:</td>
</tr>
</tbody>
</table>
<![endif]-->
<p class="credits"><br />
Page updated <#update format="dd/mm/yyyy hh:mm"><br/>
Powered by Cumulus v<#version> (<#build>)
</p>
</div>
</body>
</html>
CSS:
#charset "UTF-8";
body {
background-color: white;
font-family: Arial;
font-size: 10pt;
color: black;
text-align: left;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: left bottom;
table-layout: fixed;
}
#content {
margin-top: 5%;
margin-right: 20%;
margin-bottom: 5%;
margin-left: 20%;
width: 800px;
}
h1 {
font-size: 150%;
font-weight: bold;
color: black;
padding-bottom: 1em;
text-align: center;
}
h2 {
font-size: 10pt;
color: black;
font-family: Arial;
text-align: left;
}
a {
color: #000000;
text-decoration: underline;
font-weight: normal;
}
a:visited {
text-decoration: underline;
color: #000000;
}
a:hover {
text-decoration: underline;
color: #000000;
}
a:active {
text-decoration: underline;
color: #000000;
}
h1,h2,h3,h4,h5,h6 {
font-family: Arial;
}
.credits {
font-family: Arial;
font-size: 100%;
text-align: left;
}
h3 {
font-size: 110%;
font-weight: normal;
color: #585858;
letter-spacing: 0.4em;
text-transform: lowercase;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
}
ul {
font-size: 75%;
padding-bottom: 1em;
padding-top: 1em;
margin-left: 10%;
list-style-type: square;
text-transform: lowercase;
}
li {
padding-bottom: 0.5em;
}
h2 {
font-family: Arial;
font-size: 100%;
font-weight: normal;
color: black;
padding-bottom: .2em;
background-color: white;
text-align: left;
padding-top: .2em;
padding-right: 1em;
}
.blockquote {
background-color: #E7E7DE;
margin-right: 22%;
}
caption {
font-size: 100%;
font-style: normal;
padding-top: 0.5em;
padding-bottom: 0.25em;
text-align: center;
}
table {
font-family: Arial;
}
.tableseparator_temp {
font-size: 100%;
font-weight: 400;
background-color: #6699CC;
color: black;
padding: .5em;
text-align: center;
}
.tableseparator_rainfall {
font-size: 100%;
font-weight: 400;
background-color: #6699CC;
color: black;
padding: .5em;
text-align: center;
}
.tableseparator_wind {
font-size: 100%;
font-weight: 400;
background-color: #6699CC;
color: black;
padding: .5em;
text-align: center;
}
.tableseparator_pressure {
font-size: 100%;
font-weight: 400;
background-color: #6699CC;
color: black;
padding: .5em;
text-align: center;
}
td {
font-size: 100%;
padding-top: 0.2em;
padding-bottom: 0.2em;
color: black;
}
.td_thumbnails {
padding-top: 0.1em;
padding-right: 0.2em;
padding-bottom: 0.1em;
padding-left: 0.0em;
}
.td_temperature_data {
background-color: white;
}
.td_rainfall_data {
background-color: white;
}
.td_wind_data {
background-color: white;
}
.td_pressure_data {
background-color: white;
}
.td_navigation_bar {
text-align: center;
padding-top: 1em;
padding-bottom: 1em;
background-color: #ffffff;
}
.labels {
background-position: left;
}
.site_data {
text-align: right;
}
.colon_separator {
font-weight: 400;
background-position: left;
}

Use the depreciated attribute rather than the CSS property and it will work.
td width=""

you may need to have a seperate CSS page and an IF statement at the top of the HTML that evaluates which web browser it is. Then, choose a different style sheet if it is IE 5 or 7
<!--[if IE]>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td colspan="3" class="tableseparator_temp">Temperature/Humidity</td>......
</tbody>
</table>
<![endif]-->
then we add the condition for if not right under that
<!--[if !IE]>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td colspan="3" class="tableseparator_temp">Temperature/Humidity</td>.........
</tbody>
</table
<![endif]-->