It causes width issue for both tables. Refer the code below,
<table id="tblMessages" class="table table-striped table-bordered full-width table-advance table-hover table-condensed fl" style="border-collapse:collapse !important;">
<thead>
<tr>
<th style="cursor:pointer; width:20%">From</th>
<th style="cursor:pointer; width:60%">Subject</th>
<th style="cursor:pointer; width:20%">Date</th>
</tr>
</thead>
<tbody></tbody>
</table>
And here is second table,
<table id="tblToDos" class="table table-striped table-bordered table-advance full_width table-hover table-condensed fl" style="border-collapse:collapse !important">
<thead>
<tr>
<th style="width:5%"></th>
<th style="cursor:pointer; width:20%">From</th>
<th style="cursor:pointer; width:30%">Patient</th>
<th style="cursor:pointer; width:35%">Subject</th>
<th style="cursor:pointer; width:10%">Reminder Date</th>
</tr>
</thead>
Note that I tried with giving width in "Columns" property of Datatables but no luck.
And if I removed second table init then it is working fine.
I got the solution. Though it is not a proper solution but we can solve this matter by redraw the grid using below code.
$('#tblMessages').DataTable().columns.adjust().draw();
Put this line after you are done with initialising second datatable.
Related
I use datatable for displaying data and table has 14 columns
but i facing issue in display table header data.It overlapped rather then display in two lines
I create table like this
<table id="tbl" class="table" cellspacing="0" width="100%" style="word-wrap:break-word;
table-layout: fixed;">
<thead>
<tr>
<th>Column Name</th>
</tr>
</thead>
</table>
How can i do it in two lines
<table id="tbl" class="table" cellspacing="0" width="100%" style="word-wrap:break-word;
table-layout: fixed;">
<thead>
<tr>
<th style="word-wrap: break-word;">Column Name</th>
</tr>
</thead>
</table>
overfow:hidden should do the trick ;-)
I have two tables that are semantically different, so they should be kept separate, IMHO. However, I'd like to align their columns. Browsing SO I found that column widths in a table can be controlled by setting w--classes in the thead. This worked fine for the 2nd table (which was the ine I started with). But when I added the first table on top of it, desaster struck - not only do their columns not align, even the relation of column-widths does not seem to correspond to the w--values.
Fiddle here.
theadof table1:
<thead class="bg-secondary">
<tr>
<th class="w-8">Model Name</th>
<th class="w-8">Y</th>
<th class="w-15">S</th>
<th class="w-15">R<sup>2</sup>(%)</th>
<th class="w-15">R<sup>2</sup>-Adj (%)</th>
<th class="w-39"> </th>
</tr>
</thead>
and table2:
<thead class="bg-secondary">
<tr>
<th class="w-8">Var</th>
<th class="w-8">Include</th>
<th class="w-15">Expression</th>
<th class="w-15">Coefficient</th>
<th class="w-15">StdErr</th>
<th class="w-15">T</th>
<th class="w-15">P</th>
<th class="w-9"> </th>
</tr>
</thead>
There is no w-8,w-15 etc... in Bootstrap 4.
The width sizing classes are w-25, w-50, w-75, w-100 and w-auto.
Refer to the docs: http://getbootstrap.com/docs/4.1/utilities/sizing/
How can I assign variable to primeng TurboTable ColGroup colspan property.
<ng-template pTemplate="header">
<tr>
<th rowspan="3">Brand</th>
<th colspan="4">Sale Rate</th>
</tr>
<tr>
<th colspan="colSpanCount">Sales</th>
<th colspan="2">Profits</th>
</tr>
<tr>
<th>Last Year</th>
<th>This Year</th>
<th>Last Year</th>
<th>This Year</th>
</tr>
</ng-template>
In above example, I want to bind colSpanCount variable to colspan attribute of p-table.
I think, I have found an answer myself. We can set [attr.colspan]="colSpanCount" property to set colspan dynamically.
<ng-template pTemplate="header">
<tr>
<th rowspan="3">Brand</th>
<th colspan="4">Sale Rate</th>
</tr>
<tr>
<th [attr.colspan]="colSpanCount">Sales</th>
<th colspan="2">Profits</th>
</tr>
<tr>
<th>Last Year</th>
<th>This Year</th>
<th>Last Year</th>
<th>This Year</th>
</tr>
</ng-template>
As you've discovered, you can change colspan to [attr.colspan].
Another solution is to change colspan to [colSpan].
See this answer for a deeper explanation
I have this simple html table
<table id="mytable">
<thead>
<tr>
<th>Name</th>
<th colspan="2">Actions</th>
</tr>
<tr>
<th>Delete</th>
<th>Update</th>
</tr>
</thead>
<tbody>
<tr>
<td>MyName</td>
<td onclick="delete()">X</td>
<td onclick="update()">U</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function(){
$('#mytable').DataTable();
});
</script>
If i open this on the browser i get
"Cannot read property 'mData' of undefined".
I don't undestand where is the problem.. I am following the official example: https://datatables.net/examples/basic_init/complex_header.html
Thank you all!
your html have unmatched number of columns, notice the first row of your header has colspan while the second row doesn't.
what you can do is to provide a rowspan.
<thead>
<tr>
<th rowspan="2">Name</th>
<th colspan="2">Actions</th>
</tr>
<tr>
<th>Delete</th>
<th>Update</th>
</tr>
</thead>
here's a link to the datatables example of complex headers. https://datatables.net/examples/basic_init/complex_header.html
I am trying to right align the values, but those are not aligning properly to the end of the column.
Example code:
<table id="demoTable1" cellspacing="0" cellpadding="0" border="1">
<thead>
<tr>
<th style="text-align:right; width:23%"><bean:message key="label.amount"/></th>
</tr>
</thead>
<tbody >
<c:forEach items="${demoForm.amount}" var="amt" >
<tr>
<td dntitle="myAmt" style="text-align:right; width:23%">
<util:myCurrency name="amt" property="amtList" currProperty="curCode"/>
</td>
</tr>
</c:forEach>
</tbody>
</table>
And the Output looks like this:
How can I fix this?