I am using datatables and am wondering if there is an option to make the header wrap.
i use compact display
the problem is, some javascript sets the width of the table header cells to a fix number of pixels.
so i want:
fees
covered
name
shown
amount
shown
in the headers
EDIT: the problem with adding a <br/> tag is that the width of the columns stay exactly the same, but i want them to become smaller, less width, see here:
Use line break <br> in the table header:
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>fees<br>covered</th>
<th>name<br>shown</th>
<th>amount<br>shown</th>
</tr>
</thead>
</table>
See this jsFiddle for code and demonstration.
Depending on how your table is initialised then you could use an adaption of the title key within a columns definition:
"title": "Your Title".split(" ").join("<br/>"), // Your<br/>Title
Example JSFiddle here.
Related
I have this fiddle and you can see that when you input any value for price field , It's popup tip is not positioned on the text because its data type is number as when you input values for Names.
https://jsfiddle.net/6da007fm/21/
HTML
<table data-toggle="table"
data-editable-emptytext="This field is empty"
data-id-field="id"
data-url="/gh/get/response.json/wenzhixin/bootstrap-table/tree/master/docs/data/data2/">
<thead>
<tr>
<th data-field="name" data-editable="true" >Name</th>
<th data-field="price" data-editable="true" data-editable-emptytext="For free." data-editable-type="number" data-editable-placeholder="Enter a Number">Price</th>
JS
$.fn.editable.defaults.mode = 'popup';
Is it a normal behavior or there is any workaround to this. I am using this in my project web page and it has 5 columns in one row and is not looking very neat because of this.
-Thanks
you just need to override popovers core css
.popover{
left:190px!important
}
here is your updated fiddle Working demo
I have a set of survey questions each of which I am arranging in a single row table. I want the first entry to serve as a prompt and have been using <th> for that cell, as in:
<table style='width:100% table-layout:fixed;border-collapse: collapse;'>
<tr>
<th style='width:40%'>
<b>How long were you on active surveillance?</b>
</th>
<td style='width:10%;'>f3_watchtime_num</td>
<td style='width:5%'></td>
<td style='width:50%;>f3_watchtime</td>
</tr>
</table>
It seems to work OK but I have some reservations and questions about mixing <th> and <td> cells in a single <tr>:
Is this HTML5 Standards compliant? (Is there a W3C document that allows or prohibits this practice?)
Are there any downsides to this practice?
Thanks,
David
1. Is this HTML5 Standards compliant? (Is there a W3C document that allows or prohibits this practice?)
W3C tr reference says it's content model can contain:
Content Model:
Zero or more td, th, and script-supporting elements
https://www.w3.org/TR/html5/tabular-data.html#the-tr-element
While your usage isn't very common, there isn't anything in W3C that forbids it.
2. Are there any downsides to this practice?
As for the use of th and td together, its accepted by W3C provided they are children of a tr element.
However, if you are displaying tabular data, (i.e. your survey results are data) using a table is fine. If you are using the table for layout purposes, you should use a CSS based layout instead.
The recommendation of W3C is avoid to use tables for layouts. It is valid only for displaying ordered data, but that's not your case. You can achieve the same with <div> and will be semantically correct.
Other thing is your question about mixing. I think if you don't write <tbody> and <thead> tags, you don't separate the content for the headers in the table, so that's correct because there aren't <td> tags inside a <thead> and there aren't <th> tags inside a <tbody>.
However, it's better practice if you don't use tables for this purpose.
I need to make a scrollable table with fixed header row and header column in an phonegap app using html, javascript and css.
I have studied a number of existing questions, and based on the below solution (http://jsbin.com/bojacelaba/1/edit?html,css,output),
I have prepared the following file:
http://www.ksutopia.com/a2.html
This file has a fixed row header and a scrollbar, and it has rendered properly in the firefox browser/android emulator. However, if I run this in the actual device (Samsung Note 1 with android 4.1.2), the row header is blanked.
http://www.ksutopia.com/screenshot.png
Anyone can give me any hint on this would be deeply appreciated. I have read a lot of answer to use iscroll. I try to look at it but there is no example of "fixed header with scrollbar". It would be grateful if someone can point to an appropriate example / tutorial.
Thanks a lot in advance.
u have to use jquery.
for example,
**
<table id="tableId">
<thead>
<th>Column Header 01</th>
<th>Column Header 02</th>
<th>Column Header 03</th>
</thead>
<tbody>
<tr>
<td>Column Content</td>
<td>Column Content</td>
<td>Column Content</td>
</tr>
</tbody>
</table>
<script>
jQuery(document).ready(function($)
{
$('#tableId').tableScroll({height:600});
});
</script>
</body>
**
After a couple days of research, I finally find out a tutorial that suit my purpose:
http://tympanus.net/Tutorials/StickyTableHeaders/
hope it would suit your needs as well.
I have a table with dynamic database (php and mysql loop) with image and text (name of image).
Within the TD I use float left to the image to make the text to the right, and also using margin-right to image. But now I want the text align to the bottom of TD. How to make the code?
<table>
<tr>
<td>
<img style="float:left; margin-right:12px;" src="pic.png">
text text... .( vertical-align:bottom )
</td>
</tr>
</table>
have you tried this
<td valign="bottom">sumthere here</td>
I usually works for me.. also try to avoid unnecessary floats and margins. If you place first, your image will always be placed before text.
Hope it help :)
I need to add pagination feature to few of my DataGrids
and I am just moving ahead step by step.
To begin with I tried setting 'rowsPerPage' attribute
of DataGrid to some value, say 5. But it has no impact on the
displayed grid. I mean number of rows displayed are more than
the value set to 'rowsPerPage'.
<table dojoType="dojox.grid.DataGrid" store="tags" rowsPerPage =3
style="width: 100%; height: 500px;">
<thead>
<tr>
<th width="150px" field="dept">Namey</th>
<th width="150px" field="name">Depty</th>
</tr>
</thead>
</table>
Please tell me how to show only 3 results only per time .
I have been searching web since morning but to no avail.
Any inputs will be highly appreciated.
Please help .
The rowsPerPage property actually doesn't control the number of items show in the grid. It controls the number of rows loaded as you scroll through the grid. Default is 25, and that's usually pretty good.
What you want to do is set the autoHeight property on the grid to the number of rows you want to show. It's kind of an interesting property because it can be set to "true" which will expand your grid to show all data rows, or it can be set to a number (like 3) and then it will only show that many rows, and create a scroller for your grid if your data store has more than that number of rows.
(I know this is probably a late answer, but found this while researching another grid question, and thought I'd throw it out there.)