Auto adjust html table coulmns according to its content - html

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>

Related

I need to edit product page in shopify

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.

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>

Strage 1px white border in table

I'm trying to build this newsletter template using tables and I came across this very weird behavior of the table. Somewhat it has this 1px border around the tr or something.
I'm using a .png image inside the column and I read that this might cause the problem but I couldn't fix it.
<body style="background-color: rgb(209,213,214)">
<p> </p>
<table align="center" cellpadding="1" cellspacing="1" style="background-color:rgb(255, 255, 255);width:650px;">
<tbody>
<tr style="background-color: rgb(209,213,214);">
<td colspan="5" style="padding: 0px; vertical-align: bottom;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508217161.png" style="width: 650px; height: 66px;" /></td>
</tr>
<tr>
<td style="width: 600px;"> <img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508216084.png" style="width: 170px; height: 80px;" /></td>
<td style="width: 30px;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508216108.png" style="width: 25px; height: 25px;" /></td>
<td style="width: 30px;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508216125.png" style="width: 25px; height: 25px;" /></td>
<td style="width: 30px;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508216140.png" style="width: 25px; height: 25px;" /></td>
<td style="width: 50px;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508216152.png" style="width: 25px; height: 25px;" /></td>
</tr>
<tr>
<td colspan="5" style="height: 30px; vertical-align: middle; width: 615px; text-align: center;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508218847.jpg" style="width: 601px; height: 15px;" /></td>
</tr>
<tr>
<td colspan="5" style="vertical-align: top; background-color: rgb(209, 213, 214); padding: 0px;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508217471.png" style="width: 650px; height: 75px;" /></td>
</tr>
<tr>
<td colspan="5" style="height: 30px; vertical-align: top; padding-left: 10px;"><strong><span style="font-size:28px;"><span style="font-family:arial;"> </span><span style="font-family:georgia;"> Cora Trade Center</span></span></strong></td>
</tr>
<tr>
<td colspan="5" style="height: 30px; vertical-align: middle; padding-left: 20px; text-align: center;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508218869.jpg" style="width: 601px; height: 15px;" /></td>
</tr>
<tr 5="" style="background-color: rgb(209,213,214);>
<td colspan=">
</tr>
</tbody>
</table>

If your talking about the 1px white line then set your,
border="0" cellspacing="0" cellpadding="0" of table to 0 .
Then,
<html>
<head>
<title></title>
</head>
<body style="background-color: rgb(209,213,214)">
<p> </p>
<table align="center" border="0" cellspacing="0" cellpadding="0" style="background-color:rgb(255, 255, 255);width:650px;">
<tbody>
<tr style="background-color: rgb(209,213,214);">
<td colspan="5" style="padding: 0px; vertical-align: bottom;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508217161.png" style="width: 650px; height: 66px;" /></td>
</tr>
<tr>
<td style="width: 600px;"> <img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508216084.png" style="width: 170px; height: 80px;" /></td>
<td style="width: 30px;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508216108.png" style="width: 25px; height: 25px;" /></td>
<td style="width: 30px;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508216125.png" style="width: 25px; height: 25px;" /></td>
<td style="width: 30px;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508216140.png" style="width: 25px; height: 25px;" /></td>
<td style="width: 50px;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508216152.png" style="width: 25px; height: 25px;" /></td>
</tr>
<tr>
<td colspan="5" style="height: 30px; vertical-align: middle; width: 615px; text-align: center;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508218847.jpg" style="width: 601px; height: 15px;" /></td>
</tr>
<tr>
<td colspan="5" style="vertical-align: top; background-color: rgb(209, 213, 214); padding: 0px;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508217471.png" style="width: 650px; height: 75px;" /></td>
</tr>
<tr>
<td colspan="5" style="height: 30px; vertical-align: top; padding-left: 10px;"><strong><span style="font-size:28px;"><span style="font-family:arial;"> </span><span style="font-family:georgia;"> Cora Trade Center</span></span></strong></td>
</tr>
<tr>
<td colspan="5" style="height: 30px; vertical-align: middle; padding-left: 20px; text-align: center;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508218869.jpg" style="width: 601px; height: 15px;" /></td>
</tr>
<tr 5="" style="background-color: rgb(209,213,214);>
<td colspan=">
</tr>
</tbody>
</table>
Further, If you want to remove the space between the image then, Set img as block if you want to remove that space as well.
img {
display: block;
}
<html>
<head>
<title></title>
</head>
<body style="background-color: rgb(209,213,214)">
<p> </p>
<table align="center" cellpadding="0" cellspacing="0" style="background-color:rgb(255, 255, 255);width:650px;">
<tbody>
<tr style="background-color: rgb(209,213,214);">
<td colspan="5" style="padding: 0px; vertical-align: bottom;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508217161.png" style="width: 650px; height: 66px;" /></td>
</tr>
<tr>
<td style="width: 600px;"> <img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508216084.png" style="width: 170px; height: 80px;" /></td>
<td style="width: 30px;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508216108.png" style="width: 25px; height: 25px;" /></td>
<td style="width: 30px;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508216125.png" style="width: 25px; height: 25px;" /></td>
<td style="width: 30px;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508216140.png" style="width: 25px; height: 25px;" /></td>
<td style="width: 50px;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508216152.png" style="width: 25px; height: 25px;" /></td>
</tr>
<tr>
<td colspan="5" style="height: 30px; vertical-align: middle; width: 615px; text-align: center;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508218847.jpg" style="width: 601px; height: 15px;" /></td>
</tr>
<tr>
<td colspan="5" style="vertical-align: top; background-color: rgb(209, 213, 214); padding: 0px;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508217471.png" style="width: 650px; height: 75px;" /></td>
</tr>
<tr>
<td colspan="5" style="height: 30px; vertical-align: top; padding-left: 10px;"><strong><span style="font-size:28px;"><span style="font-family:arial;"> </span><span style="font-family:georgia;"> Cora Trade Center</span></span></strong></td>
</tr>
<tr>
<td colspan="5" style="height: 30px; vertical-align: middle; padding-left: 20px; text-align: center;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508218869.jpg" style="width: 601px; height: 15px;" /></td>
</tr>
<tr 5="" style="background-color: rgb(209,213,214);>
<td colspan=">
</tr>
</tbody>
</table>

You need to apply your default html table with border-collapse: collapse;
table{
border-collapse: collapse;
}

my columns not in opposite with using float:right

So i am using aside html5 semantic to make columns.
I wanna have them on the left and right
So i just use class to use float:right to have them in opposite of each other.
but for some odd reason i cannot understnd, its not working in the last one.???
p.s I am new to html or coding in general. don't mind the aesthetics of the codes.
#wrapper{
width: 900px;
height: 800px;
margin-left: auto;
margin-right: auto;
font-family: khand,sans-serif;
font-weight: bold;
}
#socialmedia1 {
background-image: url(tw.png);
background-size: 20px 20px;
width: 20px;
height: 20px;
float: right;
margin:38px 10px 0px 0px;
}
#socialmedia2 {
background-image: url(fb.png);
background-size: 20px 20px;
width: 20px;
height: 20px;
float: right;
margin: 38px 10px 0px 0px;
}
#socialmedia3 {
background-image: url(insta.png);
background-size: 30px 30px;
width: 30px;
height: 30px;
float: right;
margin: 30px 10px 0px 0px;
}
header{
width: 800px;
height: 70px;
border: 3px solid black;
bottom: 20px;
position: relative; /* Had to move this to the bottom
to make space for icons*/
bottom: -40px;
margin-left: auto;
margin-right: auto;
}
hr{
height: 0px;
padding: 0px;
margin: 2px;
}
.logo{
background-image :url(logo.png);
background-size: 140px 140px;
width: 140px;
height:140px;
position:relative;
bottom: 35px;
left: 20px;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #fff;
width: 450px;
margin-left: auto;
margin-right: auto;
position: relative;
bottom: 20px;
}
li a {
display: block;
color: black;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #911111;
}
li {
float: left;
}
aside{
width: 120px; /*logo overlaps gotta use position relative..EDIT Nevermind i could*
just add margin to make space without fucking erthing up*/
height: 150px;
border: 3px solid black;
margin-top: 15px;
margin-bottom: 5px;
}
aside.right{
width: 120px;
height: 150px;
border: 3px solid black;
float: right;
}
.titlebannerbox{
width: 120px;
height: 25px;
background-color: #911111;
position: relative;
bottom: 17px;
color: white;
}
.asidelogo{
width: 27px;
height: 27px;
background-size: 27px 27px;
background-image: url(titlebannerlogo.png);
position: relative;
bottom: 60px;
margin-bottom: -65px;
}
footer {
width: 800px;
height: 70px;
border: 3px solid black;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
}
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<link href='https://fonts.googleapis.com/css?family=Khand:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet"href="style.css">
<style>
</style>
</head>
<body>
<div id="wrapper">
<header>
<div class="logo"></div>
</header>
<nav>
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</nav>
<aside class="right">
<p class="titlebannerbox" align="right">Salary</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:-5px;">
<tr style="line-height: 15px;">
<td style="width: 10%">Ruby</td>
<td style="text-align: right">$109k</td>
</tr>
<tr style="line-height: 15px;">
<td>Object C</td>
<td style="text-align: right">$108k</td>
</tr>
<tr style="line-height: 15px;">
<td>Python</td>
<td style="text-align: right">$100k</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">$94k</td>
</tr>
<tr style="line-height: 15px;">
<td>C++</td>
<td style="text-align: right">$93k</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right;">$91k</td>
</tr>
<tr style="line-height: 15px;">
<td>C</td>
<td style="text-align: right;">$90k</td>
</tr>
</table>
</aside>
<aside>
<p class="titlebannerbox" align="right">Learned</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:-5px;">
<tr style="line-height: 15px;">
<td style="width: 10%">HTML</td>
<td style="text-align: right">60%</td>
</tr>
<tr style="line-height: 15px;">
<td>CSS</td>
<td style="text-align: right">60%</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right">0.001%</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">0%</td>
</tr>
<tr style="line-height: 15px;">
<td>PhP</td>
<td style="text-align: right">0%</td>
</tr>
<tr style="line-height: 15px;">
<td>Ruby</td>
<td style="text-align: right;">0%</td>
</tr>
</table>
</aside>
<aside class="right">
<p class="titlebannerbox" align="right">Salary</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:-5px;">
<tr style="line-height: 15px;">
<td style="width: 10%">Ruby</td>
<td style="text-align: right">$109k</td>
</tr>
<tr style="line-height: 15px;">
<td>Object C</td>
<td style="text-align: right">$108k</td>
</tr>
<tr style="line-height: 15px;">
<td>Python</td>
<td style="text-align: right">$100k</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">$94k</td>
</tr>
<tr style="line-height: 15px;">
<td>C++</td>
<td style="text-align: right">$93k</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right;">$91k</td>
</tr>
<tr style="line-height: 15px;">
<td>C</td>
<td style="text-align: right;">$90k</td>
</tr>
</table>
</aside>
<aside style="color:black">
<p class="titlebannerbox" align="right">Popularity</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:-5;">
<tr style="line-height: 15px;">
<td style="width: 10%">Python</td>
<td style="text-align: right">31.2%</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">19.6%</td>
</tr>
<tr style="line-height: 15px;">
<td>C++</td>
<td style="text-align: right">9.8%</td>
</tr>
<tr style="line-height: 15px;">
<td>C#</td>
<td style="text-align: right">7.4%</td>
</tr>
<tr style="line-height: 15px;">
<td>Ruby</td>
<td style="text-align: right">7.1%</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right;">6.5%</td>
</tr>
<tr style="line-height: 15px;">
<td>C</td>
<td style="text-align: right;">6.1%</td>
</tr>
</table>
</aside>
<aside class="right">
<p class="titlebannerbox" align="right">Salary</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:-5px;">
<tr style="line-height: 15px;">
<td style="width: 10%">Ruby</td>
<td style="text-align: right">$109k</td>
</tr>
<tr style="line-height: 15px;">
<td>Object C</td>
<td style="text-align: right">$108k</td>
</tr>
<tr style="line-height: 15px;">
<td>Python</td>
<td style="text-align: right">$100k</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">$94k</td>
</tr>
<tr style="line-height: 15px;">
<td>C++</td>
<td style="text-align: right">$93k</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right;">$91k</td>
</tr>
<tr style="line-height: 15px;">
<td>C</td>
<td style="text-align: right;">$90k</td>
</tr>
</table>
</aside>
<aside>
<p class="titlebannerbox" align="right">Difficulty</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:0;">
<tr style="line-height: 15px;">
<td style="width: 30%;">C</td>
<td style="text-align: right;vertical-align: sub;">*****</td>
</tr>
<tr style="line-height: 15px;">
<td>C+++</td>
<td style="text-align: right;">*****</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">****</td>
</tr>
<tr style="line-height: 15px;">
<td>C#</td>
<td style="text-align: right;">***</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right">**</td>
</tr>
<tr style="line-height: 15px;">
<td>Python</td>
<td style="text-align:right;">*</td>
</tr>
<tr style="line-height: 15px;">
<td>Ruby</td>
<td style="text-align: right;">*</td>
</tr>
</table>
</aside>
</div> <!-- End of Wrapper-->
</body>
</html>

Replace your :
aside.right{
width: 120px;
height: 150px;
border: 3px solid black;
float: right;
}
with this one :
aside.right{
width: 120px;
height: 150px;
border: 3px solid black;
float: right;
clear:right;
}
PS:
- I added the clear: right; line
- After each float:right, you have to reset the floating element, by using clear: right, so the next element which positioned below will be drawn from the left, just the same as the above elements

Try like this: Demo
Use this
aside.left{
width: 120px;
height: 150px;
border: 3px solid black;
margin-top: 15px;
margin-bottom: 5px;
}
HTML Structure should be like this:
<aside class="left">...</aside>
instead of
aside{
width: 120px;
height: 150px;
border: 3px solid black;
margin-top: 15px;
margin-bottom: 5px;
}
HTML Structure:
<aside>...</aside>

you can shift left and right aside block with this css,
Please use this css-
aside.right { clear: both; }
aside { float: left; }

Remove margin-bottom:15px from aside tag
#wrapper{
width: 900px;
height: 800px;
margin-left: auto;
margin-right: auto;
font-family: khand,sans-serif;
font-weight: bold;
}
#socialmedia1 {
background-image: url(tw.png);
background-size: 20px 20px;
width: 20px;
height: 20px;
float: right;
margin:38px 10px 0px 0px;
}
#socialmedia2 {
background-image: url(fb.png);
background-size: 20px 20px;
width: 20px;
height: 20px;
float: right;
margin: 38px 10px 0px 0px;
}
#socialmedia3 {
background-image: url(insta.png);
background-size: 30px 30px;
width: 30px;
height: 30px;
float: right;
margin: 30px 10px 0px 0px;
}
header{
width: 800px;
height: 70px;
border: 3px solid black;
bottom: 20px;
position: relative; /* Had to move this to the bottom
to make space for icons*/
bottom: -40px;
margin-left: auto;
margin-right: auto;
margin-bottom: 15px;
}
hr{
height: 0px;
padding: 0px;
margin: 2px;
}
.logo{
background-image :url(logo.png);
background-size: 140px 140px;
width: 140px;
height:140px;
position:relative;
bottom: 35px;
left: 20px;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #fff;
width: 450px;
margin-left: auto;
margin-right: auto;
position: relative;
bottom: 20px;
}
li a {
display: block;
color: black;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #911111;
}
li {
float: left;
}
aside{
width: 120px; /*logo overlaps gotta use position relative..EDIT Nevermind i could*
just add margin to make space without fucking erthing up*/
height: 150px;
border: 3px solid black;
/*margin-top: 15px; */
margin-bottom: 15px;
}
aside.right{
width: 120px;
height: 150px;
border: 3px solid black;
float: right;
}
.titlebannerbox{
width: 120px;
height: 25px;
background-color: #911111;
position: relative;
bottom: 17px;
color: white;
}
.asidelogo{
width: 27px;
height: 27px;
background-size: 27px 27px;
background-image: url(titlebannerlogo.png);
position: relative;
bottom: 60px;
margin-bottom: -65px;
}
footer {
width: 800px;
height: 70px;
border: 3px solid black;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
}
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<link href='https://fonts.googleapis.com/css?family=Khand:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet"href="style.css">
<style>
</style>
</head>
<body>
<div id="wrapper">
<header>
<div class="logo"></div>
</header>
<nav>
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</nav>
<aside class="right">
<p class="titlebannerbox" align="right">Salary</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:-5px;">
<tr style="line-height: 15px;">
<td style="width: 10%">Ruby</td>
<td style="text-align: right">$109k</td>
</tr>
<tr style="line-height: 15px;">
<td>Object C</td>
<td style="text-align: right">$108k</td>
</tr>
<tr style="line-height: 15px;">
<td>Python</td>
<td style="text-align: right">$100k</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">$94k</td>
</tr>
<tr style="line-height: 15px;">
<td>C++</td>
<td style="text-align: right">$93k</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right;">$91k</td>
</tr>
<tr style="line-height: 15px;">
<td>C</td>
<td style="text-align: right;">$90k</td>
</tr>
</table>
</aside>
<aside>
<p class="titlebannerbox" align="right">Learned</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:-5px;">
<tr style="line-height: 15px;">
<td style="width: 10%">HTML</td>
<td style="text-align: right">60%</td>
</tr>
<tr style="line-height: 15px;">
<td>CSS</td>
<td style="text-align: right">60%</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right">0.001%</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">0%</td>
</tr>
<tr style="line-height: 15px;">
<td>PhP</td>
<td style="text-align: right">0%</td>
</tr>
<tr style="line-height: 15px;">
<td>Ruby</td>
<td style="text-align: right;">0%</td>
</tr>
</table>
</aside>
<aside class="right">
<p class="titlebannerbox" align="right">Salary</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:-5px;">
<tr style="line-height: 15px;">
<td style="width: 10%">Ruby</td>
<td style="text-align: right">$109k</td>
</tr>
<tr style="line-height: 15px;">
<td>Object C</td>
<td style="text-align: right">$108k</td>
</tr>
<tr style="line-height: 15px;">
<td>Python</td>
<td style="text-align: right">$100k</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">$94k</td>
</tr>
<tr style="line-height: 15px;">
<td>C++</td>
<td style="text-align: right">$93k</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right;">$91k</td>
</tr>
<tr style="line-height: 15px;">
<td>C</td>
<td style="text-align: right;">$90k</td>
</tr>
</table>
</aside>
<aside style="color:black">
<p class="titlebannerbox" align="right">Popularity</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:-5;">
<tr style="line-height: 15px;">
<td style="width: 10%">Python</td>
<td style="text-align: right">31.2%</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">19.6%</td>
</tr>
<tr style="line-height: 15px;">
<td>C++</td>
<td style="text-align: right">9.8%</td>
</tr>
<tr style="line-height: 15px;">
<td>C#</td>
<td style="text-align: right">7.4%</td>
</tr>
<tr style="line-height: 15px;">
<td>Ruby</td>
<td style="text-align: right">7.1%</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right;">6.5%</td>
</tr>
<tr style="line-height: 15px;">
<td>C</td>
<td style="text-align: right;">6.1%</td>
</tr>
</table>
</aside>
<aside class="right">
<p class="titlebannerbox" align="right">Salary</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:-5px;">
<tr style="line-height: 15px;">
<td style="width: 10%">Ruby</td>
<td style="text-align: right">$109k</td>
</tr>
<tr style="line-height: 15px;">
<td>Object C</td>
<td style="text-align: right">$108k</td>
</tr>
<tr style="line-height: 15px;">
<td>Python</td>
<td style="text-align: right">$100k</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">$94k</td>
</tr>
<tr style="line-height: 15px;">
<td>C++</td>
<td style="text-align: right">$93k</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right;">$91k</td>
</tr>
<tr style="line-height: 15px;">
<td>C</td>
<td style="text-align: right;">$90k</td>
</tr>
</table>
</aside>
<aside>
<p class="titlebannerbox" align="right">Difficulty</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:0;">
<tr style="line-height: 15px;">
<td style="width: 30%;">C</td>
<td style="text-align: right;vertical-align: sub;">*****</td>
</tr>
<tr style="line-height: 15px;">
<td>C+++</td>
<td style="text-align: right;">*****</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">****</td>
</tr>
<tr style="line-height: 15px;">
<td>C#</td>
<td style="text-align: right;">***</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right">**</td>
</tr>
<tr style="line-height: 15px;">
<td>Python</td>
<td style="text-align:right;">*</td>
</tr>
<tr style="line-height: 15px;">
<td>Ruby</td>
<td style="text-align: right;">*</td>
</tr>
</table>
</aside>
</div> <!-- End of Wrapper-->
</body>
</html>