My table have too many columns and it overflows the page's 100% width. So I need to add a horizontal scroll bar to table.
But I also need to fix the header for vertical scroll bar when there are too many rows to scroll.
What is the correct way to accomplish it, using CSS and HTML?
First code is a CSS
table .titleFormat{
text-align: center;
width:170px;
font-size:14px;
}
This is HTML code
<div style="width: 400px;height:150px;overflow-x: auto;overflow-y: auto">
<table id="example-basic" style="width: 100%;">
<thead>
<tr class="TitleHeader">
<th width="200px"><div class="titleFormat">A</div></th>
<th width="100px"><div class="titleFormat">B</div></th>
<th width="100px"><div class="titleFormat">C</div></th>
<th width="100px"><div class="titleFormat">D</div></th>
<th width="100px"><div class="titleFormat">E</div></th>
</tr>
</thead>
<tbody>
<tr>
<td style=" text-align: left ">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
</tr>
<tr>
<td style=" text-align: left ">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
</tr>
<tr>
<td style=" text-align: left ">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
</tr>
<tr>
<td style=" text-align: left ">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
</tr>
<tr>
<td style=" text-align: left ">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
</tr>
<tr>
<td style=" text-align: left ">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
</tr>
<tr>
<td style=" text-align: left ">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
</tr>
</tbody>
</table>
</div>
you can use position:Sticky Element on your th and set the table position:relative and that will do the job.
check below:
table .titleFormat {
text-align: center;
width: 170px;
font-size: 14px;
}
#example-basic {
position: relative;
}
#example-basic th {
position: -webkit-sticky;
/* Safari */
position: sticky;
top: 0;
z-index: 100;
background: green;
}
<div style="width: 400px;height:150px;overflow-x: auto;overflow-y: auto">
<table id="example-basic" style="width: 100%;">
<thead>
<tr class="TitleHeader">
<th width="200px">
<div class="titleFormat">A</div>
</th>
<th width="100px">
<div class="titleFormat">B</div>
</th>
<th width="100px">
<div class="titleFormat">C</div>
</th>
<th width="100px">
<div class="titleFormat">D</div>
</th>
<th width="100px">
<div class="titleFormat">E</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td style=" text-align: left ">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
</tr>
<tr>
<td style=" text-align: left ">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
</tr>
<tr>
<td style=" text-align: left ">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
</tr>
<tr>
<td style=" text-align: left ">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
</tr>
<tr>
<td style=" text-align: left ">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
</tr>
<tr>
<td style=" text-align: left ">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
</tr>
<tr>
<td style=" text-align: left ">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
</tr>
</tbody>
</table>
</div>
check this style
I hope you enjoy it
table {
text-align: left;
position: relative;
border-collapse: collapse;
}
th, td {
padding: 0.25rem;
}
tr th {
background: red;
color: white;
}
th {
background: white;
position: sticky;
top: 0; /* Don't forget this, required for the stickiness */
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}
Related
I stuck and basically I do not understand why.
I need to move my <tr> elemnent from right side, directky below other <tr> tags, which are higher.
One requirement: I'm creating mailing template for outlook, so I cannot change display parameters (as I read here), cause it does not work on Outlook client.
I hope that I have made some stupid mistake here which I have not seen yet, or someone will suggest to me some clearer solution.
<table
border="0"
cellpadding="0"
cellspacing="0"
border-collapse="collapse"
width="768"
style="
font-family: 'Roboto', 'Montserrat', sans-serif;
background-color: #fff;
"
>
<tbody>
<tr>
<td style="padding: 20px 0">
<table
border="0"
cellpadding="0"
cellspacing="0"
width="768"
style="font-size: 20px"
>
<tbody>
<tr>
<td width="25"></td>
<td style="padding: 10px 0; color: #b1b1b1">lorem ipsum:</td>
<td align="right" style="padding: 10px 0; color: #31424a">
lorem ipsum
</td>
<td width="25"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="padding-top: 10px"> // display: table or block does not work here
<td width="25px;"></td>
<td
width="100px;"
style="
padding-top: 10px;
vertical-align: top;
border-top: 1px solid #e3e3e3;
"
>
<img
src="https://www.bgastore.ie/cache/48/215x300-Ramar_Galleri1_Blocky_White_100x100_cm.jpg"
alt="photo"
width="100"
height="100"
style="padding-right: 3px"
/>
</td>
<td style="padding: 10px 0 20px 0; border-top: 1px solid #e3e3e3">
<table
border="0"
cellpadding="0"
cellspacing="0"
width="618"
style="font-size: 15px; color: #595b5d"
>
<thead>
<tr style="color: #909090">
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
</tr>
</thead>
<tbody>
<tr>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">
<span style="color: #d2222d; border-bottom: 1px solid#d2222d"
>test</span
>
</td>
</tr>
<tr>
<td colspan="6" style="vertical-align: top; padding-top: 10px">
<span style="color: #909090; font-weight: 700; display: block"
>test</span
>
<span style="color: #d2222d; padding-top: 5px; display: block"
>test</span
>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
And if you just remove the first inner table tags?
<table border="0" cellpadding="0" cellspacing="0" border-collapse="collapse" width="768" style="font-family: 'Roboto', 'Montserrat', sans-serif; background-color: #fff;">
<tbody>
<tr>
<td width="25"></td>
<td style="padding: 10px 0; color: #b1b1b1">lorem ipsum:</td>
<td align="right" style="padding: 10px 0; color: #31424a">
lorem ipsum
</td>
<td width="25"></td>
</tr>
<tr style="padding-top: 10px"> // display: table or block does not work here
<td width="25px;"></td>
<td width="100px;" style="
padding-top: 10px;
vertical-align: top;
border-top: 1px solid #e3e3e3;">
<img src="https://www.bgastore.ie/cache/48/215x300-Ramar_Galleri1_Blocky_White_100x100_cm.jpg" alt="photo" width="100" height="100" style="padding-right: 3px" />
</td>
<td style="padding: 10px 0 20px 0; border-top: 1px solid #e3e3e3">
<table border="0" cellpadding="0" cellspacing="0" width="618" style="font-size: 15px; color: #595b5d">
<thead>
<tr style="color: #909090">
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
</tr>
</thead>
<tbody>
<tr>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">
<span style="color: #d2222d; border-bottom: 1px solid#d2222d">test</span>
</td>
</tr>
<tr>
<td colspan="6" style="vertical-align: top; padding-top: 10px">
<span style="color: #909090; font-weight: 700; display: block">test</span>
<span style="color: #d2222d; padding-top: 5px; display: block">Back</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
By commenting out the below you effectively put them in the same tbody just separate trs. that seems to slide it over as desired.
<table
border="0"
cellpadding="0"
cellspacing="0"
border-collapse="collapse"
width="768"
style="
font-family: 'Roboto', 'Montserrat', sans-serif;
background-color: #fff;
"
>
<tbody>
<tr>
<td style="padding: 20px 0">
<table
border="0"
cellpadding="0"
cellspacing="0"
width="768"
style="font-size: 20px">
<tbody>
<tr>
<td width="25"></td>
<td style="padding: 10px 0; color: #b1b1b1">lorem ipsum:</td>
<td align="right" style="padding: 10px 0; color: #31424a">
lorem ipsum
</td>
<td width="25"></td>
</tr>
<!-- </tbody>
</table>
</td>
</tr> -->
<tr style="padding-top: 10px"> // display: table or block does not work here
<td width="25px;"></td>
<td
width="100px;"
style="
padding-top: 10px;
vertical-align: top;
border-top: 1px solid #e3e3e3;
"
>
<img
src="https://www.bgastore.ie/cache/48/215x300-Ramar_Galleri1_Blocky_White_100x100_cm.jpg"
alt="photo"
width="100"
height="100"
style="padding-right: 3px"
/>
</td>
<td style="padding: 10px 0 20px 0; border-top: 1px solid #e3e3e3">
<table
border="0"
cellpadding="0"
cellspacing="0"
width="618"
style="font-size: 15px; color: #595b5d"
>
<thead>
<tr style="color: #909090">
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
</tr>
</thead>
<tbody>
<tr>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">
<span style="color: #d2222d; border-bottom: 1px solid#d2222d"
>test</span
>
</td>
</tr>
<tr>
<td colspan="6" style="vertical-align: top; padding-top: 10px">
<span style="color: #909090; font-weight: 700; display: block"
>test</span
>
<span style="color: #d2222d; padding-top: 5px; display: block"
>Back</span
>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
I need help regarding this because frankly I have been stuck trying to fix it for a while.
Magento transporter wraps the table in a <div> and the <div> element breaks my table and I cannot find anywhere why.
This is the code. Can anyone help?
<table role="presentation" cellpadding="0" cellspacing="0" width="" style="height: 205px; table-layout: fixed; border: solid 1px #efefef; background-color: #fdfdfd; padding: 15px 12px 19px; margin-bottom:10px !important;" >
<tbody>
<tr>
<td colspan="80%">
<table role="presentation" cellpadding="0" cellspacing="0" style="text-align: center; table-layout: fixed; width: 100%; height: 180px;">
<tbody>
<tr style="width: 100%;">
<td colspan=65% style="">
<div> חולצת בייסיק ניקי</div>
</td>
<td colspan="5%" style="">
<div style="height: 20px; width: 2px; background-color: black; margin: auto;">
</div>
</td>
<td colspan=30% style="">
<div > FOX </div>
</td>
</tr>
<tr>
<td colspan=33% style="">
</td>
<td colspan=33% style="">
<? echo ?> L מידה
</td>
<td colspan="2%" style="">
<div style="height: 20px; width: 2px; background-color: #e6e6e6; margin: auto;">
</div>
</td>
<td colspan=32% style="">
<div class="swatch-option color" option-type="1" option-id="<?=$k['optionId'] ?>" option-label="<?=$k['optionLabel'] ?>"></div>
צבע
</div>
</td>
</tr>
<tr>
<td colspan="65%" style="">
<div style="text-align:right">
M
</div>
</td>
<td colspan="35%"style="">
<div>
:החלפה ל
</div>
</td>
</tr>
<tr>
<td colspan="65%" style="">
<div style="text-align:right">
motiv pentru ca
</div>
</td>
<td colspan="35%"style="">
<div>
:סיבת החלפה
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td colspan="20%" >
<div style="display:block;width:104px; height:145px;text-align: center; font-size: 0; background:url('https://preview.redd.it/dafv3ne6kua21.jpg?width=640&crop=smart&auto=webp&s=7939967e8a33a8e9a18d999467e4f73a9ebb2e20') no-repeat center; background-size: cover; position: relative">
</div>
<div style="
position:absolute;
z-index: 1;
width: 104px;
height: 24px;
opacity: 0.8;
background-color: #000;
color: white;
text-align: center;
line-height: 24px;">
פריט החלפה
</div>
</td>
</tr>
</tbody>
</table>
</div>
<table role="presentation" cellpadding="0" cellspacing="0" width="550" style="height: 205px; table-layout: fixed; border: solid 1px #efefef; background-color: #fdfdfd; padding: 15px 12px 19px;margin-bottom:10px !important" >
<tbody>
<tr>
<td colspan="80%">
<table role="presentation" cellpadding="0" cellspacing="0" style="text-align: center; table-layout: fixed; width: 100%; height: 180px;">
<tbody>
<tr style="width: 100%;">
<td colspan=65% style="">
<div> <? echo $k['name'] ?></div>
</td>
<td colspan="5%" style="">
<div style="height: 20px; width: 2px; background-color: black; margin: auto;">
</div>
</td>
<td colspan=30% style="">
<div > <? echo $k['brand'] ?> </div>
</td>
</tr>
<tr>
<td colspan=33% style="">
<div>
מחיר ₪<? echo (float)$k['price'] ?>
</div>
</td>
<td colspan="2%" style="">
<div style="height: 20px; width: 2px; background-color: #e6e6e6; margin: auto;">
</div>
</td>
<td colspan=33% style="">
<? echo $k['sizeReceived'] ?> מידה
</td>
<td colspan="2%" style="">
<div style="height: 20px; width: 2px; background-color: #e6e6e6; margin: auto;">
</div>
</td>
<td colspan=32% style="">
<div class="swatch-option color" option-type="1" option-id="<?=$k['optionId'] ?>" option-label="<?=$k['optionLabel'] ?>"></div>
צבע
</div>
</td>
</tr>
<tr>
<td colspan="65%" style="">
<div style="text-align:right">
<? echo $k['reason'] ?>
</div>
</td>
<td colspan="35%"style="">
<div>
:סיבת החזרה
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td colspan="20%" >
<div style="display:block;width:104px; height:145px;text-align: center; font-size: 0; background:url('<? echo $k['image'] ?>') no-repeat center; background-size: cover; position: relative">
</div>
<div style="
position:absolute;
z-index: 2;
width: 104px;
height: 24px;
opacity: 0.8;
background-color: #000;
color: white;
text-align: center;
line-height: 24px;">
פריט החזרה
</div>
</td>
</tr>
</tbody>
</table>
There's a lot of issue with the formatting of your code that can cause table breaking. When you fix these, it should look this:
<table role="presentation" cellpadding="0" cellspacing="0" width=""
style="height: 205px; table-layout: fixed; border: solid 1px #efefef; background-color: #fdfdfd; padding: 15px 12px 19px; margin-bottom:10px !important;">
<tbody>
<tr>
<td colspan="80%">
<table role="presentation" cellpadding="0" cellspacing="0"
style="text-align: center; table-layout: fixed; width: 100%; height: 180px;">
<tbody>
<tr style="width: 100%;">
<td colspan="65%" style="">
<div> חולצת בייסיק ניקי</div>
</td>
<td colspan="5%" style="">
<div style="height: 20px; width: 2px; background-color: black; margin: auto;">
</div>
</td>
<td colspan="30%" style="">
<div> FOX</div>
</td>
</tr>
<tr>
<td colspan="33%" style="">
</td>
<td colspan="33%" style="">
L מידה
</td>
<td colspan="2%" style="">
<div style="height: 20px; width: 2px; background-color: #e6e6e6; margin: auto;">
</div>
</td>
<td colspan="32%" style="">
<div class="swatch-option color" option-type="1" option-id="<?php echo $k['optionId'] ?>"
option-label="<?php echo $k['optionLabel'] ?>">
צבע
</div>
</td>
</tr>
<tr>
<td colspan="65%" style="">
<div style="text-align:right">
M
</div>
</td>
<td colspan="35%" style="">
<div>
:החלפה ל
</div>
</td>
</tr>
<tr>
<td colspan="65%" style="">
<div style="text-align:right">
motiv pentru ca
</div>
</td>
<td colspan="35%" style="">
<div>
:סיבת החלפה
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td colspan="20%">
<div style="display:block;width:104px; height:145px;text-align: center; font-size: 0; background:url('https://preview.redd.it/dafv3ne6kua21.jpg?width=640&crop=smart&auto=webp&s=7939967e8a33a8e9a18d999467e4f73a9ebb2e20') no-repeat center; background-size: cover; position: relative">
</div>
<div style="
position:absolute;
z-index: 1;
width: 104px;
height: 24px;
opacity: 0.8;
background-color: #000;
color: white;
text-align: center;
line-height: 24px;">
פריט החלפה
</div>
</td>
</tr>
</tbody>
</table>
<table role="presentation" cellpadding="0" cellspacing="0" width="550"
style="height: 205px; table-layout: fixed; border: solid 1px #efefef; background-color: #fdfdfd; padding: 15px 12px 19px;margin-bottom:10px !important">
<tbody>
<tr>
<td colspan="80%">
<table role="presentation" cellpadding="0" cellspacing="0"
style="text-align: center; table-layout: fixed; width: 100%; height: 180px;">
<tbody>
<tr style="width: 100%;">
<td colspan="65%" style="">
<div> <?php echo $k['name'] ?></div>
</td>
<td colspan="5%" style="">
<div style="height: 20px; width: 2px; background-color: black; margin: auto;">
</div>
</td>
<td colspan="30%" style="">
<div> <?php echo $k['brand'] ?> </div>
</td>
</tr>
<tr>
<td colspan="33%" style="">
<div>
מחיר ₪<?php echo (float)$k['price'] ?>
</div>
</td>
<td colspan="2%" style="">
<div style="height: 20px; width: 2px; background-color: #e6e6e6; margin: auto;">
</div>
</td>
<td colspan="33%" style="">
<?php echo $k['sizeReceived'] ?> מידה
</td>
<td colspan="2%" style="">
<div style="height: 20px; width: 2px; background-color: #e6e6e6; margin: auto;">
</div>
</td>
<td colspan="32%" style="">
<div class="swatch-option color" option-type="1" option-id="<?php echo $k['optionId'] ?>"
option-label="<?php echo $k['optionLabel'] ?>">
צבע
</div>
</td>
</tr>
<tr>
<td colspan="65%" style="">
<div style="text-align:right">
<?php echo $k['reason'] ?>
</div>
</td>
<td colspan="35%" style="">
<div>
:סיבת החזרה
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td colspan="20%">
<div style="display:block;width:104px; height:145px;text-align: center; font-size: 0; background:url('<?php echo $k['image'] ?>') no-repeat center; background-size: cover; position: relative">
</div>
<div style="
position:absolute;
z-index: 2;
width: 104px;
height: 24px;
opacity: 0.8;
background-color: #000;
color: white;
text-align: center;
line-height: 24px;">
פריט החזרה
</div>
</td>
</tr>
</tbody>
</table>
Can you please check this out?
I was trying to list some data, the first table may contain first 10 data of the list remaining will show in the next table. I achieve this by looping the same table. But the table is showing different cell width in each page.
The first page shows table like this,
The second page shows the table like this,
The code i used is
<html>
<head>
<style type="text/css" media="print">
#media print {
html, body {
color: black;
margin: 0 !important;
padding: 0 !important;
width: 100%;
height: 100vh !important;
/* overflow: hidden !important; */
font-size: 15px;
}
#page {
page-break-inside: avoid;
size: A4 landscape;
margin: 10;
}
.footer {
display: table-cell;
vertical-align: bottom;
}
input[type=checkbox], input[type=radio] {
opacity: 1 !important;
}
}
</style>
<style type="text/css">
page {
background: white;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
}
page[size="A4"] {
width: 21cm;
height: 29.7cm;
}
page[size="A4"][layout="landscape"] {
width: 29.7cm;
height: 21cm;
}
.table-wtotbr {
width: 100%;
}
.table-wtbr {
width: 100%;
}
.table-wtotbr th, td {
border-bottom: 1px solid black;
}
.table-wtbr th, td {
border: 1px solid black;
}
.container-table {
color: black;
width: 100%;
height: 100%;
font-size: 11px;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
}
.checkbox {
width:12px;
height:12px;
border: 1px solid #000;
display: inline-block;
}
</style>
</head>
<body>
<%
int rwln = Integer.parseInt(request.getAttribute("rwln").toString());
int cnt = 0;
int cntt = 0;
int listlngth = 9;
int begin = 0;
int mnlpcnt = rwln / 10;
double mlopct = (double) rwln / 10;
%>
<c:set value="<%=cntt%>" var="cntt"></c:set>
<c:set value="<%=cnt%>" var="cnt"></c:set>
<c:set value="<%=mnlpcnt%>" var="mnlpcnt"></c:set>
<c:set value="<%=listlngth%>" var="listlngth"></c:set>
<c:set value="<%=begin%>" var="begin"></c:set>
<!-- getting current date -->
<%
Date dNow = new Date();
SimpleDateFormat ft = new SimpleDateFormat("dd.MM.yyyy");
String cdate = ft.format(dNow);
%>
<!-- /getting current date -->
<jsp:useBean id="today" class="java.util.Date" />
<c:forEach var="kk" begin="0" end="<%=mnlpcnt%>">
<page size="A4" layout="landscape">
<div class="container-table">
<table class="table-wtotbr">
<tr>
<td style="vertical-align: middle; text-align: center;">
<img alt="logo" src="assets/images/logo.png" height="40px">
</td>
<td style="text-align: center; width: 60%; font-size: 20px;">
<b>Comapany</b>
</td>
</tr>
</table>
<table class="table-wtotbr">
<tr height="10px">
<td rowspan="2" style="text-align: center; vertical-align: middle;">Job
Travel Card</td>
<td style="widtd: 10%;">JTC No:<%=request.getAttribute("jtcnum")%></td>
</tr>
<tr height="10px">
<td>Date</td>
</tr>
</table>
<table class="table-wtotbr">
<tr height="10px">
<td style="text-align: left; font-size: 8px;" colspan="2">Project
Number: <%=request.getAttribute("prjnno")%> </td>
<td style="text-align: left; font-size: 8px;" colspan="2">Unit
No. / Tag No.:</td>
</tr>
<tr height="10px">
<td style="text-align: left;" colspan="3">Area Number:</td>
<td style="text-align: left;">Material Class: <%=request.getAttribute("mclass")%></td>
</tr>
<tr height="10px">
<td style="text-align: left;">Drawing No: / ISO Number: <%=request.getAttribute("drwno")%></td>
<td style="text-align: left;" widtd="25%">JC No: <%=request.getAttribute("miv")%></td>
<td style="text-align: left;">Sheet No:</td>
<td style="text-align: left;">Rev. No.:</td>
</tr>
<tr height="10px">
<td style="text-align: left; font-size: 8px;">Item Description:</td>
<td style="text-align: left; font-size: 8px;" colspan="3">ITP
Stage Nos.:</td>
</tr>
</table>
<!-- Fitup data table-sm -->
<table class="table-wtbr">
<tr height="10px">
<td rowspan="12" style="text-align: center; vertical-align: middle;">
<span class="verticaltext"> Fabrication Assembly Fit-Up </span>
</td>
<td style="text-align: center; vertical-align: middle;" rowspan="2">Weld/joint
No</td>
<td colspan="2" style="text-align: center;">Material Spec Grade</td>
<td style="text-align: center; vertical-align: middle;" rowspan="2">Size</td>
<td style="text-align: center; vertical-align: middle;" rowspan="2">Thickness</td>
<td colspan="2" style="text-align: center;">Heat/Plate/TestNo</td>
<td style="text-align: center; vertical-align: middle;" rowspan="2">Welder
No. for tracking</td>
<td colspan="2" style="text-align: center;">Fitup Result</td>
<td style="text-align: center; vertical-align: middle;" rowspan="2">Date</td>
<td style="text-align: center; vertical-align: middle;" rowspan="2" width="5%">Sign</td>
</tr>
<tr height="10px">
<td style="text-align: center; font-size: 8px;" width="10%">Material
1</td>
<td style="text-align: center; font-size: 8px;" width="10%">Material
2</td>
<td style="text-align: center; font-size: 8px;" width="10%">Material
1</td>
<td style="text-align: center; font-size: 8px;" width="10%">Material
2</td>
<td style="text-align: center; font-size: 8px;">Accept</td>
<td style="text-align: center; font-size: 8px;">Reject</td>
</tr>
<c:choose>
<c:when test="${mnlpcnt <1 }">
<c:forEach var="jdata" items="${jtcdata}">
<tr height="10px" style="font-size: 12px;">
<td style="text-align: center;" width="7%">${jdata.getJointno()}</td>
<td style="text-align: center;" width="7%">${jdata.getItem1()}</td>
<td style="text-align: center;" width="7%">${jdata.getItem2()}</td>
<td style="text-align: center;" width="7%">${jdata.getDia()}</td>
<td style="text-align: center;" width="7%">${jdata.getThick()}</td>
<td style="text-align: center;" width="7%"></td>
<td style="text-align: center;" width="7%"></td>
<td style="text-align: center;" width="7%"></td>
<td style="text-align: center;" width="7%"></td>
<td style="text-align: center;" width="7%"></td>
<td style="text-align: center;" width="7%"></td>
<td style="text-align: center;" width="7%"></td>
</tr>
</c:forEach>
</c:when>
<c:when test="${mnlpcnt >= 1 }">
<c:forEach var="qq" begin="${begin}" end="${listlngth}">
<tr height="10px" style="font-size: 12px;">
<td style="text-align: center;">${jtcdata[qq].getJointno()}</td>
<td style="text-align: center;">${jtcdata[qq].getItem1()}</td>
<td style="text-align: center;">${jtcdata[qq].getItem2()}</td>
<td style="text-align: center;">${jtcdata[qq].getDia()}</td>
<td style="text-align: center;">${jtcdata[qq].getThick()}</td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
</tr>
</c:forEach>
</c:when>
</c:choose>
<tr>
<td colspan="5" style="font-size: 10px;">Name & Signature of
fabrication foreman</td>
<td colspan="2" style="font-size: 10px;">Released to</td>
<td colspan="1" style="font-size: 10px;">
<div class="checkbox"></div>
QC/NDE/DIM.</td>
<td colspan="3" style="font-size: 10px;"><div class="checkbox"></div>
Welding</td>
<td colspan="4" style="font-size: 10px;"><div class="checkbox"></div>
Fabrication/Assembly</td>
</tr>
<tr>
<td colspan="7" style="font-size: 10px;">Date</td>
<td colspan="7" style="font-size: 10px;">Date</td>
</tr>
</table>
<!-- welding data -->
<table class="table-wtbr">
<tr heigth="10px">
<td rowspan="13" style="text-align: center; vertical-align: middle;">
<span class="verticaltext"> Welding Details </span>
</td>
<td style="text-align: center; vertical-align: middle;" width="7%"
rowspan="3">Joint No</td>
<td style="text-align: center; vertical-align: middle;" rowspan="3"
width="15%">WPS No.</td>
<td colspan="3" style="text-align: center;">Welding Process</td>
<td colspan="3" style="text-align: center;">Welder/Operation
No.</td>
<td colspan="2" rowspan="2"
style="text-align: center; vertical-align: middle;">Visual
Inspection</td>
<td style="text-align: center; vertical-align: middle;" rowspan="3"
width="5%">Date</td>
<td style="text-align: center; vertical-align: middle;" rowspan="3"
width="5%">Sign</td>
</tr>
<tr heigth="10px">
<td colspan="3" style="text-align: center;">Passes</td>
<td colspan="3" style="text-align: center;">Passes</td>
</tr>
<tr heigth="10px">
<td style="text-align: center; font-size: 8px;" width="10%">Root/Hot</td>
<td style="text-align: center; font-size: 8px;" width="10%">Fill</td>
<td style="text-align: center; font-size: 8px;" width="10%">Cap</td>
<td style="text-align: center; font-size: 8px;" width="10%">Root/Hot</td>
<td style="text-align: center; font-size: 8px;" width="10%">Fill</td>
<td style="text-align: center; font-size: 8px;" width="10%">Cap</td>
<td style="text-align: center; font-size: 8px;" width="4%">Accept</td>
<td style="text-align: center; font-size: 8px;" width="4%">Reject</td>
</tr>
<c:choose>
<c:when test="${mnlpcnt <1 }">
<c:forEach var="jdata" items="${jtcdata}">
<tr height="10px" style="font-size: 12px;">
<td style="text-align: center;">${jdata.getJointno()}</td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
</tr>
</c:forEach>
</c:when>
<c:when test="${mnlpcnt >= 1 }">
<c:forEach var="pp" begin="${begin}" end="${listlngth}">
<tr height="10px" style="font-size: 12px;">
<td style="text-align: center;">${jtcdata[pp].getJointno()}</td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
</tr>
</c:forEach>
</c:when>
</c:choose>
<tr>
<td colspan="4" style="font-size: 10px;">Name & Signature of
fabrication foreman</td>
<td colspan="2" style="font-size: 10px;">Released to</td>
<td colspan="1" style="font-size: 10px;"><div class="checkbox"></div>
QC/NDE/DIM.</td>
<td colspan="2" style="font-size: 10px;"><div class="checkbox"></div>
Welding</td>
<td colspan="5" style="font-size: 10px;"><div class="checkbox"></div>
Fabrication/Assembly</td>
</tr>
<tr>
<td colspan="14" style="font-size: 10px;">Name & Signature of
QC Personel</td>
</tr>
<tr>
<td colspan="7" style="font-size: 10px;">Date</td>
<td colspan="7" style="font-size: 10px;">Date</td>
</tr>
</table>
<div class="footer">
<div style="float: left;">
<!--
<%=request.getAttribute("prjnno")%>-JTC-<%=request.getAttribute("jtcnum")%>-PIP-REV-01
-->
10636-JTC-276-PIP-REV-01
</div>
<div style="float: right;">
<%=cdate%>
</div>
</div>
</div>
</page>
<%
begin = listlngth+1;
listlngth = listlngth+9;
%>
<c:set value="<%=listlngth%>" var="listlngth"></c:set>
<c:set value="<%=begin%>" var="begin"></c:set>
</c:forEach>
</body>
</html>
Can anyone help me to solving this issue.
Thank you in advance.
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>
See my code:
<table id="preview_table">
<thead>
<tr>
<th class="not_mapped_style" style="display: none; text-align: center;">id</th>
<th init_value="Name" style="text-align: center;" class="">
<div class="mapped_col">mapped!</div>
<div class="col_name">DisplayName</div>
<div class="user_def_col">(user defined)</div>
</th>
<th init_value="Email" style="text-align: center;" class="">
<div class="mapped_col">mapped!</div>
<div class="col_name">PrimaryEmail</div>
<div class="user_def_col">(user defined)</div>
</th>
<th init_value="Age" style="text-align: center;" class="">
<div class="mapped_col">mapped!</div>
<div class="col_name">Age</div>
<div class="user_def_col">(user defined)</div>
</th>
</tr>
</thead>
<caption>List</caption>
<tbody>
<tr>
<td style="display: none;" property_value="0" property_name="id" align="center">0</td>
<td class="" property_value="user" property_name="DisplayName" align="center">user</td>
<td class="" property_value="admin#domain.com" property_name="PrimaryEmail" align="center">admin#domain.com</td>
<td class="" property_value="69" property_name="Age" align="center">69</td>
<td class="" property_value="+722616807" property_name="Hand_Phone" align="center">+722616807</td>
</tr>
</tbody>
here is CSS:
#preview_table .user_def_col {
color: gray;
font-size: .8em;
}
#preview_table .mapped_col {
color: green;
font-size: .6em;
float: right;
position: relative;
top: -10px;
}
Currently my mapped! text corrupts centering for column header names. I wonder is that possible to overlay mapped! text over header column name (e.g. Age) while column name remain centered by it cell by width?
You can put "mapped!" into a span and use absolute positioning (parent cell would need to have position:relative)
Please check the following code. I changed the font-size and added color to rows, so that the UI is visible properly..
<table id="preview_table">
<caption>List</caption>
<thead>
<tr>
<th class="not_mapped_style" style="display: none; text-align: center;">id</th>
<th init_value="Name" style="text-align: center;" class="">
<div class="col_name">DisplayName</div>
<div class="user_def_col">(user defined)</div>
<div class="mapped_col">MAPPED!!!!</div>
</th>
<th init_value="Email" style="text-align: center;" class="">
<div class="col_name">PrimaryEmail</div>
<div class="user_def_col">(user defined)</div>
<div class="mapped_col">MAPPED!!!!</div>
</th>
<th init_value="Age" style="text-align: center;" class="">
<div class="col_name">Age</div>
<div class="user_def_col">(user defined)</div>
<div class="mapped_col">MAPPED!!!!</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="display: none;" property_value="0" property_name="id" align="center">0</td>
<td class="" property_value="user" property_name="DisplayName" align="center">user</td>
<td class="" property_value="admin#domain.com" property_name="PrimaryEmail" align="center">admin#domain.com</td>
<td class="" property_value="69" property_name="Age" align="center">69</td>
<td class="" property_value="+722616807" property_name="Hand_Phone" align="center">+722616807</td>
</tr>
</tbody>
</table>
CSS:
#preview_table .user_def_col {
color: gray;
font-size: 15px;
}
#preview_table .mapped_col {
color: green;
font-size: 12px;
position: relative;
margin-top: -20px;
opacity: 0.5;
}
tr
{
border: 1px solid red;
}