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/
Related
Say I have the following table:
<table>
<thead>
<th>ID</th>
<th colspan="2">Full Name</th>
</thead>
<tbody>
<tr>
<td>123</td>
<td>Rasmus</td>
<td>Lerdorf</td>
</tr>
</tbody>
</table>
The first and last names are in two separate cells for formatting and readability reasons. By default, datatables ignores the colspan'd Full Name header cell, and won't make it toggle the sorting.
Is there a way to force datatables to explicitly make either of the columns in the table body sortable? For example, I want to sort by the last name only.
I searched, but only found several year old hacks and workarounds (e.g. creating empty columns etc.)
DataTables support rowspan and colspan in table header but only if there is one th cell for each column.
For example
<table>
<thead>
<tr>
<th rowspan="2">ID</th>
<th colspan="2">Full Name</th>
</tr>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>123</td>
<td>Rasmus</td>
<td>Lerdorf</td>
</tr>
</tbody>
</table>
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 ;-)
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
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.
Having a semantics issue. I have a basic table with a standard header and footer. Each row contains an order, beneath each row I need to display another table, that will contain a break down of costs relating to that order. Additionally, these inner tables will be displayed with a jQuery accordion to hide and show when required (but I'm just concentrating on the HTML for now)
How can I semantically approach this in HTML?
<table>
<thead>
<th>Package number</th>
<th>Date placed</th>
<th>Placed by</th>
<th>Total cost</th>
</thead>
<tr>
<td>1</td>
<td>Weds</td>
<td>Jonno</td>
<td>£15</td>
</tr>
<tr>
<td colspan="4">
<table>
<thead>
<th>Part number</th>
<th>Description</th>
<th>Qty shipped</th>
<th>Weight</th>
</thead>
<tbody>
<td>18293</td>
<td>Blah blah blah</td>
<td>72</td>
<td>20Kg</td>
</tbody>
</table>
</td>
</tr>
<tr>
<td>2</td>
<td>Thurs</td>
<td>Jonno</td>
<td>£1</td>
</tr>
<tr>
<td>3</td>
<td>Fri</td>
<td>Jonno</td>
<td>£7</td>
</tr>
</table>
Here's a fiddle: http://jsfiddle.net/yuW7f/ - The problem here is that the row containing the inner table, is totally unrelated to the order row
If you are looking for a parent element you can use to group related rows, you can use <tbody> elements. A table can have multiple <tbody> elements:
<table>
<thead>
<tr>
<th>Package number</th>
<th>Date placed</th>
<th>Placed by</th>
<th>Total cost</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Weds</td>
<td>Jonno</td>
<td>£15</td>
</tr>
<tr>
<td colspan="4">
<table>
<thead>
<tr>
<th>Part number</th>
<th>Description</th>
<th>Qty shipped</th>
<th>Weight</th>
</tr>
</thead>
<tbody>
<tr>
<td>18293</td>
<td>Blah blah blah</td>
<td>72</td>
<td>20Kg</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tr>
<td>2</td>
<td>Thurs</td>
<td>Jonno</td>
<td>£1</td>
</tr>
<tr>
<td>3</td>
<td>Fri</td>
<td>Jonno</td>
<td>£7</td>
</tr>
</table>
Whether or not that makes your code more semantically correct is debatable. You could also give your rows classes to indicate whether the row is a summary row or a detail row, or attributes to indicate relationships to other rows. Semantically, it seems fine as it is to me.
By the way, you are missing some <tr> elements. A <tbody>, <thead>, or <tfoot> element does not replace a <tr> element.