I want to create a table in html with 2 columns and 3 rows but it should resize if we drag mouse from its corner.
Use colResizable, a jquery plugin to resize html tables and columns
example html
<table id="sample">
<tr> <td>cell</td> <td>cell</td> <td>cell</td> </tr>
</table>
example js:
$("#sample").colResizable({liveDrag:true});
use jQuery UI, which has a resizable function to make a HTML element, e.g. a table, resizable.
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 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.
I am finding it hard to create a relative xpath for a check box . I have attached the code snippet below. Firebug gives me an absolute xpath as:
html/body/div[6]/div[2]/form/table[1]/tbody/tr[3]/td[1]/input[1].
But the form changes if there is separate entry and then absolute xpath changes to:
html/body/div[6]/div[2]/form/table[1]/tbody/tr[4]/td[1]/input[1]
(or tr[5] or any number). I tried to use the relative xpath but the firebug shows the xpath in red colour (so it is invalid)-
.//*[#id='responderSelection'155939'1']
Please help.
<form id="pollGroupForm" method="post" action="/consoleapp/newSurvey.jspx">
<div class="filter"/>
<table class="dataTable">
<tbody>
<tr>
<tr class="alternateRow">
<tr>
<td>
<input id="responderSelection'155939'1" type="checkbox" value="true" name="responderSelection['155939']"/>
<input type="hidden" value="on" name="_responderSelection['155939']"/>
</td>
<td>twoway_2</td>
<td> 26161 </td>
<td>
</tr>
</tbody>
</table>
<table>
</form>
</div>
</div>
<div id="footer">
Would you try a partial search using cssSelector? I assume the numbers with the id is dynamic so the following cssSelector let's you find the checkbox with the partial match of the id(^ means starts with)
[id^='responderSelection']
If you really want xpath then contains() is the equivalence to the css above
//input[contains(#id,'responderSelection')]
There are several different ways to do this, depending on the exact conditions.
If there is only on checkbox in that table, then you can focus on that: //table//input[#type='checkbox'].
Possibly safer selector would be to look for a checkbox in your form, as that has a fixed id attribute: //form[#id='pollGroupForm']//input[#type='checkbox']. If you can, always start from fixed ids.
If you want to get the Xpath of an element which ID is changing dynamically, there is a little trick: simply inspect the element with Firebug, delete its ID by double clicking on it (delete the whole id parameter, or change the value to "")and you will get the correct Xpath.
For example if you have the following structure:
<div id="fix-id">
<div id="dynamic-id-1214151"></div>
</div>
You will get //*[#id="fix-id"]/div[1] instead of //*[#id="dynamic-id-1214151"].
<table>
<tr>
<td/>
<td/>
<td/>
</tr>
<tr>
<td/>
<td/>
<td/>
</tr>
.....
</table>
This the table structure I have and I want to provide multi select feature on this table. User should be able to select multiple TR elements - very similar to tag.
But I cannot use because I want to add multiple span elements in each td in the above structure.
I thought of having an event capture on TR. But I am totally at loss as to how to proceed. Any suggestions?
Some of the other things I tried include adding a DIV directly inside TR - but that is incorrect. And adding a div inside the TD is of no use to me in this case.
Try SlickGrid. It pretty much gives you that out of the box. It uses div instead of table, though.
https://github.com/mleibman/SlickGrid
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 :)