Styling HTML table to look like jqxDataTable

[mihaisingerParticipant]

I’ve built a pretty complex web application based entirely on jqWidgets, but on this one page I need two tables – one can be, and is, a jqxDataTable, but the other must have more flexibility than the jxqDataTable or jqxGrid can offer. Specifically, I need a column with two drop downs and a text field in each cell, another column with two drop downs in each cell, and all these controls must be permanently available at one mouse click, and not only in edit mode.
This can be easily achieved with a simple HTML table and a bit of JavaScript, but then I need this table to look like the rest of the application. How can I style the HTML table to look like the other table on the same page, which is a jqxDataTable? At least the colors (header and content, for- and background), font styles and rounded corners. I do not need a pager or scroll bar.
Thank you.

Regards
Mihai

[DimitarParticipant]

Hello Mihai,

Please check out the jqxDataTable Styling and Appearance guide. You can apply the classes described there to various parts of your HTML table.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[mihaisingerParticipant]

Well, I already tried that, and it pretty much led me nowhere… I could set the header style, but using the jq-rc-all class on the table didn’t set the rounded corners, and then which class should I use for the table borders color?
Thanks.
Mihai

[DimitarParticipant]

Hi Mihai,

We suggest you apply all classes as they are. If you wish, you can open the file jqx.base.css and see what styles are defined by which class.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts