I am getting more than 30000 records from backend to list in frontend, So using cdk-virtual-scroll I can able to achieve this. I have created normal table enclosed with cdk-tag
<cdk-virtual-scroll-viewport [itemSize] = "20">
<div class="result_table">
<table class="dataframe" border="1">
<thead>
<tr>
<th >
Name
</th>
<th >
Description
</th>
<th >
Group
</th>
<th >
Data
</th>
</tr>
</thead>
<tbody>
<tr *cdkVirtualFor ="let data of address_obj_data_holder | filter:searchAddr">
<td >
{{data.name}}
</td>
<td >
{{data.description}}
</td>
<td >
{{data.group}}
</td>
<td >
{{data.data}}
</td>
</tr>
</tbody>
</table>
</div>
</cdk-virtual-scroll-viewport>
If I do like this, table header also scrolls when I scrolls down, and If I do like,
<cdk-virtual-scroll-viewport [itemSize] = "20">
<div class="result_table">
<table class="dataframe" border="1">
<thead>
<tr>
<th style="width: 20% !important;">
Name
</th>
<th style="width: 40% !important;">
Description
</th>
<th style="width: 20% !important;">
Group
</th>
<th style="width: 20% !important;">
Data
</th>
</tr>
</thead>
<tbody>
<tr *cdkVirtualFor ="let data of address_obj_data_holder | filter:searchAddr">
<td style="width: 20% !important;">
{{data.name}}
</td>
<td style="width: 40% !important;">
{{data.description}}
</td>
<td style="width: 20% !important;">
{{data.group}}
</td>
<td style="width: 20% !important;">
{{data.data}}
</td>
</tr>
</tbody>
</table>
</div>
</cdk-virtual-scroll-viewport>
width of header and tbody is slightly different both are not in same width as we have scroll in below body alone. Can some one help me to fix this alignment issue.
If you are looking to make the header sticky of table and you are using cdk-virtual-scroll-viewport, then try this:
table { overflow: auto; }
thead { position: sticky; top: 0; }
Related
please can you help me to fix the design to make data more clear ,i will be very grateful if you help me ,thanks for your answer in advance
this is my css file
table-layout: fixed;
width: 100%;
border-collapse: collapse;
table-layout: fixed;
overflow: hidden;
}
this is my html file
<div class="col-md-12">
<div class="table-wrap">
<table class="table table-striped" >
<thead>
<tr>
<th class="odd" colspan="4">id</th>
<th class="odd" colspan="4">name</th>
<th *ngIf="isAdmin()" class="odd" colspan="4"> password</th>
<th class="odd" colspan="4">role</th>
<th class="odd" colspan="4"class="corner wideRow">email</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let el of users | paginate: { itemsPerPage: 2, currentPage: p }">
<th class="odd" colspan="4" ></th>
<td class="odd" colspan="4" >{{el.id}} </td>
<td class="odd" colspan="4" >{{el.username}}</td>
<td *ngIf="isAdmin()" class="odd" colspan="4">{{el.password}}</td>
<td class="odd" colspan="4" >{{el.role}}</td>
<td class="odd" colspan="4" >{{el.email}}</td>
<td class="odd" colspan="4">
<tr>
<a *ngIf="isAdmin()"
class="btn btn-danger" (click) = "deleteUser(el.id)" >Delete</a>
<a *ngIf="isAdmin()" class="btn btn-success" data-original-title="Edit">Edit</a>
</tr>
</td>
</tbody>
</table>
</div>
</div>
</div>
<pagination-controls (pageChange)="p = $event"></pagination-controls>
this the result ,it's not clear and i didn't khnow how to fixed it
when i add in csstable td { word-break: break-all;
}**
the result
result 2
1.) Having colspan="4" in each cell does not make any sense.
2.) The first (empty) th element in the tbody rows causes the misaligning you wrote about. Erase that to have IDs under the "id" header, names under the "name" header etc.
3.) You need an additional th cell in the header row (at the end) to have the same amount of cells as in the rows below it (above the cells with the nested tables which contain the two buttons).
.table-striped {
width: 100%;
border-collapse: collapse;
}
table td {
border: 1px solid #ddd;
word-break: break-all;
}
<table class="table table-striped">
<thead>
<tr>
<th class="odd">id</th>
<th class="odd">name</th>
<th *ngIf="isAdmin()" class="odd"> password</th>
<th class="odd">role</th>
<th class="odd">email</th>
<th class="odd"></th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let el of users | paginate: { itemsPerPage: 2, currentPage: p }">
<td class="odd">{{el.id}} </td>
<td class="odd">{{el.username}}</td>
<td *ngIf="isAdmin()" class="odd">{{el.password}}</td>
<td class="odd">{{el.role}}</td>
<td class="odd">{{el.email}}</td>
<td>
<table>
<tr>
<td>
<a *ngIf="isAdmin()" class="btn btn-danger" (click)="deleteUser(el.id)">Delete</a>
</td>
<td>
<a *ngIf="isAdmin()" class="btn btn-success" data-original-title="Edit">Edit</a>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
Add this css
table td {
word-break: break-all;
}
And use this corrected html. Make sure you header columns and body columns are equals.
<div class="col-md-12">
<div class="table-wrap">
<table class="table table-striped">
<thead>
<tr>
<th class="odd" colspan="4">id</th>
<th class="odd" colspan="4">name</th>
<th *ngIf="isAdmin()" class="odd" colspan="4"> password</th>
<th class="odd" colspan="4">role</th>
<th class="odd" colspan="4">email</th>
<th class="odd" colspan="4"></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let el of users | paginate: { itemsPerPage: 2, currentPage: p }">
<td class="odd" colspan="4">{{el.id}} </td>
<td class="odd" colspan="4">{{el.username}}</td>
<td *ngIf="isAdmin()" class="odd" colspan="4">{{el.password}}</td>
<td class="odd" colspan="4">{{el.role}}</td>
<td class="odd" colspan="4">{{el.email}}</td>
<td>
<table>
<tr>
<td>
<a *ngIf="isAdmin()" class="btn btn-danger" (click)="deleteUser(el.id)">Delete</a>
</td>
<td>
<a *ngIf="isAdmin()" class="btn btn-success" data-original-title="Edit">Edit</a>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
I want to insert a full width row as shown in the below image by Arrow
I have tried colspan, rowspan but did not work for me so removed from question (otherwise question will mess up).
here is what i have tried: https://jsfiddle.net/eabangalore/y3Lt470z/16/
table td {
padding: 5px;
}
<table width="500px" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th style="width:3%"></th>
<th style="width:10%">Name</th>
<th style="width:10%">Age</th>
<th style="width:10%">Designation</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div style="width:50px;height:70px;border-radius:50%;">
<img style="width:100%;height:100%;" src="https://via.placeholder.com/150"/>
</div>
</td>
<td align="center">Alpha</td>
<td align="center">21 year</td>
<td align="center">Software</td>
</tr>
<tr>
<td>
<div style="width:50px;height:70px;border-radius:50%;">
<img style="width:100%;height:100%;" src="https://via.placeholder.com/150"/>
</div>
</td>
<td align="center">Alpha</td>
<td align="center">21 year</td>
<td align="center">Software</td>
</tr>
</tbody>
</table>
Qusetion: i want to add a full-width row as shown by arrow in red color area (above image)
Note: i cannot change table into divs as i'm working on maintenance project.
You looking for this table structure. You have to use once rowspan and once colspan.
<table width="500px" border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th style="width:3%"></th>
<th style="width:10%">Name</th>
<th style="width:10%">Age</th>
<th style="width:10%">Designation</th>
</tr>
</thead>
<tr>
<th class="" rowspan="2">
<img style="width:100%;height:100%;" src="https://via.placeholder.com/150"/>
</th>
<th class="">1</th>
<th class="">2</th>
<th class="">3</th>
</tr>
<tr>
<td class="" colspan="4">new row</td>
</tr>
<tr>
<th class="" rowspan="2">
<img style="width:100%;height:100%;" src="https://via.placeholder.com/150"/>
</th>
<th class="">a</th>
<th class="">b</th>
<th class="">c</th>
</tr>
<tr>
<td class="" colspan="4">new row</td>
</tr>
</table>
Small Note: use instead inline style classes.
I am trying to print key in center of values.so that I tried to use rowspan but it's repeating n times.
here is my code
<table >
<tbody ng-repeat="(key,value) in values1" >
<tr >
<th translate> Heading 1</th>
<th translate> Heading 2 </th>
<th translate> Heading 3 </th>
<th translate> Heading 4 </th>
</tr>
<tr ng-repeat="itr in value">
<td >
{{itr .value1}}
</td>
<td >
{{itr .value2}}
</td>
<td >
{{itr .value3}}
</td>
<td rowspan="{{value.length+1}}" >
{{key}}
</td>
</tr>
</tbody>
</table>
But I am getting like this.
I need in this format
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>