The responsive table with a border has been designed. The problem is wraptexting, even when included th.nowrap in css, where data is overlapping and two horizontal lines appear when I look into the mobile view. there is header constant and data scrolling method. Even included nowrap text but texts are overlapping.
table {
width: 100%;
white-space: nowrap;
}
thead,
tbody,
tr,
td,
th {
display: block;
}
tr:after {
content: ' ';
display: block;
visibility: hidden;
clear: both;
white-space: nowrap;
}
thead th {
height: 40px;
white-space: nowrap;
/*text-align: left;*/
}
tbody {
height: 40px;
overflow-y: auto;
white-space: nowrap;
}
thead {
/* fallback */
}
tbody td,
thead th {
width: 19.2%;
float: left;
white-space: nowrap;
}
HTML:
<div class="row">
<div class="panel panel-default">
<!-- /.panel-heading -->
<div class="panel-body pn">
<div style="overflow-x:auto;">
<br>
<div class="table-responsive">
<table class="table table-bordered mbn">
<div class="panel-heading">
<span class="panel-title">
<span class="fa fa-table"></span>
<font color="blue">Se</font>
</span>
</div>
<thead>
<tr>
<th style="width:7.8%;white-space:nowrap;">
<font color="grey">Enq</font>
</th>
<th style="width:7.8%;white-space:nowrap;" nowrap="nowrap">
<font color="grey">Da</font>
</th>
<th style="width:9.9%;white-space:nowrap;">
<font color="grey">Bu</font>
</th>
<th style="width:9.9%;white-space:nowrap;">
<font color="grey">Prop</font>
</th>
<th style="width:17.9%;white-space:nowrap;">
<font color="grey">Pr</font>
</th>
<th style="width:9.8%;white-space:nowrap;">
<font color="grey">District</font>
</th>
<th style="width:9.9%;white-space:nowrap;">
<font color="grey">City</font>
</th>
<th style="width:9.8%;white-space:nowrap;">
<font color="grey">Bedrooms</font>
</th>
<th style="width:7.9%;white-space:nowrap;">
<font color="grey">Details</font>
</th>
<th style="width:7.8%;white-space:nowrap;">
<font color="grey">Update</font>
</th>
</tr>
</thead>
<tr>
<td style="width:8%;white-space:nowrap;"></td>
<td style="width:8%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:18%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:8%;white-space:nowrap;"><a>Det </a></td>
<td style="width:8%;white-space:nowrap;"><a> ed </a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
try this
white-space: normal;
word-wrap: break-word;
table {
width: 100%;
white-space: nowrap;
}
thead,
tbody,
tr,
td,
th {
display: block;
}
tr:after {
content: ' ';
display: block;
visibility: hidden;
clear: both;
white-space: nowrap;
}
thead th {
height: 40px;
white-space: normal;
word-wrap: break-word;
/*text-align: left;*/
}
tbody {
height: 40px;
overflow-y: auto;
}
thead {
/* fallback */
}
tbody td,
thead th {
width: 19.2%;
float: left;
}
HTML:
<div class="row">
<div class="panel panel-default">
<!-- /.panel-heading -->
<div class="panel-body pn">
<div style="overflow-x:auto;">
<br>
<div class="table-responsive">
<table class="table table-bordered mbn">
<div class="panel-heading">
<span class="panel-title">
<span class="fa fa-table"></span>
<font color="blue">Se</font>
</span>
</div>
<thead>
<tr>
<th style="width:7.8%;">
<font color="grey">Enq</font>
</th>
<th style="width:7.8%;" nowrap="nowrap">
<font color="grey">Da</font>
</th>
<th style="width:9.9%;">
<font color="grey">Bu</font>
</th>
<th style="width:9.9%;">
<font color="grey">Prop</font>
</th>
<th style="width:17.9%;">
<font color="grey">Pr</font>
</th>
<th style="width:9.8%;">
<font color="grey">District</font>
</th>
<th style="width:9.9%;">
<font color="grey">City</font>
</th>
<th style="width:9.8%;">
<font color="grey">Bedrooms</font>
</th>
<th style="width:7.9%;">
<font color="grey">Details</font>
</th>
<th style="width:7.8%;">
<font color="grey">Update</font>
</th>
</tr>
</thead>
<tr>
<td style="width:8%;white-space:nowrap;"></td>
<td style="width:8%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:18%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:8%;white-space:nowrap;"><a>Det </a></td>
<td style="width:8%;white-space:nowrap;"><a> ed </a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
Add box-sizing: border-box; to your th/td
Hope this helps :)
table {
width: 100%;
white-space: nowrap;
}
thead,
tbody,
tr,
td,
th {
display: block;
box-sizing: border-box;/*Add this*/
}
tr:after {
content: ' ';
display: block;
visibility: hidden;
clear: both;
white-space: nowrap;
}
thead th {
height: 40px;
white-space: nowrap;
/*text-align: left;*/
}
tbody {
height: 40px;
overflow-y: auto;
white-space: nowrap;
}
thead {
/* fallback */
}
tbody td,
thead th {
width: 19.2%;
float: left;
white-space: nowrap;
}
HTML:
<div class="row">
<div class="panel panel-default">
<!-- /.panel-heading -->
<div class="panel-body pn">
<div style="overflow-x:auto;">
<br>
<div class="table-responsive">
<table class="table table-bordered mbn">
<div class="panel-heading">
<span class="panel-title">
<span class="fa fa-table"></span>
<font color="blue">Se</font>
</span>
</div>
<thead>
<tr>
<th style="width:7.8%;white-space:nowrap;">
<font color="grey">Enq</font>
</th>
<th style="width:7.8%;white-space:nowrap;" nowrap="nowrap">
<font color="grey">Da</font>
</th>
<th style="width:9.9%;white-space:nowrap;">
<font color="grey">Bu</font>
</th>
<th style="width:9.9%;white-space:nowrap;">
<font color="grey">Prop</font>
</th>
<th style="width:17.9%;white-space:nowrap;">
<font color="grey">Pr</font>
</th>
<th style="width:9.8%;white-space:nowrap;">
<font color="grey">District</font>
</th>
<th style="width:9.9%;white-space:nowrap;">
<font color="grey">City</font>
</th>
<th style="width:9.8%;white-space:nowrap;">
<font color="grey">Bedrooms</font>
</th>
<th style="width:7.9%;white-space:nowrap;">
<font color="grey">Details</font>
</th>
<th style="width:7.8%;white-space:nowrap;">
<font color="grey">Update</font>
</th>
</tr>
</thead>
<tr>
<td style="width:8%;white-space:nowrap;"></td>
<td style="width:8%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:18%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:8%;white-space:nowrap;"><a>Det </a></td>
<td style="width:8%;white-space:nowrap;"><a> ed </a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
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 want to create a table with a lot of data. To keep it all sorted out, I want the table to be scrollable. I use bootstrap to pimp up the table.
I know this question is asked before and the solution does work for me, but my table is a mess. See the table on the right for what it looks like. I want it to look more like the table to the left.
So what I tried is:
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Speciale tarieven buiten 's-Herogenbosch</h3>
<div class="pull-right">
<span class="clickable filter" data-toggle="tooltip" title="Klik om te zoeken"
data-container="body">
<i class="glyphicon glyphicon-search"></i>
</span>
</div>
</div>
<div class="panel-body">
<input type="text" class="form-control" id="task-table-filter" data-action="filter"
data-filters="#task-table" placeholder="Zoek naar een plaats.."/>
</div>
<table class="table table-hover table-fixed" id="task-table">
<thead>
<tr>
<th >#</th>
<th>Van</th>
<th>Naar</th>
<th>Normaal</th>
<th>Onze prijs</th>
<th>Korting</th>
</tr>
</thead>
<tbody class="alignmentp">
<tr>
<td>1</td>
<td>'s-Hertogenbosch</td>
<td>Ammerzoden</td>
<td>€ 35,00-</td>
<td>€ 24,99-</td>
<td>30 %</td>
</tr>
<tr>
<td>2</td>
//etc etc
</tr>
</tbody>
</table>
</div>
And the CSS I use with this is:
.alignmentp{
text-align: left !important;
}
.table-fixed thead {
width: 97%;
}
.table-fixed tbody {
height: 230px;
overflow-y: auto;
width: 100%;
}
.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
display: block;
}
.table-fixed tbody td, .table-fixed thead > tr> th {
float: left;
border-bottom-width: 0;
}
I can fix this table by manually correcting the width and height of each <"tr"> and <"td"> element, but there must be a better way of doing this..
Sounds like you are having problems with your columns not lining up. What you could do is find out how wide your widest element is (<td> or <th>) and then set all <td> and <th> elements to that width.
Another possible solution is to add the table-responsive class to your table, as defined in the Bootstrap table docs, and make the width of your <td> and <th> elements be defined by how many there are in a row. If there are five <td>s in a <tr>, set the width of the <td>s to be 20%.
Hope this fixed your problem, if not, just comment below and I'll try again.
.fixHeader{
overflow-y: auto;
}
.fixHeader th {
position: sticky;
top: 0;
background-color: #b4bab4;
}
.fixHeader table {
border-collapse: collapse;
width: 100%;
}
.fixHeader th,
.fixHeader td {
padding: 8px 16px;
}
<div class="fixHeader" style="height:200px;">
<table class="table card-border">
<thead class="tableHead">
<tr>
<th scope="col">
<label class="form-check-label">xyz</label>
</th>
<th scope="col"> abc</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of listData">
<td>
<div class="form-check">
{{item.Name}}
</div>
</td>
<td>
<label class="form-check-label">{{ item.Value }}</label>
</td>
</tr>
</tbody>
</table>
</div>
You can check this answer it was helpful for me.
In HTML you can add this:
<div class="panel panel-default">
<div class="panel-body">
<table id="myTable" class="table table-hover table-fixedheader table-bordered table-striped">
<thead>
<tr>
<th width="15%">Column1Column1Column1Column1</th>
<th width="15%">Column2</th>
<th width="15%">Column3</th>
<th width="15%">Column4</th>
<th width="40%">Column5</th>
</tr>
</thead>
<tbody style="height:110px">
<tr>
<td width="15%">aaaaaaaaaaa</td>
<td width="15%">bbbbbbbbbbb</td>
<td width="15%">ccccccccccc</td>
<td width="15%">ddddddddddd</td>
<td width="40%">eeeeeeeeeee</td>
</tr>
</tbody>
</table>
</div>
</div>
In your CSS add this link:
table.table-fixedheader {
width: 100%;
}
table.table-fixedheader, table.table-fixedheader>thead, table.table-fixedheader>tbody, table.table-fixedheader>thead>tr, table.table-fixedheader>tbody>tr, table.table-fixedheader>thead>tr>th, table.table-fixedheader>tbody>td {
display: block;
}
table.table-fixedheader>thead>tr:after, table.table-fixedheader>tbody>tr:after {
content:' ';
display: block;
visibility: hidden;
clear: both;
}
table.table-fixedheader>tbody {
overflow-y: scroll;
height: 100px;
}
table.table-fixedheader>thead {
overflow-y: scroll;
}
table.table-fixedheader>thead::-webkit-scrollbar {
background-color: inherit;
}
table.table-fixedheader>thead>tr>th:after, table.table-fixedheader>tbody>tr>td:after {
content:' ';
display: table-cell;
visibility: hidden;
clear: both;
}
table.table-fixedheader>thead tr th, table.table-fixedheader>tbody tr td {
float: left;
word-wrap:break-word;
}
How can I change the color of the table from gray to black? I already tried background-color: green but but it wont affect the heading background of the table.
<style type="text/css">
.table-fixed thead {
width: 97%;
}
.table-fixed tbody {
height: 230px;
overflow-y: scroll;
width: 100%;
}
.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
display: block;
}
.table-fixed tbody td, .table-fixed thead > tr> th {
float: left;
border-bottom-
width: 0;
}
</style>
<div class="container">
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">
<h4>
Fixed Header Scrolling Table
</h4>
</div>
<table class="table table-fixed">
<thead>
<tr>
<th class="col-xs-2">#</th>
<th class="col-xs-8">Name</th>
<th class="col-xs-2">Points</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-xs-2">1</td>
<td class="col-xs-8">Mike Adams</td>
<td class="col-xs-2">23</td>
</tr>
<tr>
<td class="col-xs-2">2</td>
<td class="col-xs-8">Holly Galivan</td>
<td class="col-xs-2">44</td>
</tr>
<tr>
<td class="col-xs-2">3</td>
<td class="col-xs-8">Mary Shea</td>
<td class="col-xs-2">86</td>
</tr>
<tr>
<td class="col-xs-2">4</td>
<td class="col-xs-8">Jim Adams</td>
<td class="col-xs-2">23</td>
</tr>
<tr>
<td class="col-xs-2">5</td>
<td class="col-xs-8">Henry Galivan</td>
<td class="col-xs-2">44</td>
</tr>
<tr>
<td class="col-xs-2">5</td>
<td class="col-xs-8">Henry Galivan</td>
<td class="col-xs-2">44</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Setting the background against just the .table-fixed class works fine:
.table-fixed {
background-color: green;
}
I think you may have been setting it for just the tbody element, if the header wasn't being affected.
To set the entire panel's background colour, you could try setting a new class on the panel DIV, and then set the colour of this in css.
<style>
.panel-green { background-color: green; }
</style>
<div class="panel panel-default panel-green">
....
</div>
Or explicitly set the background on the panel:
<div class="panel panel-default" style="background-color: green">
....
</div>
I modified the table header color,table header text color, table background color.
I add some css code in your code.I commented that code
.table{
background-color: green;/* done by me */
}
.table-fixed thead {
width: 97%;
background-color: red;/* done by me */
color: white;/* done by me */
}
.table-fixed thead {
width: 97%;
}
.table-fixed tbody {
height: 230px;
overflow-y: scroll;
width: 100%;
}
.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
/ display: block;
}
.table-fixed tbody td, .table-fixed thead > tr> th {
float: left;
border-bottom-
width: 0;
}
<div class="container">
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">
<h4>
Fixed Header Scrolling Table
</h4>
</div>
<table class="table table-fixed">
<thead>
<tr>
<th class="col-xs-2">#</th>
<th class="col-xs-8">Name</th>
<th class="col-xs-2">Points</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-xs-2">1</td>
<td class="col-xs-8">Mike Adams</td>
<td class="col-xs-2">23</td>
</tr>
<tr>
<td class="col-xs-2">2</td>
<td class="col-xs-8">Holly Galivan</td>
<td class="col-xs-2">44</td>
</tr>
<tr>
<td class="col-xs-2">3</td>
<td class="col-xs-8">Mary Shea</td>
<td class="col-xs-2">86</td>
</tr>
<tr>
<td class="col-xs-2">4</td>
<td class="col-xs-8">Jim Adams</td>
<td class="col-xs-2">23</td>
</tr>
<tr>
<td class="col-xs-2">5</td>
<td class="col-xs-8">Henry Galivan</td>
<td class="col-xs-2">44</td>
</tr>
<tr>
<td class="col-xs-2">5</td>
<td class="col-xs-8">Henry Galivan</td>
<td class="col-xs-2">44</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
You can simply try:
edit: overlooked th elements
table thead th{
background:green;
}
Here is fiddle demo
You can use
.table header{
background-color:green;
}
I have tried various options such as overlap and suchlike, but I can't stop a div from overlapping a table to the right.
I have created a fiddle for my code http://jsfiddle.net/ntEzL/ to help explain my issue.
<div style="border: 1px solid #c9c3ba; padding: 0.5em; background-color: #f1f0ee; overflow: hidden;">
<br>
<br>
<table class="ff_sidebox" cellspacing="5" style="width:22em;">Latvia
<tr class="">
<th scope="row" style="text-align:left; white-space: nowrap">Full Name</th>
<td class="" style="white-space: nowrap">Republic of Latvia</td>
</tr>
<tr class="">
<th scope="row" style="text-align:left; white-space: nowrap">Full Name</th>
<td class="" style="white-space: nowrap">Republic of Latvia</td>
</tr>
<tr class="">
<th scope="row" style="text-align:left; white-space: nowrap">Full Name</th>
<td class="" style="white-space: nowrap">Republic of Latvia</td>
</tr>
<tr class="">
<th scope="row" style="text-align:left; white-space: nowrap">Full Name</th>
<td class="" style="white-space: nowrap">Republic of Latvia</td>
</tr>
<tr class="">
<th scope="row" style="text-align:left; white-space: nowrap">Full Name</th>
<td class="" style="white-space: nowrap">Republic of Latvia</td>
</tr>
<tr class="">
<th scope="row" style="text-align:left; white-space: nowrap">Full Name</th>
<td class="" style="white-space: nowrap">Republic of Latvia</td>
</tr>
<tr class="">
<th scope="row" style="text-align:left; white-space: nowrap">Full Name</th>
<td class="" style="white-space: nowrap">Republic of Latvia</td>
</tr>
<tr class="">
<th scope="row" style="text-align:left; white-space: nowrap">Full Name</th>
<td class="" style="white-space: nowrap">Republic of Latvia</td>
</tr>
<tr class="">
<th scope="row" style="text-align:left; white-space: nowrap">Full Name</th>
<td class="" style="white-space: nowrap">Republic of Latvia</td>
</tr>
<tr class="">
<th scope="row" style="text-align:left; white-space: nowrap">Full Name</th>
<td class="" style="white-space: nowrap">Republic of Latvia</td>
</tr>
</table>
<!-- end of sidebox for Latvia -->
<br>
<br>
<div class="ff_other_articles_caption" id="recent_articles_caption">Recent articles on Latvia</div>
<div class="ff_other_articles" id="recent_articles">
<div class="ff_other_articles_inner" id="recent_articles_inner">
<ul class="block_list">
<li> Latvia becomes 18th Euro Member on Jan 1st
</li>
</ul>
</div>
</div>
<br>
<br>
<br>
</div>
On a wider screen then there is no issue, but on a smaller resolution then I get the problem.
I would rather the content of the left box (div) to scroll to two lines if it can't fit there.
Any thoughts?
Thanks.
Try this..
for .ff_other_articles styles, remove position: absolute and add width:33%
Remove
position : absolute;
and add
width: 40% !important;
in class 'ff_other_articles' and check the changes i have made in html.
fiddle : http://jsfiddle.net/LPJAa/
Thanks.
why not use css table for this....??
i haved removed <br /> for easier understanding....and removed floats too, as they are not needed if you use floats..here is the demo
html, body {
width:100%;
height:100%;
margin:0;
padding:0;
}
#main_container {
display:table;
width:100%;
border:1px dashed #000;
}
.table_box_1 {
display:table-cell;
width:200px;
border:1px dashed red;
}
.table_box_2 {
display:table-cell;
width:50%;
border:1px dashed red;
}
Both float:left; and position:absolute; cannot be together.In this case remove absolute positioning from the left side box:
If i guess right this is what you asked for:
Fiddle 1 or Fiddle 2
Click to see updated fiddle:- With code / fullscreen
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;
}