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.
Related
I stuck and basically I do not understand why.
I need to move my <tr> elemnent from right side, directky below other <tr> tags, which are higher.
One requirement: I'm creating mailing template for outlook, so I cannot change display parameters (as I read here), cause it does not work on Outlook client.
I hope that I have made some stupid mistake here which I have not seen yet, or someone will suggest to me some clearer solution.
<table
border="0"
cellpadding="0"
cellspacing="0"
border-collapse="collapse"
width="768"
style="
font-family: 'Roboto', 'Montserrat', sans-serif;
background-color: #fff;
"
>
<tbody>
<tr>
<td style="padding: 20px 0">
<table
border="0"
cellpadding="0"
cellspacing="0"
width="768"
style="font-size: 20px"
>
<tbody>
<tr>
<td width="25"></td>
<td style="padding: 10px 0; color: #b1b1b1">lorem ipsum:</td>
<td align="right" style="padding: 10px 0; color: #31424a">
lorem ipsum
</td>
<td width="25"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="padding-top: 10px"> // display: table or block does not work here
<td width="25px;"></td>
<td
width="100px;"
style="
padding-top: 10px;
vertical-align: top;
border-top: 1px solid #e3e3e3;
"
>
<img
src="https://www.bgastore.ie/cache/48/215x300-Ramar_Galleri1_Blocky_White_100x100_cm.jpg"
alt="photo"
width="100"
height="100"
style="padding-right: 3px"
/>
</td>
<td style="padding: 10px 0 20px 0; border-top: 1px solid #e3e3e3">
<table
border="0"
cellpadding="0"
cellspacing="0"
width="618"
style="font-size: 15px; color: #595b5d"
>
<thead>
<tr style="color: #909090">
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
</tr>
</thead>
<tbody>
<tr>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">
<span style="color: #d2222d; border-bottom: 1px solid#d2222d"
>test</span
>
</td>
</tr>
<tr>
<td colspan="6" style="vertical-align: top; padding-top: 10px">
<span style="color: #909090; font-weight: 700; display: block"
>test</span
>
<span style="color: #d2222d; padding-top: 5px; display: block"
>test</span
>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
And if you just remove the first inner table tags?
<table border="0" cellpadding="0" cellspacing="0" border-collapse="collapse" width="768" style="font-family: 'Roboto', 'Montserrat', sans-serif; background-color: #fff;">
<tbody>
<tr>
<td width="25"></td>
<td style="padding: 10px 0; color: #b1b1b1">lorem ipsum:</td>
<td align="right" style="padding: 10px 0; color: #31424a">
lorem ipsum
</td>
<td width="25"></td>
</tr>
<tr style="padding-top: 10px"> // display: table or block does not work here
<td width="25px;"></td>
<td width="100px;" style="
padding-top: 10px;
vertical-align: top;
border-top: 1px solid #e3e3e3;">
<img src="https://www.bgastore.ie/cache/48/215x300-Ramar_Galleri1_Blocky_White_100x100_cm.jpg" alt="photo" width="100" height="100" style="padding-right: 3px" />
</td>
<td style="padding: 10px 0 20px 0; border-top: 1px solid #e3e3e3">
<table border="0" cellpadding="0" cellspacing="0" width="618" style="font-size: 15px; color: #595b5d">
<thead>
<tr style="color: #909090">
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
</tr>
</thead>
<tbody>
<tr>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">
<span style="color: #d2222d; border-bottom: 1px solid#d2222d">test</span>
</td>
</tr>
<tr>
<td colspan="6" style="vertical-align: top; padding-top: 10px">
<span style="color: #909090; font-weight: 700; display: block">test</span>
<span style="color: #d2222d; padding-top: 5px; display: block">Back</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
By commenting out the below you effectively put them in the same tbody just separate trs. that seems to slide it over as desired.
<table
border="0"
cellpadding="0"
cellspacing="0"
border-collapse="collapse"
width="768"
style="
font-family: 'Roboto', 'Montserrat', sans-serif;
background-color: #fff;
"
>
<tbody>
<tr>
<td style="padding: 20px 0">
<table
border="0"
cellpadding="0"
cellspacing="0"
width="768"
style="font-size: 20px">
<tbody>
<tr>
<td width="25"></td>
<td style="padding: 10px 0; color: #b1b1b1">lorem ipsum:</td>
<td align="right" style="padding: 10px 0; color: #31424a">
lorem ipsum
</td>
<td width="25"></td>
</tr>
<!-- </tbody>
</table>
</td>
</tr> -->
<tr style="padding-top: 10px"> // display: table or block does not work here
<td width="25px;"></td>
<td
width="100px;"
style="
padding-top: 10px;
vertical-align: top;
border-top: 1px solid #e3e3e3;
"
>
<img
src="https://www.bgastore.ie/cache/48/215x300-Ramar_Galleri1_Blocky_White_100x100_cm.jpg"
alt="photo"
width="100"
height="100"
style="padding-right: 3px"
/>
</td>
<td style="padding: 10px 0 20px 0; border-top: 1px solid #e3e3e3">
<table
border="0"
cellpadding="0"
cellspacing="0"
width="618"
style="font-size: 15px; color: #595b5d"
>
<thead>
<tr style="color: #909090">
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
</tr>
</thead>
<tbody>
<tr>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">
<span style="color: #d2222d; border-bottom: 1px solid#d2222d"
>test</span
>
</td>
</tr>
<tr>
<td colspan="6" style="vertical-align: top; padding-top: 10px">
<span style="color: #909090; font-weight: 700; display: block"
>test</span
>
<span style="color: #d2222d; padding-top: 5px; display: block"
>Back</span
>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
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);
}
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>
enter image description here
Had to remove all our copy in order to post publicly, sorry if it makes it hard to see. The border for the rightmost column "Pro" shows up in Firefor, Chrome, and Safari but not in Edge or IE. Anybody run into this before?
section class="line">
<div class="box margin-bottom">
<div class="margin-top-25">
<h1></h1>
</div>
<div class="line margin-top-25">
<div class="margin">
<div class="s-12">
<center>
<table class="table2" style="">
<tr>
<td width="40%"> </td>
<td width="15%"> </td>
<td width="15%"><span class="button" style="background-color: #d2d2d2; color:#000000"><strong></strong></span></td>
<td width="15%"> </td>
<td width="15%"> </td>
</tr>
<tr>
<td class="td2"> </td>
<td class="td2">
<a href="basic_gif1.html" class="tooltip button" style="color: white; background-color: #58595B">
<span class="tooltiptext">Click here to learn more about the Basic Package</span>
<strong>Basic</strong>
</a>
</td>
<td class="td2">
<a href="plus_gif1.html" class="tooltip button" style="color: white; background-color: #b8282e">
<span class="tooltiptext">Click here to learn more about the Plus Package</span>
<strong>Plus</strong>
</a>
</td>
<td class="td2">
<a href="pro_gif1.html" class="tooltip button" style="color: white; background-color: #dc8419">
<span class="tooltiptext">Click here to learn more about the Pro Package</span>
<strong>Pro</strong>
</a>
</td>
</tr>
<tr class="tr2">
<td class="td2" style="text-align: left; font-size: 20px;">
<p></p>
</td>
<td class="td2 tdbl" style="color: #58595B; font-size: 24px;"><strong>•</strong></td>
<td class="td2 tdbl" style="color: #b8282e; font-size: 24px;"><strong>•</strong></td>
<td class="td2 tdbl" style="color: #dc8419; font-size: 24px;"><strong>•</strong></td>
</tr>
<tr class="tr2">
<td class="td2" style="text-align: left; font-size: 20px;">
<p></p>
<p></p>
</td>
<td class="td2 tdbl" style="color: #58595B; font-size: 24px;"><img src="img/newjersey.png" /></td>
<td class="td2 tdbl" style="color: #b8282e; font-size: 24px;"><img src="img/newjersey.png" /></td>
<td class="td2 tdbl" style="font-size: 24px;">
<img src="img/newjersey.png" />
<p>+</p>
<p style="font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', serif"><strong>WSJ</strong> or <strong>Forbes</strong></p>
</td>
</tr>
<tr class="tr2">
<td class="td2" style="text-align: left; font-size: 20px;">
<p></p>
</td>
<td class="td2 tdbl"> </td>
<td class="td2 tdbl">Choose 1</td>
<td class="td2 tdbl">Choose 2</td>
</tr>
<tr class="tr2">
<td class="td2" style="text-align: left; font-size: 20px;">
<p></p>
</td>
<td class="td2 tdbl" style="color: #58595B;"><strong></strong></td>
<td class="td2 tdbl" style="color: #58595B;"><strong></strong></td>
<td class="td2 tdbl" style="color: #58595B;"><strong></strong></td>
<tr class="tr2">
<td class="td2" style="text-align: left; font-size: 20px;">
<p></p>
</td>
<td class="td2 tdbl" style="color: #58595B; font-size: 24px;"><strong>•</strong></td>
<td class="td2 tdbl" style="color: #b8282e; font-size: 24px;"><strong>•</strong></td>
<td class="td2 tdbl" style="color: #dc8419; font-size: 24px;"><strong>•</strong></td>
</tr>
</tr>
<tr class="tr2">
<td class="td2" style="text-align: left; font-size: 20px;">
<p></p>
</td>
<td class="td2 tdbl" style="color: #58595B;"><strong>$349</strong></td>
<td class="td2 tdbl" style="color: #58595B;"><strong>$549</strong></td>
<td class="td2 tdbl" style="color: #58595B;"><strong>$979</strong></td>
</tr>
<tr>
<td colspan="4" class="td2" style="background-color: #f5f5f5;font-size: 20px;"><strong></strong></td>
</tr>
<tr>
<td colspan="4" class="td2" style="text-align: left; font-size: 20px;"><strong></strong></td>
</tr>
<tr>
<td colspan="4" class="td2" style="text-align: left;font-size: 20px;"><strong></strong></td>
</tr>
</table>
</center>
</div>
</div>
</div>
<div class="line margin-top-25" style="background-color: #b8282e;"> </div>
<div class="margin-top-25">
<h1 id="tools"></h1>
<p></p>
</div>
<div class="line margin-top-25">
<div class="margin">
<div class="s-12">
<div class="tabs">
<div class="tab-item tab-active">
<a class="tab-label active-btn" name="" style=" width: 33.33333333%;"></a>
<div class="tab-content">
<div class="box" style="text-align: left">
<center>
<table class="table2" style="width: 60%;">
<tr class="tr2">
<td class="td2"> </td>
<td class="td2" colspan="6"><strong>Quantity</strong></td>
</tr>
<tr class="tr2">
<td class="td2"><strong>Product</strong></td>
<td class="td2"><strong>100</strong></td>
<td class="td2"><strong>250</strong></td>
<td class="td2"><strong>500</strong></td>
<td class="td2"><strong>1,000</strong></td>
<td class="td2"><strong>2,000</strong></td>
<td class="td2"><strong>3,000</strong></td>
</tr>
<tr class="tr2">
<td class="td2"></td>
<td class="td2" style="font-size: 12px;">$</td>
<td class="td2" style="font-size: 12px;">$</td>
<td class="td2" style="font-size: 12px;">$</td>
<td class="td2" style="font-size: 12px;">$</td>
<td class="td2" style="font-size: 12px;">$</td>
<td class="td2" style="font-size: 12px;">$</td>
</tr>
<tr class="tr2">
<td class="td2">Brochures</td>
<td class="td2" style="font-size: 12px;">$</td>
<td class="td2" style="font-size: 12px;">$</td>
<td class="td2" style="font-size: 12px;">$</td>
<td class="td2" style="font-size: 12px;">$</td>
<td class="td2" style="font-size: 12px;">$</td>
<td class="td2" style="font-size: 12px;">$</td>
</tr>
<tr class="tr2">
<td class="td2"></td>
<td class="td2" style="font-size: 12px;">$200</td>
<td class="td2" style="font-size: 12px;">$245</td>
<td class="td2" style="font-size: 12px;">$325</td>
<td class="td2" style="font-size: 12px;">$525</td>
<td class="td2" style="font-size: 12px;">$825</td>
<td class="td2" style="font-size: 12px;">$925</td>
</tr>
<tr class="tr2">
<td class="td2" colspan="7" style="font-size: 12px;"></td>
</tr>
</table>
For the life of me I can't see what's off here. Admittedly I'm pretty new to HTML, but through checking W3 and other online resources I haven't been able to nail down what would be causing this to render incorrectly in IE/Edge
You can use CSS
table {border-collapse: collapse;}
.table2 td {border: 1px solid black;}
See codepen: https://codepen.io/anon/pen/VGRgyJ
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]-->