I am loading a bootstrap table filled with data on my Web Page. However before I even press the execute button for the API call to be made and fetch my data, the table borders are already visible on the page like this.
The data is being filled into the tbody in js and this is the code present in my HTML. I think i need to remove the table-bordered here and put it somewhere else so it's only loaded once needed.
<div class="fullcycle-table" id="event-table">
<table class="table table-bordered">
<tbody>
</tbody>
</table>
</div>
Thanks so much for any advice on this.
Did you try setting the display to none or block based on whether the required data is fetched?
like :
document.getElementById("someId").style.display = "none";
Related
I need to do assertion with the total of table and to do this when I am writing XPath for total in image table its not working for all the scenario. I know the reason because the table is dynamic so sometimes its have only 1 Image and sometime its have 5 Image so I am having difficulty to wrote x-path which works for all the scenario.
For the attached image I have written : enter image description here
WebElement totalElement = driver.findElement(By.xpath("//*[#id="image_table"]/tbody/tr[5]/td[4]"));
its running fine but when the table size changes. it failed.
for reference the webpage design is as below,
***<table class="table table-bordered table-striped table-hover display" id="image_table">
<tr>
<td colspan="2" class="text-right">Total</td>
<td class="text-center">1,650</td>
<td class="text-center">19,936</td>
<td class="text-center">21,586</td> (trying to write xpath for this total)
</tr>***
Try css:
#image_table>tr>td:last-of-type
It always defines the last element.
Update based on comment. This css selector is more robust:
#image_table tr:last-of-type>td:last-of-type
//td[contains(string(),"Total")]/following-sibling::td[last()]
find td that contains the text total and find the last following td
I'm currently developing an website that provides an overview of components and their version in different locations.
Therefore, the page contains a single <select> and a single <table>. Now I've come to wonder - is there anything that allows me to use my <thead> as the <tfoot as well?
I.e. something like this:
<table>
<thead>
<!-- content -->
</thead>
<tfoot equal-to-head="true"></tfoot>
</table>
or
<table>
<theadfoot>
<!-- this would be equal to using thead and tfoot with the same content -->
</theadfoot>
</table>
Now I'm developing my "website" with Vue.js, so I could potentially write a component that does what I want. However, since I want to reduce code redundancy and not write even more code, that's not really the way to go.
Hence my question - does anybody know of an existing plugin (or even better, a built-in HTML functionality, although I doubt there is one) that one allows to combine <thead> and <tfoot>?
I am trying to implement a generic table widget (using KendoUI) having the data binding done with AngularJS.
The table widget would look something like this in the HTML file (fiddle here: http://jsfiddle.net/mihaichiritescu/ULN36/35/):
<div ng:controller="Tester">
<gridview>
<div data-ng-repeat="man in people">
<gridviewcolumn datasource="name" man="man"></gridviewcolumn>
<gridviewcolumn datasource="age" man="man"></gridviewcolumn>
</div>
</gridview>
</div>
Basically, the table would have an ng-repeat that would repeat through the list of objects, and for each object, using the 'gridviewcolumn', I would add cells under each row.
This way, I am trying to replicate the structure of the KendoUI table, which is something like this:
<div id="grid">
<div class="k-grid-header"></div>
<div class="k-grid-content">
<table>
<colgroup></colgroup>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="k-pager-wrap k-grid-pager"></div>
<div>
So, using the ng-repeat, for each object I will dynamically add a new row, and for each column I will add a new cell on the last added row. Unfortunately, I am not able to manipulate the ng-repeat directive in such a way that I will properly replicate the internal structure of the KendoUI grid view. I am ending up with an internal table structure looking like this:
<div id="grid">
<div data-ng-repeat="man in people" class="ng-scope">
<div datamember="name" man="man" class="ng-binding">name1</div>
<div datamember="age" man="man" class="ng-binding">21</div>
</div>
<div data-ng-repeat="man in people" class="ng-scope">
<div datamember="name" man="man" class="ng-binding">name2</div>
<div datamember="age" man="man" class="ng-binding">25</div>
</div>
<div class="k-grid-header"></div>
<div class="k-grid-content">
<table>
<colgroup></colgroup>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="k-pager-wrap k-grid-pager"></div>
<div>
I would like to somehow place the content of the ng-repeat directive in the body of the table, not above it. Does anyone know how to accomplish this?
I could use jquery to place the content into the cells, but I would still have to remove/hide the ng-repeat directives and their content from above the table body, which I do not know how to do without some ugly hacks.
Also, I am not necessarily bound to KendoUI gridview, but it seems better looking than others, and it probably has similar internal structure to other table widgets, so I would encounter the same issue with other widgets too.
Do you guys have some ideas/advice on how to implement a generic table using AngularJS? I did search for some tables done with AngularJS, but I did not find something that would have good functionality and looks.
I have created two fiddles which would demonstrate how what you are trying to achieve could be done. The first fiddle uses ( http://jsfiddle.net/ganarajpr/FUv9e/2/ ) kendoui's grid ... So its style and display is complete. The only caveat being it wont update if the model changes. This is because kendoui takes the data first and then produces all the UI elements based on the model provided at the beginning.
The alternate is to use Kendo's UI (css) and leave out the grid producing code.
http://jsfiddle.net/ganarajpr/6kdvC/1/
This I believe is closer to what you were looking for. It also demonstrates the use of ng-repeat in a table.
Hope this helps.
Using contenteditable in html5 will easily help you.
I'm using gwt in my web app and I have a html panel which contains a <table>. I've chosen to do this instead of flextable due to some annoying issues when styling it as being unable to do <tbody valign="top">.
I wanted to know if it's possible to wrap a html table
<table>
<thead>
<tr>
<th>Name</th>
<th>Path</th>
<th>Type</th>
</tr>
</thead>
</table>
In a class like Flextable so I can easily control rows and columns through Java?
Something like
Label.wrap("id");
but for tables.
You can also format your data in FlexTable.
You can use flexTable.getRowFormatter(), flexTable.getColumnFormatter() or flexTable.getColumnFormatter().
You can apply alignment, style to rows, columns and cells using above FlexTable attributes.
Please provide a standalone test case if you are facing any problems with FlexTable.
I've got a bit of a complicated set up. I specialise in XSLT which I write for 3rd party system. All CSS looks fine in the browser. Now that system provides a button that converts my generated HTML into MS Word 2003.
However, table borders don't convert as they appear in a Browser. There are lots of tables and they have different borders setup. For example there is one that uses only outside border and no borders inside it. When converting to MS Word, a table appears with ALL the borders in between cells. Which I don't want.
I've tried search the Internet, but didn't come across anything useful. Maybe there are tips or tricks on how to set up tables borders so it's understood properly by MS Word.
The third party said the following: "The system just passes the HTML created through the converter it finds in the installed version of Word".
I would really appreciate any tips and help!
Here is what you need:
<table border=1 cellspacing=0 cellpadding=0
style='border-collapse:collapse;border:none;mso-border-alt:solid windowtext .5pt;'>
...
</table>
I was trying to get a table with only the outer border and no inside ones. I've been trying the following HTML:
<table border="1" frame="border" rules="none" cellpadding="4" cellspacing="0">
However, in the Word that table appears with both outer and inner borders, not just with outer border as I was trying to get it.
Well, that is what border does. Hmm. You say inline CSS doesn't get picked up, so I guess both this:
<table style="border: 1px black solid" ....>
or surrounding the table with a <div>
<div style="border: 1px black solid"><table .....></table></div>
won't work? Those would be the most elegant solutions.
If all that fails, why not put the table into a table?
<table border="1" bordercolor="black" cellspacing="0" cellpadding="0">
<tr><td>
<table .... Your table ........> </table>
</td></tr>
</table>
it's a horrible practice to use in 2010 from a web design point of view, but if it's the only workaround so you can import the page correctly, maybe it's necessary. I'm pretty sure however that some form of CSS must work. Maybe a different notation or something. But I'm no Word HTML expert.
Perhaps if you setup the tables how you would like it in word and then export this as an html file. Then import this back into word to see it works correctly. Then apply the style structure from your html file to your CSS/HTML generation system.