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
Related
I have table:
<table border="1" width="100%">
<thead>
<tr>
<th width="50%">Name</th>
<th width="50%"><span style="width: 50%;text-align: left;">Price</span> / <span style="width: 50%;text-align: right;">Einheit</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td><span style="width: 50%;text-align: left;">1000</span> / <span style="width: 50%;text-align: right;">Hour</span></td>
</tr>
<tr>
<td>Name2</td>
<td><span style="width: 50%;text-align: left;">250.50</span> / <span style="width: 50%;text-align: right;">Day</span></td>
</tr>
</tbody>
</table>
Need that 1000 and 250.50 were under the word Price, Hour and Day were under the word Einheit. I tried do it using width property and text-align but it doesnt work.
Need this result, for example:
https://clip2net.com/s/3ZXsphT
Thanks
By Default span tag is inline element, it doesn't take width. You need to change span tag to block label element using display or float. check updated snippet below...
td span {
display: inline-block;
width: 47%;
}
<table border="1" width="100%">
<thead>
<tr>
<th width="50%">Name</th>
<th width="50%"><span style="width: 50%;text-align: left;">Price</span> / <span style="width: 50%;text-align: right;">Einheit</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td><span style="text-align: right;">1000</span> / <span style="text-align: left;">Hour</span></td>
</tr>
<tr>
<td>Name2</td>
<td><span style="text-align: right;">250.50</span> / <span style="text-align: left;">Day</span></td>
</tr>
</tbody>
Add this CSS
table tr td:nth-child(even){
text-align:center;
}
<table border="1" width="100%">
<thead>
<tr>
<th width="50%">Name</th>
<th width="50%"><span>Price</span> / <span>Einheit</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td><span>1000</span> / <span>Hour</span></td>
</tr>
<tr>
<td>Name2</td>
<td><span>250.50</span> / <span>Day</span></td>
</tr>
</tbody>
</table>
Actually, you don't need any single span as none was executed.
price / Einheit was centered only as this is the default of th tag
So, in order to align the cell beneath it, you can just code td style=" text-align:center"
and if you want to align all cells to the center
table style="text-align:center"
I want to extend inner table cell width as per parent table header
I tried this but how do i give inner table cell width as per parent header cell.
What i tried along with boottrap
<div class="table-responsive">
<table class="table table-sm table-bordered block-table">
<thead>
<th>Sr.</th>
<th>Product</th>
<th>Unit</th>
<th style="width: 15%">Serial Number</th>
<th>Date</th>
<th>Mac. Address</th>
<th>Batch No.</th>
<th>Qty</th>
<th>Std Pkg</th>
<th>Start Range</th>
<!-- <th>Assigned Quantity</th> -->
</thead>
<tbody>
<ng-container *ngFor="let inventory of inventoryList;let i=index">
<tr style="cursor: pointer;" (click)="toggleProductEntryTable(i)">
<td>{{i + 1}} </td>
<td> {{inventory?.displayString}} </td>
<td>{{inventory?.uomString}} </td>
<td colspan="7" style="padding: 0px">
<tbody>
<tr style="display: table-header-group" *ngFor="let productEntry of inventory.inventories;let proEnt=index">
<td style="display: table-cell;min-width: 160px"> {{productEntry?.subDetail?.serialNo}} </td>
<td style="display: table-cell;"> {{productEntry?.inventory?.date}} </td>
<td style="display: table-cell;"> {{productEntry?.subDetail?.macAddress}} </td>
<td style="display: table-cell;"> {{productEntry?.subDetail?.batchNo}} </td>
<td style="display: table-cell;"> {{productEntry?.checkoutDetail?.consumed - productEntry?.checkoutDetail?.assignedCount}} </td>
<td style="display: table-cell;"> {{productEntry?.subDetail?.standardPackingQuntity}}</td>
<td style="display: table-cell;"> {{productEntry?.checkoutDetail?.startRange}} </td>
<td style="display: table-cell;"> {{productEntry?.checkoutDetail?.endRange}} </td>
</tr>
</tbody>
</td>
</tr>
</ng-container>
</tbody>
</table>
</div>
.block-table {
display: table;
overflow-x: scroll;
max-height: 448px;
margin-bottom: 0px;
}
Add colspan="2" with the number of columns you want it to span (looks like 10 in your case)
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Monthly Savings</th>
</tr>
<tr>
<td colspan="2">January</td>
</tr>
<tr>
<td colspan="2">February</td>
</tr>
</table>
</body>
</html>
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>
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>
What is causing scroll bar to not be clipped on side of table in this fiddle: http://jsfiddle.net/m4HB3/8/ At the moment it is underneath the last column, meaning it is taking up some of that columns space and thus causing alignment issues with the table.
The table headers are fixed as I want a scrolling table with fixed headers.
Could the problem be the width set for the table and individual columns?
Can somebody please also text their answer on a script outside jsfiddle and put it straight on a browser because I have seen examples where something is working in jsifddle but then not working in main application on browser.
HTML:
<table id="tableqanda" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th width="5%" class="questionno">Question No.</th>
<th width="27%" class="question">Question</th>
<th width="7%" class="option">Option Type</th>
<th width="11%" class="image">Image</th>
</tr>
</thead>
</table>
<div id="tableqanda_onthefly_container">
<table id="tableqanda_onthefly" cellpadding="0" cellspacing="0">
<tbody>
<tr class="tableqandarow">
<td width="5%" class="questionno">1</td>
<td width="27%" class="question">What is a RAM?</td>
<td width="7%" class="option">A-E</td>
<td width="11%" class="imagetd"><ul class="qandaul"><li>Lighthouse_4.jpg</li></ul></td>
</tr>
<tr class="tableqandarow">
<td width="5%" class="questionno">2</td>
<td width="27%" class="question">Name 3 car maneuvers you may do in a test?</td>
<td width="7%" class="option">A-F</td>
<td width="11%" class="imagetd"><ul class="qandaul"><li>Tulips_3.jpg</li></ul></td>
</tr>
</tbody>
</table>
</div>
CSS:
#tableqanda_onthefly_container
{
width:100%;
overflow-y: auto;
overflow-x: hidden;
max-height:25px;
}
#tableqanda_onthefly
{
width:100%;
overflow-y: auto;
overflow-x: hidden;
clear:both;
}
#tableqanda_onthefly td
{
border:1px black solid;
border-collapse:collapse;
}
#tableqanda, #tableqanda_onthefly{
border:1px black solid;
border-collapse:collapse;
table-layout:fixed;
word-wrap:break-word;
}
#tableqanda{
width:100%;
margin-left:0;
float:left;
}
#tableqanda td {
vertical-align: middle;
border:1px black solid;
border-collapse:collapse;
}
#tableqanda th{
border:1px black solid;
border-collapse:collapse;
text-align:center;
}
.tableqandarow{
border:1px black solid;
border-collapse:collapse;
}
UPDATE:
http://jsfiddle.net/m4HB3/37/
I have a js fiddle which works perfectly. But if you copy code into a standard html, the columns are not aligned. If you can get the columns aligned correctly with their headings with the scroll bar on the side of the table, then that will be perfect answer
Is that something what could work for you?
Using here script/jQuery within your div to scroll, slightly modified css to give side scrolling.
Please see: http://jsfiddle.net/m4HB3/177
Here's standalone version: http://webapper.pl/demo.html
I didn't spend much time on css but i'm sure you could make it look pretty.
var ele = $('.scroll');
var scroll = 25;
$('.up').on('click',function() {
ele.scrollTop( ele.scrollTop() - scroll );
});
$('.down').on('click',function() {
ele.scrollTop( ele.scrollTop() + scroll );
});
Or you can use static table width (that would also fix your problem):
http://jsfiddle.net/m4HB3/178/
Here is a fiddle based on the linked question by Sara:
DEMO
html
<div id="tableContainer" class="tableContainer">
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="scrollTable">
<col width="10%" />
<col width="54%" />
<col width="14%" />
<col width="22%" />
<thead class="fixedHeader">
<tr>
<th class="questionno">Question No.</th>
<th class="question">Question</th>
<th class="option">Option Type</th>
<th class="image">Image</th>
</tr>
</thead>
<tbody class="scrollContent">
<tr>
<td class="questionno">1</td>
<td class="question">What is a RAM?</td>
<td class="option">A-E</td>
<td class="imagetd"><ul class="qandaul"><li>Lighthouse_4.jpg</li></ul></td>
</tr>
<tr>
<td class="questionno">2</td>
<td class="question">Name 3 car maneuvers you may do in a test?</td>
<td class="option">A-F</td>
<td class="imagetd"><ul class="qandaul"><li>Tulips_3.jpg</li></ul></td>
</tr>
<tr>
<td class="questionno">3</td>
<td class="question">What is a RAM?</td>
<td class="option">A-E</td>
<td class="imagetd"><ul class="qandaul"><li>Lighthouse_4.jpg</li></ul></td>
</tr>
<tr>
<td class="questionno">4</td>
<td class="question">Name 3 car maneuvers you may do in a test?</td>
<td class="option">A-F</td>
<td class="imagetd"><ul class="qandaul"><li>Tulips_3.jpg</li></ul></td>
</tr>
<tr>
<td class="questionno">5</td>
<td class="question">What is a RAM?</td>
<td class="option">A-E</td>
<td class="imagetd"><ul class="qandaul"><li>Lighthouse_4.jpg</li></ul></td>
</tr>
<tr>
<td class="questionno">6</td>
<td class="question">Name 3 car maneuvers you may do in a test?</td>
<td class="option">A-F</td>
<td class="imagetd"><ul class="qandaul"><li>Tulips_3.jpg</li></ul></td>
</tr>
<tr>
<td class="questionno">7</td>
<td class="question">What is a RAM?</td>
<td class="option">A-E</td>
<td class="imagetd"><ul class="qandaul"><li>Lighthouse_4.jpg</li></ul></td>
</tr>
<tr>
<td class="questionno">8</td>
<td class="question">Name 3 car maneuvers you may do in a test?</td>
<td class="option">A-F</td>
<td class="imagetd"><ul class="qandaul"><li>Tulips_3.jpg</li></ul></td>
</tr>
</tbody>
</table>
</div>
css
div.tableContainer {
clear: both;
border: 1px solid #963;
overflow: auto;
}
html>body tbody.scrollContent {
display: block;
height: 100px;
overflow: auto;
width: 100%
}
html>body thead.fixedHeader tr {
display: block
}
html>body td {
box-sizing: border-box;
border: 1px solid grey;
}
table .questionno {
width: 10%;
}
table .question {
width: 54%;
}
table .option {
width: 14%;
}
table .image {
width: 22%;
}