I am trying to align two <div> tags i the same and I have trying it with inline-block but the elements are not showing up on the same line. Below screenshot shows how it looks like. I am using DataTables so I have a top class.
html
<div class="countFieldCell">
<c:if test="${fn:length(intgList) > 0}">Total: ${fn:length(intgList)}</c:if>
<c:if test="${fn:length(intgList) == 0}">No Data found..</c:if>
</div>
<div class="outerCountSection">
<table id="esignTable" style="width:100%;table-layout:fixed">
<thead>
<tr>
<th align="center" class="fieldLabelCell">Line of Business</th>
<th align="center" width="14%" class="fieldLabelCell">Insured</th>
<th align="center" width="15%" class="fieldLabelCell">Customer<br>Phone</th>
<th align="center" width="16%" class="fieldLabelCell">Policy #</th>
<th align="center" width="19%" class="fieldLabelCell">E-Sign<br>Created Date</th>
<th align="center" class="fieldLabelCell">Customer<br>Email</th>
<th align="center" class="fieldLabelCell" style="text-align: left"># of E-Sign Documents</th>
</tr>
</thead>
<tbody>
CSS
.dataFieldCell {
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
vertical-align: top;
height: 25px;
padding-left: 0px;
}
.top {
display: block;
margin: 0 auto;
margin-right: 31%;
}
.outerCountSection {
background: #EAEAEA;
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
height: 15%;
padding-top: 0.25%;
padding-bottom: 0.15%;
}
You should try <span> (display: inline) it will do the job!
Use the css width property with float attribute. Use padding-top to maintain it on same row.
.countFieldCell{
width:10%;
float:right;
text-align:right;
padding-top:10px;
}
.outerCountSection{
width:90%;
}
<div class="countFieldCell">
<c:if test="${fn:length(intgList) > 0}">Total: 1</c:if>
</div>
<div class="outerCountSection">
<table id="esignTable" style="width:100%;table-layout:fixed">
<thead>
<tr>
<th align="center" class="fieldLabelCell">Line of Business</th>
<th align="center" width="14%" class="fieldLabelCell">Insured</th>
<th align="center" width="15%" class="fieldLabelCell">Customer<br>Phone</th>
<th align="center" width="16%" class="fieldLabelCell">Policy #</th>
<th align="center" width="19%" class="fieldLabelCell">E-Sign<br>Created Date</th>
<th align="center" class="fieldLabelCell">Customer<br>Email</th>
<th align="center" class="fieldLabelCell" style="text-align: left"># of E-Sign Documents</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
.countFieldCell{
float: right;
}
Related
I need to create a print preview of a receipt with a custom layout and ultimately print it. But my issue is; when I view it in my print preview, it is rendered differently from the layout I have created prior to clicking the 'Print Preview' button. In the sections where I used a table element, in my layout, I get the layout that I want, but in the print preview, the table shrinks. Please see my html codes below:
<div id="print-section" *ngIf="propertyLedger">
<h2>SPMIS</h2>
<hr>
<table class="table borderless">
<tr>
<th class="col-md-2">Transaction Date</th>
<td>{{dateToday | date}}</td>
</tr>
<tr>
<th class="col-md-2" style="text-align: left;">Collecting Agent</th>
<td>{{propertyLedger.CollectinAgentName}}</td>
</tr>
<tr>
<th class="col-md-2" style="text-align: left;">Unit Name</th>
<td>{{propertyLedger.UnitName}}</td>
</tr>
<tr>
<th class="col-md-2" style="text-align: left;">Payment Type</th>
<td>{{propertyLedger.PaymentType}}</td>
</tr>
<tr>
<th class="col-md-2" style="text-align: left;">O.R. Number</th>
<td>{{propertyLedger.ORNumber}}</td>
</tr>
<tr>
<th class="col=md-2" style="text-align: left;">Amount</th>
<td>{{ sumPayment() | currency: 'PHP ' }}</td>
</tr>
<tr>
<th class="col-md-2" style="text-align: left;">Remarks</th>
<td>{{propertyLedger.Remarks}}</td>
</tr>
</table>
<hr>
<h3>Details</h3>
<table class="table borderless" *ngIf="PropertyLedgerDetails">
<thead>
<tr>
<th class="col-md-2" style="text-align: left;">Transaction Type</th>
<th class="col-md-2" style="text-align: left;">Amount</th>
<th class="col-md-2" style="text-align: left;">Month</th>
<th class="col-md-2" style="text-align: left;">Year</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let pd of PropertyLedgerDetails">
<td>{{pd.TransactionType}}</td>
<td>{{pd.Amount | currency: 'PHP '}}</td>
<td>{{pd.Month}}</td>
<td>{{pd.Year}}</td>
</tr>
</tbody>
</table>
<hr>
</div>
<br>
<button mat-raised-button color="default" class="btn pull-right" (click)="print()">Print</button>
before print preview
As soon as I click the Print Preview button (Print) this is what I get:
Can you please show me how to this right? Thank you so much for your help.
EDIT
I created a css like this
#media screen, print {
table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
border: 3px solid purple;
}
thead th:nth-child(1) {
width: 50%;
}
thead th:nth-child(2) {
width: 20%;
}
thead th:nth-child(3) {
width: 15%;
}
thead th:nth-child(4) {
width: 15%;
}
th, td {
padding: 20px;
}
}
I have to add this style in the part where I need to print the html.
Can you provide more details as to what is not the same? As per the running example bellow when you click on the print and the print preview shows ... they look pretty close to me.
#media screen,
print {
table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
border: 3px solid purple;
}
thead th:nth-child(1) {
width: 50%;
}
thead th:nth-child(2) {
width: 20%;
}
thead th:nth-child(3) {
width: 15%;
}
thead th:nth-child(4) {
width: 15%;
}
th,
td {
padding: 20px;
}
}
<div id="print-section" *ngIf="propertyLedger">
<h2>SPMIS</h2>
<hr>
<table class="table borderless">
<tr>
<th class="col-md-2" style="text-align: left;">Transaction Date</th>
<td>{{dateToday | date}}</td>
</tr>
<tr>
<th class="col-md-2" style="text-align: left;">Collecting Agent</th>
<td>{{propertyLedger.CollectinAgentName}}</td>
</tr>
<tr>
<th class="col-md-2" style="text-align: left;">Unit Name</th>
<td>{{propertyLedger.UnitName}}</td>
</tr>
<tr>
<th class="col-md-2" style="text-align: left;">Payment Type</th>
<td>{{propertyLedger.PaymentType}}</td>
</tr>
<tr>
<th class="col-md-2" style="text-align: left;">O.R. Number</th>
<td>{{propertyLedger.ORNumber}}</td>
</tr>
<tr>
<th class="col=md-2" style="text-align: left;">Amount</th>
<td>{{ sumPayment() | currency: 'PHP ' }}</td>
</tr>
<tr>
<th class="col-md-2" style="text-align: left;">Remarks</th>
<td>{{propertyLedger.Remarks}}</td>
</tr>
</table>
<hr>
<h3>Details</h3>
<table class="table borderless" *ngIf="PropertyLedgerDetails">
<thead>
<tr>
<th class="col-md-2" style="text-align: left;">Transaction Type</th>
<th class="col-md-2" style="text-align: left;">Amount</th>
<th class="col-md-2" style="text-align: left;">Month</th>
<th class="col-md-2" style="text-align: left;">Year</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let pd of PropertyLedgerDetails">
<td>{{pd.TransactionType}}</td>
<td>{{pd.Amount | currency: 'PHP '}}</td>
<td>{{pd.Month}}</td>
<td>{{pd.Year}}</td>
</tr>
</tbody>
</table>
<hr>
</div>
<br>
<button mat-raised-button color="default" class="btn pull-right" onclick="window.print()">Print</button>
I have a simple bootstrap table that I am trying to have vertically scroll automatically. The reason for this, is that the table will be displayed on a screen and the table could have 10 items in it or 100. So I would like it to auto scroll vertically so the user does not have to do it manually. After it reaches the end, it will just reset and start back from the top...
This is my markup thus far:
<div class="table-responsive" style="height: 700px; overflow: auto;">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th style="text-align: left; font-size: 23px;">#</th>
<th style="text-align: left; font-size: 23px;">Name</th>
<th style="text-align: left; font-size: 23px;">Description</th>
<th style="text-align: left; font-size: 23px;">Date</th>
</tr>
</thead>
<tbody>
<tr class="danger">
<td style="text-align: left; font-size: 16px;">1213</td>
<td style="text-align: left; font-size: 16px;">John Doe</td>
<td style="text-align: left; font-size: 16px;">my short description</td>
<td style="text-align: left; font-size: 16px;">Today's Date</td>
</tr>
</tbody>
</table>
</div>
NOTE: I am hoping this can be achieved with only HTML and CSS.
Any suggestions?
JS (or jQuery) is needed to get the actual element height and scrollHeight and perform the animation on those values
var $el = $(".table-responsive");
function anim() {
var st = $el.scrollTop();
var sb = $el.prop("scrollHeight")-$el.innerHeight();
$el.animate({scrollTop: st<sb/2 ? sb : 0}, 4000, anim);
}
function stop(){
$el.stop();
}
anim();
$el.hover(stop, anim);
.table-responsive{
height:180px; width:50%;
overflow-y: auto;
border:2px solid #444;
}.table-responsive:hover{border-color:red;}
table{width:100%;}
td{padding:24px; background:#eee;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr><th>#</th></tr>
</thead>
<tbody>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr><td>7</td></tr>
<tr><td>8</td></tr>
<tr><td>9</td></tr>
<tr><td>10</td></tr>
</tbody>
</table>
</div>
I highly recommend using using javascript for this. I tried this using CSS only once and then promptly abandoned the idea, but it is theoretically possible. The following demo is not tested on all browsers, has huge compatibility issues, and was the jankiest thing ever on Safari. Moral of the story: use javascript.
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css);
.table-responsive {
overflow-x: hidden;
}
table.table {
animation: ani linear 1s alternate infinite;
}
.table-responsive:hover {
overflow: auto;
}
.table-responsive:hover table.table {
animation: none ;
}
#keyframes ani {
0% { margin-left: 0; transform: translate3d(0%, 0, 0);}
25% { margin-left: 0; transform: translate3d(0%, 0, 0);}
75% { margin-left: 100%; transform: translate3d(-100%, 0, 0);}
100% { margin-left: 100%; transform: translate3d(-100%, 0, 0);}
}
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th style="text-align: left; font-size: 23px;">#</th>
<th style="text-align: left; font-size: 23px;">Name</th>
<th style="text-align: left; font-size: 23px;">Description</th>
<th style="text-align: left; font-size: 23px;">Date</th>
<th style="text-align: left; font-size: 23px;">Date</th>
<th style="text-align: left; font-size: 23px;">Date</th>
<th style="text-align: left; font-size: 23px;">Date</th>
<th style="text-align: left; font-size: 23px;">Date</th>
</tr>
</thead>
<tbody>
<tr class="danger">
<td style="text-align: left; font-size: 16px;">1213</td>
<td style="text-align: left; font-size: 16px;">John Doe</td>
<td style="text-align: left; font-size: 16px;">my short description</td>
<td style="text-align: left; font-size: 16px;">Today's Date</td>
<td style="text-align: left; font-size: 16px;">Today's Date</td>
<td style="text-align: left; font-size: 16px;">Today's Date</td>
<td style="text-align: left; font-size: 16px;">Today's Date</td>
<td style="text-align: left; font-size: 16px;">Today's Date</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th style="text-align: left; font-size: 23px;">#</th>
<th style="text-align: left; font-size: 23px;">Name</th>
<th style="text-align: left; font-size: 23px;">Description</th>
<th style="text-align: left; font-size: 23px;">Date</th>
</tr>
</thead>
<tbody>
<tr class="danger">
<td style="text-align: left; font-size: 16px;">1213</td>
<td style="text-align: left; font-size: 16px;">John Doe</td>
<td style="text-align: left; font-size: 16px;">my short description</td>
<td style="text-align: left; font-size: 16px;">Today's Date</td>
</tr>
</tbody>
</table>
</div>
The code below will not reset and start back from the top the table as asked in the question, but this will help some future readers who trying to scroll and loop the table rows automatically with a fixed header.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$.fn.infiniteScrollUp=function(){
var self=this,kids=self.children()
kids.slice(20).hide()
setInterval(function(){
kids.filter(':hidden').eq(0).fadeIn()
kids.eq(0).fadeOut(function(){
$(this).appendTo(self)
kids=self.children()
})
},1000)
return this
}
$(function(){
$('tbody').infiniteScrollUp()
})
</script>
<title>infiniteScrollUp</title>
</head>
<body>
<table>
<colgroup><col /><col /><col /><col /><col /><col /></colgroup>
<thead>
<tr><th>a</th><th>b</th><th>c</th><th>d</th><th>e</th><th>f</th></tr>
</thead>
<tbody>
<tr><td>1a</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1b</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1c</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1d</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1e</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1f</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1g</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1h</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1i</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1j</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1k</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1l</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1m</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1n</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1o</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1p</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1q</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1r</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1s</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1t</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1u</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1v</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1w</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1x</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1y</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1z</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
</tbody>
</table>
</body>
</html>
I'm trying to get the below HTML code to show the two tables in the center of the page with a slightly larger space between them and top vertical alignment because they may not have the number of rows in each table so i want them.
I've managed to get it top aligned but I can't seem to get them centered on the page. Any help would be appreciated.
<style>
html,
body {
height: 100%;
}
#tbl1 {
height: 100%;
width: 100%;
display: table;
}
#tbl2 {
vertical-align: top;
display: table-cell;
height: 100%;
}
#mytbl {
display: inline-table;
margin: 0 auto;
}
</style>
<div id="tbl1">
<div id="tbl2">
<table id="mytbl" border="1">
<tr>
<th style="font-size:25px" colspan="4" align="center" valign="middle">TN Staff</th>
</tr>
<tr>
<th style="font-size:20px">Name</th>
<th style="font-size:20px">Job Title</th>
<th style="font-size:20px">Office</th>
<th style="font-size:20px">Cell</th>
</tr>
<tr>
<td><strong>John Smith</strong>
</td>
<td>Director of Operations</td>
<td align="center">123-555-4567</td>
<td align="center">123-555-0123</td>
</tr>
</table>
<table id="mytbl" border="1">
<tr>
<th style="font-size:25px" colspan="4" align="center" valign="middle">VA Staff</th>
</tr>
<tr>
<th style="font-size:20px">Name</th>
<th style="font-size:20px">Job Title</th>
<th style="font-size:20px">Office</th>
<th style="font-size:20px">Cell</th>
</tr>
<tr>
<td><strong>Jane Doe</strong>
</td>
<td>Director of Operations</td>
<td align="center">321-555-7654</td>
<td align="center">321-555-3210</td>
</tr>
</table>
</div>
</div>
Make sure you add this
#tbl2{
text-align: center;
}
#mytbl{
margin: 20px 0;
}
Here's the full code:
html,
body {
height: 100%;
}
#tbl1 {
height: 100%;
width: 100%;
display: table;
}
#tbl2 {
vertical-align: top;
text-align: center;
display: table-cell;
height: 100%;
}
#mytbl {
display: inline-table;
margin: 20px 0;
;
}
<div id="tbl1">
<div id="tbl2">
<table id="mytbl" border="1">
<tr>
<th style="font-size:25px" colspan="4" align="center" valign="middle">TN Staff</th>
</tr>
<tr>
<th style="font-size:20px">Name</th>
<th style="font-size:20px">Job Title</th>
<th style="font-size:20px">Office</th>
<th style="font-size:20px">Cell</th>
</tr>
<tr>
<td><strong>John Smith</strong>
</td>
<td>Director of Operations</td>
<td align="center">123-555-4567</td>
<td align="center">123-555-0123</td>
</tr>
</table>
<br>
<table id="mytbl" border="1">
<tr>
<th style="font-size:25px" colspan="4" align="center" valign="middle">VA Staff</th>
</tr>
<tr>
<th style="font-size:20px">Name</th>
<th style="font-size:20px">Job Title</th>
<th style="font-size:20px">Office</th>
<th style="font-size:20px">Cell</th>
</tr>
<tr>
<td><strong>Jane Doe</strong>
</td>
<td>Director of Operations</td>
<td align="center">321-555-7654</td>
<td align="center">321-555-3210</td>
</tr>
</table>
</div>
</div>
Advice: Don't use inline styles and do not place your style in the same document as your html code . Use a .css document to put all your styles and just add this in your html document( in head ):
<link rel="stylesheet" type="text/css" href="styles.css" media="all">
try this :
<style>
html, body {
height: 100%;
}
#tbl1 {
display: table;
height: 100%;
margin-left: auto;
margin-right: auto;
width: 960px;
}
#tbl2 {
vertical-align: top;
display: table-cell;
height: 100%;
}
#mytbl {
display: inline-table;
margin: 0 auto 0 20px;
}
</style>
<div id="tbl1">
<div id="tbl2">
<table id="mytbl" border="1">
<tr>
<th style="font-size:25px" colspan="4" align="center" valign="middle">TN Staff</th>
</tr>
<tr>
<th style="font-size:20px">Name</th>
<th style="font-size:20px">Job Title</th>
<th style="font-size:20px">Office</th>
<th style="font-size:20px">Cell</th>
</tr>
<tr>
<td><strong>John Smith</strong></td>
<td>Director of Operations</td>
<td align="center">123-555-4567</td>
<td align="center">123-555-0123</td>
</tr>
</table>
<table id="mytbl" border="1">
<tr>
<th style="font-size:25px" colspan="4" align="center" valign="middle">VA Staff</th>
</tr>
<tr>
<th style="font-size:20px">Name</th>
<th style="font-size:20px">Job Title</th>
<th style="font-size:20px">Office</th>
<th style="font-size:20px">Cell</th>
</tr>
<tr>
<td><strong>Jane Doe</strong></td>
<td>Director of Operations</td>
<td align="center">321-555-7654</td>
<td align="center">321-555-3210</td>
</tr>
</table>
</div>
</div>
here is a test: http://jsfiddle.net/on0xmmhq/
hope this help you
Good evening, I'm trying to align a table to make it like the picture, but failed to do so, I could help?
Now I have it like this:
and I'd like it to look like this:
This is my html code:
<table class="table table-hover table-bordered">
<thead>
<tr>
<th class="text-left">Codigo</th>
<th class="text-left">Descripcion</th>
<th class="text-left">Precio</th>
<th class="text-left">Cantidad</th>
<th class="text-left">Importe</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-1">1001</td>
<td class="col-md-8">Producto de ejemplo 1</td>
<td class="col-md-1 text-right">$10,000</td>
<td class="col-md-1 text-center">100</td>
<td class="col-md-1 text-right">$1,000,000</td>
</tr>
<tr>
<th class="text-right" scope="row">TOTAL</th>
<td class="text-right">$1,000,000</td>
</tr>
</tbody>
</table>
Specifying the colspan for the cells in the summary row will shift the final cell right.
<th colspan="4" class="text-right" scope="row">TOTAL</th>
Alternatively, you could start the row with a <td> with colspan="3", and using a class that would have no borders (controlled by your css).
<td colspan="3" class="noborders"></td>
<th class="text-right" scope="row">TOTAL</th>
Without that class, direct manipulation of style may work.
<td style="border:0" colspan="3"></td>
<th class="text-right" scope="row">TOTAL</th>
Updated snippet:
table {
border-collapse: collapse;
font-family: arial;
}
td,
th {
width: auto;
margin: 2px;
padding: 3px;
text-align: left;
border: 1px solid grey;
}
.noborders {
border: 0;
}
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
<table class="table table-hover table-bordered">
<thead>
<tr>
<th class="text-left">Codigo</th>
<th class="text-left">Descripcion</th>
<th class="text-left">Precio</th>
<th class="text-left">Cantidad</th>
<th class="text-left">Importe</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-1">1001</td>
<td class="col-md-8">Producto de ejemplo 1</td>
<td class="col-md-1 text-right">$10,000</td>
<td class="col-md-1 text-center">100</td>
<td class="col-md-1 text-right">$1,000,000</td>
</tr>
<tr>
<td colspan="3" class="noborders"></td>
<th class="text-right" scope="row">TOTAL</th>
<td class="text-right">$1,000,000</td>
</tr>
</tbody>
</table>
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;
}