I don't want pagination... or a scrollable table. I don't want to specify a height but if you don't it default to something.
I just want my regular old table with sorting options.
(I'm using bootstrap-table)
You can only set the sortable column option and don't set the height option:
<table data-toggle="table"
data-url="your-json-url">
<thead>
<tr>
<th data-field="id" data-sortable="true">ID</th>
<th data-field="name" data-sortable="true">Name</th>
<th data-field="price" data-sortable="true">Price</th>
</tr>
</thead>
</table>
http://jsfiddle.net/wenyi/e3nk137y/3500/
Related
Hi im having a issue with a simple problem. because for some reason i dont find anything wrong with my codes. Seems like my code is not reading my colspan. seems like this problem as been mark as duplicate. but i dont want to specify the width of the table since i want the table to be responsive and i use bootstrap table
<div>
<table class="table table-condensed">
<thead>
<tr class="text-uppercase text-contrail table-dark-head">
<th colspan="3">Spillage</th>
<th>Total</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">Material Cost / Kg</td>
<td>
<input></input>
</td>
<td>
<input></input>
</td>
</tr>
<tr>
<td>Spillage at 0.5%</td>
</tr>
</tbody>
</table>
</div>
i put this code inside my template. please see the image for the result. The Total and Remarks should be on the right side. but it end up with balance width.
I have created a table using component nztable from ``ng-zorro`. That table contains a nested table where I want to load data dynamically(REST service call) on click of the expand icon.
I am able to load the data in the nested table but when I expand next row, it is overriding data in the first row with the new result.
As nested table creation is in the loop(ngfor), I am unable to control the data binding to a specific row.
<nz-table #nestedTable [nzData]="displayData" [nzPageSize]="10">
<thead colspan="5">
<tr>
<th nzWidth="4%"nzShowExpand></th>
<th nzWidth="12%">Id</th>
<th nzWidth="10%">Start Time</th>
<th nzWidth="10%">End Time</th>
<th nzWidth="10%">Status</th>
</tr>
</thead>
<tbody>
<ng-template ngFor let-data [ngForOf]="nestedTable.data">
<tr>
<td nzShowExpand [(nzExpand)]="data.expand" (click)="getDetails(data)"></td>
<td >{{data.Id}}</td>
<td>{{data.startTime}}</td>
<td>{{data.endTime}}</td>
<td>{{data.status}}</td>
</tr>
<tr [nzExpand]="data.expand">
<td><nz-spin *ngIf="isEventLoading"></nz-spin></td>
<td colspan="9">
<nz-table #innerTable [nzData]="innerTableData" nzSize="middle" [nzShowPagination]="false">
<thead>
<tr>
<th>E ID</th>
<th>S ID</th>
<th>E Type</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of innerTable.data">
<td>{{data.eID}}</td>
<td>{{data.sID}}</td>
<td>{{data.eType}}</td>
</tr>
</tbody>
</nz-table>
Try to replace this [nzData]="innerTableData" whith your inner collection like this [nzData]="data.childRows".
We have a data table in a page and we want screen reader to read that as table. NVDA reads it as a data table by default. But JAWS does not seem to be able to identify the table element and reads the text from left to right row by row without indicating it is a table. I tried adding role="grid" and it did not work. I am wondering if I miss something.
The browser is IE11 and JAWS is 17.0.2727
<table tabindex="0" role="grid">
<thead>
<tr>
<th>Date</th>
<th>Time</th>
<th aria-hidden="true"></th>
<th>Rate</th>
<th>Volume</th>
</tr>
</thead>
<tbody>
<tr>
<td>12/19/16</td>
<td>
<span>10:50:09</span> - <span>12/19/16</span> <span>11:05:09</span>
</td>
<td aria-hidden="true"></td>
<td>
<span>54</span><span>mL/hr</span>
</td>
<td>
<span>13.5</span><span>mL</span>
</td>
</tr>
<tr>
<td></td>
<td>
<span>11:05:09</span> - <span>12/19/16</span><span>11:20:09</span>
</td>
<td aria-hidden="true"></td>
<td>
<span>48</span><span>mL/hr</span>
</td>
<td>
<span>12</span><span>mL</span>
</td>
</tr>
</tbody>
</table>
for a datatable:
a caption
th row header and column header cell
Scope or header id attribute to associate cells with the headers in tables
Example:
<table>
<caption>City proper and Metropole area of largest cities in the world</caption>
<tr>
<td> </td>
<th scope="col">Shanghai</th>
<th scope="col">Karachi</th>
<th scope="col">Beijing</th>
</tr>
<tr>
<th scope="row">City proper</th>
<td>24,256,800</td>
<td>23,500,000</td>
<td>21,516,000</td>
</tr>
<tr>
<th scope="row">Metropole area</th>
<td>34,750,000</td>
<td>25,100,000</td>
<td>24,900,000</td>
</tr>
</table>
I have the same issue, that JAWS 2019 is not allowing Cursor navigation in the table cells. Especially cursor up/down in the same column is one of the accessibilty test cases that fails here.
I assume this has something to do with the <thead> and <tbody> elements not expected by the commonly used JAWS table navigation. Only option available is to use TAB/Shift+TAB to step through each cell in a row until the next/previous row can be accessed.
This error happens only in IE but I don't have any idea as I checked "developer tools" and saw nothing special.
When the page is load as the last cell can't hold "Launch Time", the row is expanded. However, if I click on top left "AWS Test VPC"(it sends the same request to web service and loads same data), the table is good now(Pic 2)
I'll attach the code if needed. Just don't know what's wrong
Have you try to add bootstrap class to the th in the table like below example.
<table>
<thead>
<tr>
<th class="col-xs-2">Col 1</th>
<th class="col-xs-1">Col 2</th>
<th class="col-xs-1">Col 3</th>
<th class="col-xs-1">Col 4</th>
<th class="col-xs-2">Col 5</th>
<th class="col-xs-2">Col 6</th>
<th class="col-xs-2">Col 7</th>
<th class="col-xs-1">Col 8</th>
</tr>
</thead>
</table>
This will resize the column to your desired size.
Recently I found a pretty graph when I was browsing the adminskins at ThemeForest and in one of the templates I found a really nice, smooth, clean graph. But I've searching arround but so far without luck finding out which solution is used.
And example can be found at:
http://enstyled.com/adminus/original/page.html
The source of this graph looks like:
<table class="stats bar" cellpadding="0" cellspacing="0" width="100%">
<thead>
<tr>
<td> </td>
<th scope="col">02.09</th>
<th scope="col">03.09</th>
<th scope="col">04.09</th>
<th scope="col">05.09</th>
<th scope="col">06.09</th>
<th scope="col">07.09</th>
<th scope="col">08.09</th>
<th scope="col">09.09</th>
<th scope="col">10.09</th>
<th scope="col">11.09</th>
<th scope="col">12.09</th>
<th scope="col">01.10</th>
<th scope="col">02.10</th>
<th scope="col">03.10</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Page views</th>
<td>1800</td>
<td>900</td>
<td>700</td>
<td>1200</td>
<td>600</td>
<td>2800</td>
<td>3200</td>
<td>500</td>
<td>2200</td>
<td>1000</td>
<td>1200</td>
<td>700</td>
<td>650</td>
<td>800</td>
</tr>
<tr>
<th scope="row">Unique visitors</th>
<td>1600</td>
<td>650</td>
<td>550</td>
<td>900</td>
<td>500</td>
<td>2300</td>
<td>2700</td>
<td>350</td>
<td>1700</td>
<td>600</td>
<td>1000</td>
<td>500</td>
<td>400</td>
<td>700</td>
</tr>
</tbody>
</table>
Can someone please tell me which graphingsolution is used here?
That page is just drawing lines in a canvas tag.
In that page they are using jquery and you can use Flot which is a graph plugin in jquery.