A few threads exist on this topic but none of them have worked for me.
I have a HTML table element containing standard rows and columns, and I am trying to introduce subheaders to break up the data. The subheader needs to overlap (overflow into) a few columns to the right of it as it will often be wider than the first data column
Here's the table
.REMOVETHISANDITWILLWORK {
/*display:none;*/
}
.datatable {
outline: none;
font-size: 8pt;
/* stop chrome highlighting table which is focussed to allow key scrolling */
}
.datatable>.scrollingdiv {
overflow-y: scroll;
overflow-x: auto;
}
/* record selectors in first td */
.datatable>.scrollingdiv>table>tbody>tr>td:first-child {
width: 16px;
background-color: #eee;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.datatable table {
table-layout: fixed;
border-collapse: collapse;
overflow: hidden;
white-space: nowrap;
vertical-align: top;
text-align: left;
}
.datatable .scrollingdiv tr {
height: 21px;
vertical-align: middle;
border-bottom: 1px solid #f0f0f0;
border-right: 1px solid #f0f0f0;
}
.datatable .scrollingdiv td {
overflow: hidden;
padding: 1px 0 1px 2px;
border-right: 1px solid #ccc;
min-height: 13px;
}
.datatable .scrollingdiv tr.trh {
border-top: 1px solid #777;
border-bottom: 1px solid #777;
}
.datatable .scrollingdiv .trh td {
border-right: none;
background-color: #f4f7fd;
cursor: default;
}
td.th>div {}
td.th1 {
font-weight: bold;
}
.th2 {
font-weight: bold;
}
<div class="datatable" tabindex="0">
<div class="scrollingdiv" style="height: 797px;">
<table style="width: 1429px;">
<tbody>
<tr class="trh trh1 REMOVETHISANDITWILLWORK">
<td></td>
<td class="th th1" colspan="14">Contracts</td>
</tr>
<tr class="trh trh2 REMOVETHISANDITWILLWORK">
<td></td>
<td class="th th2" colspan="14">Contracts - Hardware Maintenance Contract</td>
</tr>
<tr data-k0="1622" data-k1="1" class="">
<td></td>
<td style="width: 30px;">1622</td>
<td class="assetlink ba" style="width: 240px;">IBM Hardware Maintenance Contract 2018-2019</td>
<td style="width: 60px;">00534211</td>
<td class="editrecord ba" style="width: 130px;">Default Custodian</td>
<td style="width: 120px;">Hardware Maintenance Contract</td>
<td style="width: 150px;"></td>
<td class="assetlink ba" style="width: 120px;"></td>
<td style="width: 150px;"></td>
<td style="width: 100px;">Default Department</td>
<td style="width: 100px;">Default Location</td>
<td style="width: 150px;"></td>
<td style="width: 100px;">Default Cost Centre</td>
<td style="display: none;">Contracts</td>
<td style="display: none;">1</td>
</tr>
<tr class="trh trh2">
<td></td>
<td class="th th2" colspan="14">Contracts - Lease</td>
</tr>
<tr data-k0="1621" data-k1="1" class="">
<td></td>
<td style="width: 30px;">1621</td>
<td class="assetlink ba" style="width: 240px;">Server Lease 2018-2019</td>
<td style="width: 60px;">00534210</td>
<td class="editrecord ba" style="width: 130px;">Default Custodian</td>
<td style="width: 120px;">Lease</td>
<td style="width: 150px;"></td>
<td class="assetlink ba" style="width: 120px;"></td>
<td style="width: 150px;"></td>
<td style="width: 100px;">Default Department</td>
<td style="width: 100px;">Default Location</td>
<td style="width: 150px;"></td>
<td style="width: 100px;">Default Cost Centre</td>
<td style="display: none;">Contracts</td>
<td style="display: none;">1</td>
</tr>
<tr class="trh trh2">
<td></td>
<td class="th th2" colspan="14">Contracts - Software License Agreement</td>
</tr>
<tr data-k0="1307" data-k1="1" class="">
<td></td>
<td style="width: 30px;">1307</td>
<td class="assetlink ba" style="width: 240px;">Corporate SPLA Standard Enrollment 938746</td>
<td style="width: 60px;">00533896</td>
<td class="editrecord ba" style="width: 130px;">Default Custodian</td>
<td style="width: 120px;">Software License Agreement</td>
<td style="width: 150px;">938746</td>
<td class="assetlink ba" style="width: 120px;"></td>
<td style="width: 150px;"></td>
<td style="width: 100px;">Default Department</td>
<td style="width: 100px;">Default Location</td>
<td style="width: 150px;"></td>
<td style="width: 100px;">Default Cost Centre</td>
<td style="display: none;">Contracts</td>
<td style="display: none;">1</td>
</tr>
<tr data-k0="1308" data-k1="1" class="">
<td></td>
<td style="width: 30px;">1308</td>
<td class="assetlink ba" style="width: 240px;">Standard OPEN License Confirmation Number 127543</td>
<td style="width: 60px;">00533897</td>
<td class="editrecord ba" style="width: 130px;">Default Custodian</td>
<td style="width: 120px;">Software License Agreement</td>
<td style="width: 150px;">127543</td>
<td class="assetlink ba" style="width: 120px;"></td>
<td style="width: 150px;"></td>
<td style="width: 100px;">Default Department</td>
<td style="width: 100px;">Default Location</td>
<td style="width: 150px;"></td>
<td style="width: 100px;">Default Cost Centre</td>
<td style="display: none;">Contracts</td>
<td style="display: none;">1</td>
</tr>
</tbody>
</table>
</div>
</div>
In the above the headers display, but its ignored column width and every column has the same width.
When the subheader td's exist the columns in the data lose their width even though its stamped on each TD with a style.
When the subheader td's do not exist or are hidden with display:none (uncomment that bit of css to try it), the columns in the table now size correctly respecting the width specified in style
Its all to do with the formatting of the first row - if we hide the first row, even if subsequent subheaders exist, it works ok. But of course the whole point of headers is you need them at the top.
I've tried giving subheader rows the same number of TD's as the data rows, and the same "width styling", but I then can't get the text to flow out of its TD so it gets chopped. It nearly works with display:inline; on that TD - but that makes the first column in the data rows disappear.
Here's the snippet with the columns how they should be, but the first subheaderrows had to be removed:
.datatable {
outline: none;
font-size: 8pt;
/* stop chrome highlighting table which is focussed to allow key scrolling */
}
.datatable>.scrollingdiv {
overflow-y: scroll;
overflow-x: auto;
}
/* record selectors in first td */
.datatable>.scrollingdiv>table>tbody>tr>td:first-child {
width: 16px;
background-color: #eee;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.datatable table {
table-layout: fixed;
border-collapse: collapse;
overflow: hidden;
white-space: nowrap;
vertical-align: top;
text-align: left;
}
.datatable .scrollingdiv tr {
height: 21px;
vertical-align: middle;
border-bottom: 1px solid #f0f0f0;
border-right: 1px solid #f0f0f0;
}
.datatable .scrollingdiv td {
overflow: hidden;
padding: 1px 0 1px 2px;
border-right: 1px solid #ccc;
min-height: 13px;
}
.datatable .scrollingdiv tr.trh {
border-top: 1px solid #777;
border-bottom: 1px solid #777;
}
.datatable .scrollingdiv .trh td {
border-right: none;
background-color: #f4f7fd;
cursor: default;
}
td.th>div {}
td.th1 {
font-weight: bold;
}
.th2 {
font-weight: bold;
}
<div class="datatable" tabindex="0">
<div class="scrollingdiv" style="height: 797px;">
<table style="width: 1429px;">
<tbody>
<tr data-k0="1622" data-k1="1" class="">
<td></td>
<td style="width: 30px;">1622</td>
<td class="assetlink ba" style="width: 240px;">IBM Hardware Maintenance Contract 2018-2019</td>
<td style="width: 60px;">00534211</td>
<td class="editrecord ba" style="width: 130px;">Default Custodian</td>
<td style="width: 120px;">Hardware Maintenance Contract</td>
<td style="width: 150px;"></td>
<td class="assetlink ba" style="width: 120px;"></td>
<td style="width: 150px;"></td>
<td style="width: 100px;">Default Department</td>
<td style="width: 100px;">Default Location</td>
<td style="width: 150px;"></td>
<td style="width: 100px;">Default Cost Centre</td>
<td style="display: none;">Contracts</td>
<td style="display: none;">1</td>
</tr>
<tr class="trh trh2">
<td></td>
<td class="th th2" colspan="14">Contracts - Lease</td>
</tr>
<tr data-k0="1621" data-k1="1" class="">
<td></td>
<td style="width: 30px;">1621</td>
<td class="assetlink ba" style="width: 240px;">Server Lease 2018-2019</td>
<td style="width: 60px;">00534210</td>
<td class="editrecord ba" style="width: 130px;">Default Custodian</td>
<td style="width: 120px;">Lease</td>
<td style="width: 150px;"></td>
<td class="assetlink ba" style="width: 120px;"></td>
<td style="width: 150px;"></td>
<td style="width: 100px;">Default Department</td>
<td style="width: 100px;">Default Location</td>
<td style="width: 150px;"></td>
<td style="width: 100px;">Default Cost Centre</td>
<td style="display: none;">Contracts</td>
<td style="display: none;">1</td>
</tr>
<tr class="trh trh2">
<td></td>
<td class="th th2" colspan="14">Contracts - Software License Agreement</td>
</tr>
<tr data-k0="1307" data-k1="1" class="">
<td></td>
<td style="width: 30px;">1307</td>
<td class="assetlink ba" style="width: 240px;">Corporate SPLA Standard Enrollment 938746</td>
<td style="width: 60px;">00533896</td>
<td class="editrecord ba" style="width: 130px;">Default Custodian</td>
<td style="width: 120px;">Software License Agreement</td>
<td style="width: 150px;">938746</td>
<td class="assetlink ba" style="width: 120px;"></td>
<td style="width: 150px;"></td>
<td style="width: 100px;">Default Department</td>
<td style="width: 100px;">Default Location</td>
<td style="width: 150px;"></td>
<td style="width: 100px;">Default Cost Centre</td>
<td style="display: none;">Contracts</td>
<td style="display: none;">1</td>
</tr>
<tr data-k0="1308" data-k1="1" class="">
<td></td>
<td style="width: 30px;">1308</td>
<td class="assetlink ba" style="width: 240px;">Standard OPEN License Confirmation Number 127543</td>
<td style="width: 60px;">00533897</td>
<td class="editrecord ba" style="width: 130px;">Default Custodian</td>
<td style="width: 120px;">Software License Agreement</td>
<td style="width: 150px;">127543</td>
<td class="assetlink ba" style="width: 120px;"></td>
<td style="width: 150px;"></td>
<td style="width: 100px;">Default Department</td>
<td style="width: 100px;">Default Location</td>
<td style="width: 150px;"></td>
<td style="width: 100px;">Default Cost Centre</td>
<td style="display: none;">Contracts</td>
<td style="display: none;">1</td>
</tr>
</tbody>
</table>
</div>
</div>
In the above, the columns have the correct width, but we had to remove the first headers to achieve this.
And finally I hope, here's the fiddle with the first subheader row mimicing the data rows - if we can get the text in "This is a long header chopped" to flow out of its TD without messing up the rest of the table, that will do the job.
.datatable {
outline: none;
font-size: 8pt;
/* stop chrome highlighting table which is focussed to allow key scrolling */
}
.datatable>.scrollingdiv {
overflow-y: scroll;
overflow-x: auto;
}
/* record selectors in first td */
.datatable>.scrollingdiv>table>tbody>tr>td:first-child {
width: 16px;
background-color: #eee;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.datatable table {
table-layout: fixed;
border-collapse: collapse;
overflow: hidden;
white-space: nowrap;
vertical-align: top;
text-align: left;
}
.datatable .scrollingdiv tr {
height: 21px;
vertical-align: middle;
border-bottom: 1px solid #f0f0f0;
border-right: 1px solid #f0f0f0;
}
.datatable .scrollingdiv td {
overflow: hidden;
padding: 1px 0 1px 2px;
border-right: 1px solid #ccc;
min-height: 13px;
}
.datatable .scrollingdiv tr.trh {
border-top: 1px solid #777;
border-bottom: 1px solid #777;
}
.datatable .scrollingdiv .trh td {
border-right: none;
background-color: #f4f7fd;
cursor: default;
}
td.th>div {}
td.th1 {
font-weight: bold;
}
.th2 {
font-weight: bold;
}
<div class="datatable" tabindex="0">
<div class="scrollingdiv" style="height: 797px;">
<table style="width: 1429px;">
<tbody>
<tr class="trh trh1 REMOVETHISANDITWILLWORK">
<td></td>
<td class="th1" style="width: 30px;">This is a longer header chopped</td>
<td style="width: 240px;"></td>
<td style="width: 60px;"></td>
<td style="width: 130px;"></td>
<td style="width: 120px;"></td>
<td style="width: 150px;"></td>
<td style="width: 120px;"></td>
<td style="width: 150px;"></td>
<td style="width: 100px;"></td>
<td style="width: 100px;"></td>
<td style="width: 150px;"></td>
<td style="width: 100px;"></td>
<td style="display: none;"></td>
<td style="display: none;"></td>
</tr>
<tr data-k0="1622" data-k1="1" class="">
<td></td>
<td style="width: 30px;">1622</td>
<td class="assetlink ba" style="width: 240px;">IBM Hardware Maintenance Contract 2018-2019</td>
<td style="width: 60px;">00534211</td>
<td class="editrecord ba" style="width: 130px;">Default Custodian</td>
<td style="width: 120px;">Hardware Maintenance Contract</td>
<td style="width: 150px;"></td>
<td class="assetlink ba" style="width: 120px;"></td>
<td style="width: 150px;"></td>
<td style="width: 100px;">Default Department</td>
<td style="width: 100px;">Default Location</td>
<td style="width: 150px;"></td>
<td style="width: 100px;">Default Cost Centre</td>
<td style="display: none;">Contracts</td>
<td style="display: none;">1</td>
</tr>
<tr class="trh trh2">
<td></td>
<td class="th th2" colspan="14">Contracts - Lease</td>
</tr>
<tr data-k0="1621" data-k1="1" class="">
<td></td>
<td style="width: 30px;">1621</td>
<td class="assetlink ba" style="width: 240px;">Server Lease 2018-2019</td>
<td style="width: 60px;">00534210</td>
<td class="editrecord ba" style="width: 130px;">Default Custodian</td>
<td style="width: 120px;">Lease</td>
<td style="width: 150px;"></td>
<td class="assetlink ba" style="width: 120px;"></td>
<td style="width: 150px;"></td>
<td style="width: 100px;">Default Department</td>
<td style="width: 100px;">Default Location</td>
<td style="width: 150px;"></td>
<td style="width: 100px;">Default Cost Centre</td>
<td style="display: none;">Contracts</td>
<td style="display: none;">1</td>
</tr>
<tr class="trh trh2">
<td></td>
<td class="th th2" colspan="14">Contracts - Software License Agreement</td>
</tr>
<tr data-k0="1307" data-k1="1" class="">
<td></td>
<td style="width: 30px;">1307</td>
<td class="assetlink ba" style="width: 240px;">Corporate SPLA Standard Enrollment 938746</td>
<td style="width: 60px;">00533896</td>
<td class="editrecord ba" style="width: 130px;">Default Custodian</td>
<td style="width: 120px;">Software License Agreement</td>
<td style="width: 150px;">938746</td>
<td class="assetlink ba" style="width: 120px;"></td>
<td style="width: 150px;"></td>
<td style="width: 100px;">Default Department</td>
<td style="width: 100px;">Default Location</td>
<td style="width: 150px;"></td>
<td style="width: 100px;">Default Cost Centre</td>
<td style="display: none;">Contracts</td>
<td style="display: none;">1</td>
</tr>
<tr data-k0="1308" data-k1="1" class="">
<td></td>
<td style="width: 30px;">1308</td>
<td class="assetlink ba" style="width: 240px;">Standard OPEN License Confirmation Number 127543</td>
<td style="width: 60px;">00533897</td>
<td class="editrecord ba" style="width: 130px;">Default Custodian</td>
<td style="width: 120px;">Software License Agreement</td>
<td style="width: 150px;">127543</td>
<td class="assetlink ba" style="width: 120px;"></td>
<td style="width: 150px;"></td>
<td style="width: 100px;">Default Department</td>
<td style="width: 100px;">Default Location</td>
<td style="width: 150px;"></td>
<td style="width: 100px;">Default Cost Centre</td>
<td style="display: none;">Contracts</td>
<td style="display: none;">1</td>
</tr>
</tbody>
</table>
</div>
</div>
In the above, the columns have the correct width, and the headers are displaying, but the top header is getting chopped because it can only be as wide as the first TD.
Changing the td to a th will solve the issue.
Change:
<td class="th1" style="width: 30px;">This is a longer header chopped</td>
To:
<th class="th1" style="width: 30px;">This is a longer header chopped</th>
.datatable {
outline: none;
font-size: 8pt;
/* stop chrome highlighting table which is focussed to allow key scrolling */
}
.datatable>.scrollingdiv {
overflow-y: scroll;
overflow-x: auto;
}
/* record selectors in first td */
.datatable>.scrollingdiv>table>tbody>tr>td:first-child {
width: 16px;
background-color: #eee;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.datatable table {
table-layout: fixed;
border-collapse: collapse;
overflow: hidden;
white-space: nowrap;
vertical-align: top;
text-align: left;
}
.datatable .scrollingdiv tr {
height: 21px;
vertical-align: middle;
border-bottom: 1px solid #f0f0f0;
border-right: 1px solid #f0f0f0;
}
.datatable .scrollingdiv td {
overflow: hidden;
padding: 1px 0 1px 2px;
border-right: 1px solid #ccc;
min-height: 13px;
}
.datatable .scrollingdiv tr.trh {
border-top: 1px solid #777;
border-bottom: 1px solid #777;
}
.datatable .scrollingdiv .trh td {
border-right: none;
background-color: #f4f7fd;
cursor: default;
}
td.th>div {}
td.th1 {
font-weight: bold;
}
.th2 {
font-weight: bold;
}
<div class="datatable" tabindex="0">
<div class="scrollingdiv" style="height: 797px;">
<table style="width: 1429px;">
<tbody>
<tr class="trh trh1 REMOVETHISANDITWILLWORK">
<td></td>
<th class="th1" style="width: 30px;">This is header is NO longer chopped</th>
<td style="width: 240px;"></td>
<td style="width: 60px;"></td>
<td style="width: 130px;"></td>
<td style="width: 120px;"></td>
<td style="width: 150px;"></td>
<td style="width: 120px;"></td>
<td style="width: 150px;"></td>
<td style="width: 100px;"></td>
<td style="width: 100px;"></td>
<td style="width: 150px;"></td>
<td style="width: 100px;"></td>
<td style="display: none;"></td>
<td style="display: none;"></td>
</tr>
<tr data-k0="1622" data-k1="1" class="">
<td></td>
<td style="width: 30px;">1622</td>
<td class="assetlink ba" style="width: 240px;">IBM Hardware Maintenance Contract 2018-2019</td>
<td style="width: 60px;">00534211</td>
<td class="editrecord ba" style="width: 130px;">Default Custodian</td>
<td style="width: 120px;">Hardware Maintenance Contract</td>
<td style="width: 150px;"></td>
<td class="assetlink ba" style="width: 120px;"></td>
<td style="width: 150px;"></td>
<td style="width: 100px;">Default Department</td>
<td style="width: 100px;">Default Location</td>
<td style="width: 150px;"></td>
<td style="width: 100px;">Default Cost Centre</td>
<td style="display: none;">Contracts</td>
<td style="display: none;">1</td>
</tr>
<tr class="trh trh2">
<td></td>
<td class="th th2" colspan="14">Contracts - Lease</td>
</tr>
<tr data-k0="1621" data-k1="1" class="">
<td></td>
<td style="width: 30px;">1621</td>
<td class="assetlink ba" style="width: 240px;">Server Lease 2018-2019</td>
<td style="width: 60px;">00534210</td>
<td class="editrecord ba" style="width: 130px;">Default Custodian</td>
<td style="width: 120px;">Lease</td>
<td style="width: 150px;"></td>
<td class="assetlink ba" style="width: 120px;"></td>
<td style="width: 150px;"></td>
<td style="width: 100px;">Default Department</td>
<td style="width: 100px;">Default Location</td>
<td style="width: 150px;"></td>
<td style="width: 100px;">Default Cost Centre</td>
<td style="display: none;">Contracts</td>
<td style="display: none;">1</td>
</tr>
<tr class="trh trh2">
<td></td>
<td class="th th2" colspan="14">Contracts - Software License Agreement</td>
</tr>
<tr data-k0="1307" data-k1="1" class="">
<td></td>
<td style="width: 30px;">1307</td>
<td class="assetlink ba" style="width: 240px;">Corporate SPLA Standard Enrollment 938746</td>
<td style="width: 60px;">00533896</td>
<td class="editrecord ba" style="width: 130px;">Default Custodian</td>
<td style="width: 120px;">Software License Agreement</td>
<td style="width: 150px;">938746</td>
<td class="assetlink ba" style="width: 120px;"></td>
<td style="width: 150px;"></td>
<td style="width: 100px;">Default Department</td>
<td style="width: 100px;">Default Location</td>
<td style="width: 150px;"></td>
<td style="width: 100px;">Default Cost Centre</td>
<td style="display: none;">Contracts</td>
<td style="display: none;">1</td>
</tr>
<tr data-k0="1308" data-k1="1" class="">
<td></td>
<td style="width: 30px;">1308</td>
<td class="assetlink ba" style="width: 240px;">Standard OPEN License Confirmation Number 127543</td>
<td style="width: 60px;">00533897</td>
<td class="editrecord ba" style="width: 130px;">Default Custodian</td>
<td style="width: 120px;">Software License Agreement</td>
<td style="width: 150px;">127543</td>
<td class="assetlink ba" style="width: 120px;"></td>
<td style="width: 150px;"></td>
<td style="width: 100px;">Default Department</td>
<td style="width: 100px;">Default Location</td>
<td style="width: 150px;"></td>
<td style="width: 100px;">Default Cost Centre</td>
<td style="display: none;">Contracts</td>
<td style="display: none;">1</td>
</tr>
</tbody>
</table>
</div>
</div>
Related
I want to change the product page size because it takes alot fo space and make the table in the center
This is the code
what should I do with it.
<div class="detailmodule_html">
<div class="detail-desc-decorate-richtext">
<div class="detailmodule_html">
<div class="detail-desc-decorate-richtext">
<h2 style="text-align: center;"><strong>Product Specification</strong></h2>
<table width="310" height="608">
<tbody>
<tr style="height: 33px;">
<td style="width: 310.047px; height: 33px;">
<p><strong> Materials</strong></p>
</td>
<td style="width: 218.953px; height: 33px;"><strong>Aluminum</strong></td>
</tr>
<tr style="height: 19px;">
<td style="width: 310.047px; height: 19px;"><strong>Battery</strong></td>
<td style="width: 218.953px; height: 19px;"><strong>Lithium battery</strong></td>
</tr>
<tr style="height: 19px;">
<td style="width: 310.047px; height: 19px;"><strong>Size (Closed state)</strong></td>
<td style="width: 218.953px; height: 19px;"><strong>7.66*7.66*3.93 in</strong></td>
</tr>
<tr style="height: 19px;">
<td style="width: 310.047px; height: 19px;"><strong>Size (Expanded state)</strong></td>
<td style="width: 218.953px; height: 19px;"><strong>7.66*7.66*39.3 in</strong></td>
</tr>
<tr style="height: 19px;">
<td style="width: 310.047px; height: 19px;"><strong>Fan Size</strong></td>
<td style="width: 218.953px; height: 19px;"><strong>8.66 in</strong></td>
</tr>
<tr style="height: 19px;">
<td style="width: 310.047px; height: 19px;"><strong>Wind speed gear</strong></td>
<td style="width: 218.953px; height: 19px;"><strong>3+1</strong></td>
</tr>
<tr style="height: 19px;">
<td style="width: 310.047px; height: 19px;"><strong>Control method</strong></td>
<td style="width: 218.953px; height: 19px;"><strong>Button press</strong></td>
</tr>
<tr style="height: 19px;">
<td style="width: 310.047px; height: 19px;"><strong>Air supply principle</strong></td>
<td style="width: 218.953px; height: 19px;"><strong>Air circulation</strong></td>
</tr>
<tr style="height: 134px;">
<td style="width: 310.047px; height: 134px;"><strong>Wind modes</strong></td>
<td style="width: 218.953px; height: 134px;">
<p><strong>1st gear: Soft wind</strong></p>
<p><strong> 2nd gear: Refreshing wind </strong></p>
<p><strong>3rd gear: Strong wind</strong></p>
<p><strong>4th gear: Natural wind</strong></p>
</td>
</tr>
<tr style="height: 33px;">
<td style="width: 310.047px; height: 33px;"><strong>Charger Specifications</strong></td>
<td style="width: 218.953px; height: 33px;">
<p><strong>5V/2A</strong></p>
</td>
</tr>
<tr style="height: 33px;">
<td style="width: 310.047px; height: 33px;"><strong>Charging time</strong></td>
<td style="width: 218.953px; height: 33px;">
<p><strong><5h</strong></p>
</td>
</tr>
<tr style="height: 100px;">
<td style="width: 310.047px; height: 100px;"><strong>Wind speed<br></strong></td>
<td style="width: 218.953px; height: 100px;">
<p><strong>1st gear: 2.3m/s </strong></p>
<p><strong>2nd gear:3.0m/s</strong></p>
<p><strong>3rd gear:4.0m/s</strong></p>
</td>
</tr>
<tr style="height: 33px;">
<td style="width: 310.047px; height: 33px;"><strong>Noise rating<br></strong></td>
<td style="width: 218.953px; height: 33px;">
<p><strong>30-40db</strong></p>
</td>
</tr>
<tr style="height: 4.92188px;">
<td style="width: 310.047px; height: 4.92188px;"><strong>Continuous operating time on a full charge</strong></td>
<td style="width: 218.953px; height: 4.92188px;">
<p><strong>15-5h</strong></p>
</td>
</tr>
</tbody>
</table>
I want to decrease the height
I want to increase the width to be almost full page and in the center.
I am trying to get the section status colors in the webgrid and divide it percentage wise but it is not working for some of the rows
The webgrid cshtml script for section status is written below.
webGrid.Column(header: "Section Status", format: #
<table class="" cellpadding="5" cellspacing="0" style="width: 100%;">
<tbody>
<tr>
<td id="inProgresswd" width="#item.InProgressPC%" title="#item.InProgressPC%"></td>
<td id="respPendingwd" width="#item.ResponsePendingPC%" title="#item.ResponsePendingPC%"></td>
<td id="revPendingwd" width="#item.ReviewPendingPC%" title="#item.ReviewPendingPC%"></td>
<td id="acceptedwd" width="#item.AcceptedPC%" title="#item.AcceptedPC%"></td>
<td id="rejectedwd" width="#item.RejectedPC%" title="#item.RejectedPC%"></td>
<td id="ftReciverwd" width="#item.FwdToRecieverPC%" title="#item.FwdToRecieverPC%"></td>
</tr>
</tbody>
</table>
, style: "SectionStatus"),
The color should be shown in % wise and for zero % the color should not appear in the grid.As shown the image only 4 status color should appear as 4 have percentage values of 25. But 5 colors are showing up for the highlighted row
table-layout: fixed should fix your problem, however sometimes there still is a 1px wide cell if you use the html width attribute instead of css.
table {
table-layout: fixed;
}
tr > td#inProgresswd {
background: #faa;
}
tr > td#respPendingwd {
background: #afa;
}
tr > td#revPendingwd {
background: #aaf;
}
tr > td#acceptedwd {
background: #ffa;
}
tr > td#rejectedwd {
background: #aff;
}
tr > td#ftReciverwd {
background: #faf;
}
<table cellpadding="5" cellspacing="0" style="width: 100%;">
<tbody>
<tr>
<td id="inProgresswd" width="25%" title="25%"></td>
<td id="respPendingwd" width="0%" title="0%"></td>
<td id="revPendingwd" width="0%" title="0%"></td>
<td id="acceptedwd" width="25%" title="25%"></td>
<td id="rejectedwd" width="25%" title="25%"></td>
<td id="ftReciverwd" width="25%" title="25%"></td>
</tr>
</tbody>
</table>
<br />
<table cellpadding="5" cellspacing="0" style="width: 100%;">
<tbody>
<tr>
<td id="inProgresswd" style="width: 25%;" title="25%"></td>
<td id="respPendingwd" style="width: 0%;" title="0%"></td>
<td id="revPendingwd" style="width: 0%;" title="0%"></td>
<td id="acceptedwd" style="width: 25%;" title="25%"></td>
<td id="rejectedwd" style="width: 25%;" title="25%"></td>
<td id="ftReciverwd" style="width: 25%;" title="25%"></td>
</tr>
</tbody>
</table>
I using the code to create header freeze table but the width of both the tables are not matching. Here is the Code
<div id="view_feedback_table">
<table id="crosstable" border =1 cellpadding="6px" style="margin-top: 30px;TEXT-ALIGN: left;float:left;width:1200px;BORDER-COLLAPSE: collapse;">
<thead>
<tr>
<th colspan="9" style="text-align: center;">
<span style="color: #1b4a84;font-size: 14px;font-weight: 900;">Response</span>
</th>
<th style="text-align: right;">
Download
</th>
</tr>
<tr style="color: white; background-color: rgb(31, 73, 125);">
<th style="width: 10%;">Activity Code</th>
<th style="width: 10%;">No of Completed Associates</th>
<th style="width: 10%;">No of Participants Submitted Feedback</th>
<th style="width: 7%;">Instructor</th>
<th style="width: 7%;">Courseware</th>
<th style="width: 7%;">Environment</th>
<th style="width: 8%;">Learner Support</th>
<th style="width: 7%;">Overall</th>
<th style="width: 10%;">Overall Activity Feedback</th>
<th style="width: 8%;">Overall Activity NPS</th>
</tr>
</thead>
</table>
<table id="crosstable" border =1 cellpadding="6px" style="TEXT-ALIGN: left;float:left;width:1200px;BORDER-COLLAPSE: collapse;display: block;max-height: 50px;overflow-y: auto;">
<tbody>
<tr style="color: rgb(31, 73, 125); background-color: white;">
<td style="width: 10%;">
Activity_Code1
</td>
<td style="width: 10%;">No_
<wbr>of_
<wbr>Completed_
<wbr>Associates
</td>
<td style="width: 10%;">No_
<wbr>of_
<wbr>Participants_
<wbr>Submitted_
<wbr>Feedback
</td>
<td style="width: 7%;">Instructor</td>
<td style="width: 7%;">Courseware</td>
<td style="width: 7%;">Environment</td>
<td style="width: 8%;">Learner_
<wbr>Support
</td>
<td style="width: 7%;">Overall</td>
<td style="width: 10%;">Overall_
<wbr>Activity_
<wbr>Feedback
</td>
<td style="width: 8%;">Overall_
<wbr>Activity_
<wbr>NPS
</td>
</tr>
<tr style="color: rgb(31, 73, 125); background-color: rgb(220, 230, 241);">
<td>
Activity_Code2
</td>
<td>No_
<wbr>of_
<wbr>Completed_
<wbr>Associates
</td>
<td>No_
<wbr>of_
<wbr>Participants_
<wbr>Submitted_
<wbr>Feedback
</td>
<td>Instructor</td>
<td>Courseware</td>
<td>Environment</td>
<td>Learner_
<wbr>Support
</td>
<td>Overall</td>
<td>Overall_
<wbr>Activity_
<wbr>Feedback
</td>
<td>Overall_
<wbr>Activity_
<wbr>NPS
</td>
</tr>
<tr style="color: rgb(31, 73, 125); background-color: white;">
<td>
Activity_Code3
</td>
<td>No_
<wbr>of_
<wbr>Completed_
<wbr>Associates
</td>
<td>No_
<wbr>of_
<wbr>Participants_
<wbr>Submitted_
<wbr>Feedback
</td>
<td>Instructor</td>
<td>Courseware</td>
<td>Environment</td>
<td>Learner_
<wbr>Support
</td>
<td>Overall</td>
<td>Overall_
<wbr>Activity_
<wbr>Feedback
</td>
<td>Overall_
<wbr>Activity_
<wbr>NPS
</td>
</tr>
</tbody>
</table>
</div>
Any suggestions to make this correct. I need freeze header effect so can't use the same table to adjust the width.
Thanks it worked but still have some minor alignment issue when the auto scroll comes into the picture. Is there any way to adjust that one too in the code.
<div style="position: fixed;background:#fff;z-index: 999;">
<table id="crosstable" cellpadding="6px" border=1 style="margin-top: 30px;TEXT-ALIGN: left;width:1200px;">
<tbody>
<tr>
<td colspan="9" style="text-align: center;">
<span style="color: #1b4a84;font-size: 14px;font-weight: 900;">L1 Feedback Response</span>
</th>
<td style="text-align: right;">
<a onclick="download excel("default","default","AC")">
<img src="/pentaho-style/1235/images/excel icon.png" title="Download" style="height: 24px;">
</a>
</th>
</tr>
<tr style="color: white;background-color: rgb(31, 73, 125);/* position: fixed; */">
<td style="width: 10%;">Activity Code</th>
<td style="width: 10%;">No of Completed Associates</th>
<td style="width: 10%;">No of Participants Submitted Feedback</th>
<td style="width: 7%;">Instructor</th>
<td style="width: 7%;">Courseware</th>
<td style="width: 7%;">Environment</th>
<td style="width: 8%;">Learner Support</th>
<td style="width: 7%;">Overall</th>
<td style="width: 10%;">Overall Activity Feedback</th>
<td style="width: 8%;">Overall Activity NPS</th>
</tr>
</tbody>
</table>
</div>
<div style="padding-top:125px;">
<table id="crosstable" cellpadding="6px" border=1 style="TEXT-ALIGN: left;max-height: 500px;width:1200px;">
<tbody>
<tr style="color: rgb(31, 73, 125); background-color: white;">
<td style="width: 10%;">
Activity Code2
</td>
<td style="width: 10%;">No_<wbr>of_<wbr>Completed_<wbr>Associates</td>
<td style="width: 10%;">No_<wbr>of_<wbr>Participants_<wbr>Submitted_<wbr>Feedback</td>
<td style="width: 7%;">Instructor</td>
<td style="width: 7%;">Courseware</td>
<td style="width: 7%;">Environment</td>
<td style="width: 8%;">Learner_<wbr>Support</td>
<td style="width: 7%;">Overall</td>
<td style="width: 10%;">Overall_<wbr>Activity_<wbr>Feedback</td>
<td style="width: 8%;">Overall_<wbr>Activity_<wbr>NPS</td>
</tr>
</tbody>
</table>
</div>
<td> content with "underscores" like No_of_Participants_Submitted_Feedback are unbreakable, therefore it would push the width of the columns. So you might want to use space instead of underscores.
If you must have the underscores, add <wbr> after every underscore like this No_<wbr>of_<wbr>Participants_<wbr>Submitted_<wbr>Feedback.
Also note that you missed % in <td style="width: 7;">Environment</td>.
Just by doing this, you would see a huge change in your result, then you can tweak your codes to match perfectly.
please help me with this:
the whole code is given below:
HTML
<div id="user_list">
<table id="grd" style="width: 100%;">
<thead>
<tr>
<td style="width: 15%;">Name</td>
<td style="width: 15%;">Age</td>
<td style="width: 35%;">Address</td>
<td style="width: 35%;">Office Address</td>
</tr>
</thead>
<tbody>
<tr>
<td>Agnib</td>
<td>25</td>
<td>jhjhhsdj</td>
<td>wyeruyweryuwe</td>
<tr>
</tbody>
</table>
</div>
Everything is fine till here. But, once I apply the below css, the width of the columns is getting messed up.
CSS
#grd thead, #grd tbody
{
display: block;
width: 100%;
}
Why the width is getting messed up and its becoming smaller in size. I have attached a sample image. Its happening exactly like the below:
#grd thead, #grd tbody
{
width: 100%;
}
<div id="user_list">
<table id="grd" style="width: 100%;">
<thead>
<tr>
<td style="width: 15%;">Name</td>
<td style="width: 15%;">Age</td>
<td style="width: 35%;">Address</td>
<td style="width: 35%;">Office Address</td>
</tr>
</thead>
<tbody>
<tr>
<td>Agnib</td>
<td>25</td>
<td>jhjhhsdj</td>
<td>wyeruyweryuwe</td>
<tr>
</tbody>
</table>
</div>
or
#grd thead, #grd tbody
{
width: 100%;
}
table
{
border:1px solid gray;
}
table tr td
{
border:1px solid gray;
}
DEMO FIDDLE
DEMO UPDATED
In css file just apply styles to complete table that is "#grd", no need to apply for individual elements like "#grd thead" and "#grd tbody".
Try this code once:
<table id="grd" style="width: 100%;" border=1>
<thead>
<tr><td></td>
<td style="width: 15%">Name</td>
<td style="width: 15%">Age</td>
<td style="width: 35%">Address</td>
<td style="width: 35%">Office Address</td>
</tr>
</thead>
<tbody>
<tr><td></td>
<td style="width: 15%">Agnib</td>
<td style="width: 15%">25</td>
<td style="width: 35%">jhjhhsdj</td>
<td style="width: 35%">wyeruyweryuwe</td>
<tr>
<tr><td></td>
<td style="width: 15%">Agnib</td>
<td style="width: 15%">25</td>
<td style="width: 35%">jhjhhsdj</td>
<td style="width: 35%">wyeruyweryuwe</td>
<tr>
</tbody>
</table>
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]-->