I need to edit product page in shopify - html

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.

Related

HTML tables: merging row cells

I have the following code:
<div style="text-align: center; color: #345; padding-top: 10px;">
<table style="border-collapse: collapse; width: 100%; height: 270px;" border="1">
<tbody>
<tr style="height: 126px;">
<td style="width: 50%; height: 126px;"><strong>abc</strong></td>
<td style="width: 50%; height: 126px;"><strong>abc</strong></td>
</tr>
<tr style="height: 18px;">
<td style="width: 50%; height: 18px;">x</td>
<td style="width: 50%; height: 18px;">y</td>
</tr>
<tr style="height: 108px;">
<td style="width: 50%; height: 108px;"><strong>abc</strong></td>
<td style="width: 50%; height: 108px;"><strong>abc</strong></td>
</tr>
<tr style="height: 18px;">
<td style="width: 50%; height: 18px;">x</td>
<td style="width: 50%; height: 18px;">y</td>
</tr>
</tbody>
</table>
<p> </p>
</div>
which produces the following table:
How can I merge my "x" and "y" cells so that the row they're in consists of only one cell "xy"?
<table style="border-collapse: collapse; width: 100%; height: 270px;" border="1">
<tbody>
<tr style="height: 126px;">
<td style="width: 50%; height: 126px;"><strong>abc</strong></td>
<td style="width: 50%; height: 126px;"><strong>abc</strong></td>
</tr>
<tr style="height: 18px;">
<td style="height: 18px;" colspan="2">xy</td>
</tr>
<tr style="height: 108px;">
<td style="width: 50%; height: 108px;"><strong>abc</strong></td>
<td style="width: 50%; height: 108px;"><strong>abc</strong></td>
</tr>
<tr style="height: 18px;">
<td style="height: 18px;" colspan="2">xy</td>
</tr>
</tbody>
</table>
Colspan is what you seek. Also dunno if someone told you but inline css is bad practice you should use class instead
Here you have the code with class instead of inline css : (same result but prettier)
.bigRow {
height: 126px;
}
.bigRow-2 {
height: 108px;
}
.bigRow td, .bigRow-2 td {
height: 100%;
width: 50%;
}
.smallRow {
height: 18px;
}
<div style="text-align: center; color: #345; padding-top: 10px;">
<table style="border-collapse: collapse; width: 100%; height: 270px;" border="1">
<tbody>
<tr class="bigRow">
<td><strong>abc</strong></td>
<td><strong>abc</strong></td>
</tr>
<tr class="smallRow">
<td colspan="2">xy</td>
</tr>
<tr class="bigRow-2">
<td><strong>abc</strong></td>
<td><strong>abc</strong></td>
</tr>
<tr class="smallRow">
<td colspan="2">xy</td>
</tr>
</tbody>
</table>
<p> </p>
</div>

Allow element to overflow in table with table-layout:fixed

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>

HTMl Table Width issue when added new table below to show effect like freeze pane

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.

Auto adjust html table coulmns according to its content

I want to
1. adjust first column width according to largest length(it will be varying) of td element consisting it.
2. Want to set fixed width for other columns so that its content will be fit into one row (i.e. no wrapping).
Any help will be appreciated.
<head>
<style type="text/css">
table {
table-layout: auto;
border-collapse: collapse;
width: 100%;
}
table td {
border: 2px solid green;
}
.style2
{
height: 23px;
<!--width: 100%;-->
<!-- width: 500px;-->
}
.style3
{
height: 23px;
width: 30px;
<!-- width: 92px;-->
font-size: xx-small;
}
.style4
{
height: 23px;
<!-- width: 109px;-->
font-size: xx-small;
background-color: #CCCCCC;
}
.style5
{
width: 30%;
height: 30px;
}
.style6
{
border-style: solid;
border-width: 1px;
padding: 1px 4px;
}
.style7
{
background-color: #CCCCCC;
}
.style8
{
height: 23px;
<!-- width: 109px;-->
background-color: #999999;
}
.style9
{
background-color: #999999;
}
.style10
{
height: 23px;
<!-- width: 92px; -->
background-color: #999999;
}
.style13
{
height: 23px;
<!-- width: 92px;-->
font-size: xx-small;
background-color: #FFCCFF;
}
.style14
{
font-size: xx-small;
background-color: #CCFF66;
}
.style18
{
font-size: xx-small;
background-color: #CCCCCC;
}
.style19
{
height: 23px;
width: 100%;
<!-- width: 289px;-->
font-size: small;
}.
}
</style>
</head>
<table style="height: 75px;" border="1">
<tbody>
<tr style="height: 23px;">
<td style="height: 23px;" colspan="10"> <strong> AW Build</strong></td>
</tr>
<tr style="height: 23px;">
<th class="style2"> Teams</th>
<td style="height: 23px;" colspan="3" class="style7"> 0512</td>
<td style="height: 23px;" colspan="3" class="style7"> 0511</td>
<td style="height: 23px;" colspan="3" class="style7"> 0512</td>
</tr>
<tr style="height: 23px;">
<td class="style19">AW-Consumer Packaged Good</td>
<td style="height: 23px;" class="style9"> TC1121</td>
<td class="style10">TC1122</td>
<td style="height: 23px;" class="style9">TC113</td>
<td style="height: 23px;" class="style9"> TC1121</td>
<td style="height: 23px;" class="style9"> TC1122</td>
<td style="height: 23px;" class="style9">TC113</td>
<td style="height: 23px;" class="style9">TC1121</td>
<td style="height: 23px;" class="style9">TC1122</td>
<td class="style8">TC113</td>
</tr>
<tr style="height: 23px;">
<td class="style19">AW-User Management</td>
<td style="height: 23px;" class="style12">P-85 NAF-12 FF-3</td>
<td class="style13">P-85 NAF-12 FF-3</td>
<td style="height: 23px;" class="style12">P-85 NAF-12 FF-3</td>
<td style="height: 23px;" class="style18">P-85 NAF-12 FF-3</td>
<td style="height: 23px;" class="style18">P-85 NAF-12 FF-3</td>
<td style="height: 23px;" class="style18">P-85 NAF-12 FF-3</td>
<td style="height: 23px;" class="style18">P-85 NAF-12 FF-3</td>
<td style="height: 23px;" class="style18">P-85 NAF-12 FF-3</td>
<td class="style4">P-85 NAF-12 FF-3</td>
</tr>
<tr style="height: 23px;">
<td class="style19">Active Content Experience</td>
<td style="height: 23px;" class="style14">P-93 NAF-0 FF-7</td>
<td class="style15">P-93 NAF-0 FF-7</td>
<td style="height: 23px;" class="style14">P-93 NAF-0 FF-7</td>
<td style="height: 23px;" class="style18">P-93 NAF-0 FF-7</td>
<td style="height: 23px;" class="style18">P-93 NAF-0 FF-7</td>
<td style="height: 23px;" class="style18">P-85 NAF-0 FF-7</td>
<td style="height: 23px;" class="style18">P-85 NAF-0 FF-7</td>
<td style="height: 23px;" class="style18">P-85 NAF-0 FF-7</td>
<td class="style4">P-85 NAF-0 FF-7</td>
</tr>
<tr style="height: 23px;">
<td class="style19">Audit Subscription and License</td>
<td style="height: 23px;" class="style14">P-93 NAF-0 FF-7</td>
<td class="style15">P-93 NAF-0 FF-7</td>
<td style="height: 23px;" class="style14">P-93 NAF-0 FF-7</td>
<td style="height: 23px;" class="style18">P-93 NAF-0 FF-7</td>
<td style="height: 23px;" class="style18">P-93 NAF-0 FF-7</td>
<td style="height: 23px;" class="style18">P-85 NAF-0 FF-7</td>
<td style="height: 23px;" class="style18">P-85 NAF-0 FF-7</td>
<td style="height: 23px;" class="style18">P-85 NAF-0 FF-7</td>
<td class="style4">P-85 NAF-0 FF-7</td>
</tr>
</tbody>
</table>
<p>
<br />
</p>

How can I get Internet explorer to display this image correctly

I am trying to get internet explorer to display an image in a table cell correctly. The image will display perfectly fine in chrome, but internet explorer keeps inserting white space above the image. Is there anything else that I can add which will prevent internet explorer from incorrectly displaying the image/table cell? I am trying to get the image to fill up the cell without any white space being the sides of it.
Code that I am using:
<p> </p>
<table cellspacing="0" cellpadding="0" style="width: 100%; height: 232px;">
<tbody>
<tr>
<td class="ms-rteTable-default" style="width: 292px;">​​</td>
<td class="ms-rteTable-default" style="width: 33.33%;">​</td>
<td class="ms-rteTable-default" style="width: 33.33%;">​</td>
</tr>
<tr>
<td class="ms-rteTable-default" style="width: 292px; height: 186px;">​<img src="/Test%20Pics%20Library/map_gif.gif" alt="" style="width: 100%; height: 100%; margin-right: auto; margin-left: auto; vertical-align: top;"/> </td>
<td class="ms-rteTable-default" style="width: 33.33%;">​</td>
<td class="ms-rteTable-default" style="width: 33.33%;">​</td>
</tr>
</tbody>
</table>
<p>​</p>
<br/>
<br/>
<br/>
<br/>
Internet explorer view:
Chrome view:
i think you copied this code from somewhere....
there is some special character between <td></td>
if you write the code again space will not come or copy this code
<p> </p>
<table cellspacing="0" cellpadding="0" style="width: 100%; height: 232px;" >
<tbody>
<tr>
<td class="ms-rteTable-default" style="width:292px;"></td>
<td class="ms-rteTable-default" style="width:33.33%;"></td>
<td class="ms-rteTable-default" style="width:33.33%;"></td>
</tr>
<tr><td class="ms-rteTable-default" style="width:292px;height: 186px;"><img src="SVoice_im.jpeg" alt="" style="width: 100%; height: 100%; margin-right: auto; margin-left: auto; vertical-align: top;"></td></td>
<td class="ms-rteTable-default" style="width:33.33%;"></td>
<td class="ms-rteTable-default" style="width:33.33%;"></td>
</tr>
</tbody>
</table>
<p></p>
<br/>
<br/>
<br/>
<br/>
<p> </p>
<table cellspacing="0" cellpadding="0" style="width: 100%; height: 232px;">
<tbody>
<tr>
<td class="ms-rteTable-default" style="width: 292px;">​​</td>
<td class="ms-rteTable-default" style="width: 33.33%;">​</td>
<td class="ms-rteTable-default" style="width: 33.33%;">​</td>
</tr>
<tr>
<td class="ms-rteTable-default" style="width: 292px; height: 186px; vertical-align: top; position: relative;">​<img src="/Test%20Pics%20Library/map_gif.gif" alt="" style="width: 100%; height: 100%; margin-right: auto; margin-left: auto; display: block;"/></td>
<td class="ms-rteTable-default" style="width: 33.33%;">​</td>
<td class="ms-rteTable-default" style="width: 33.33%;">​</td>
</tr>
</tbody>
</table>
<p>​</p>
<br/>
<br/>
<br/>
<br/>
Did you try this?