Question about styling
Question about styling
I'm working on an application that uses DataTables 1.9.0. All the datatables are tied to a specific style, but I don't where they are kept or how they are applied.
I tried changing many css files in different places, but in the end none of the changes had any effect.
I tried searching the application for dataTables..js and dataTables..css and came up with nothing.
Below is a screen shot of a typical data table. As you can see it is heavily styled. Thank you.
This question has accepted answers - jump to:
Answers
DataTables 1.9 was EOL back in 2014. You might want to update
However, regardless of the version, the answer would be the same. Right click on one of the elements in the table and select "Inspect". The browser's inspector will open and show you styling information, including details about where the style is being defined.
Allan
Thanks for responding Allan. This application's styling is too complex for me, no matter what I do I cannot change anything style related in the data table. The following is a screen shot when I do an inspection.
Changing the inline style of "line-height" does nothing, which confuses me because I thought this would overwrite "all".
There is a "datatable.css" file, which only seems to contain paging styles. Not what I'm looking for.
When I search for ".dataTable" under web-app I get 2000+ results...too many.
When I create a normal table (html tags only), I have full access to styling, be it embedded or inline styles.
Possibly you need to add
!important
?Here is a running example but its using Datatables 2.0:
https://live.datatables.net/royuxucu/1/edit
As Allan mentioned right click on the
table
element and select inspect. There you can see the styles applied to the table elements. You may need to define the CSS in thestyle
sections and use more specific selectors to override the default Datatables styles or possibly use!important
to override. Its hard to say without seeing what you have. Please post a link to your page or a test case showing the issues you are having with overriding the styles. And provide specifics of what you want to change.https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
The default data table styles have already been overridden.
I'm trying to find out how...and/or where.
The inspection has already been done (see attached image from last post). The styles are shown, but there is only style="dataTable", which gets me 2000 search results.
If you can give me a link to the page, I might be able to tell you where the styles are being overwritten. An image though, is impossible to debug I'm afraid.
Allan
Click on the
styles
tab on the right side panel. This allows you to see what is applied and what is overridden. For example:Kevin
Thanks Allan. I hope this is at least part of what you asked me to provide. I can't give you a link because the application is internal (you would need an external account).
Sorry about the wonky spacing.
FROM INSPECTION - TABLE ELEMENT
FROM INSPECTION - SCRIPT TAGS
Kevin, not sure what you wanted here. Did you want the inspected styles for dataTable.css?
This is most of the relevant html (removed headers and stuff like that)
In the screenshot you posted go to the
Styles
tab. This will show the styles the browser has applied to the elements your are inspecting. In the screenshot I posts you will see thewidth: 100%
from the datatables.css is crossed out and not applied due to thewidth: 100%
applied by the element at the top of the list.No.
Kevin
I think this is what you wanted Kevin. I have the table element highlighted.
These are two separate images.
Thats what I suggested you look at. Looks like you have
style="line-height: 30px;"
applied to thetable
tag. As Allan said its nearly impossible to debug styling issues without seeing the page showing the issue. Please post a test case showing the issue you are having with details of what you are expecting.https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
I built a base 1.9 example for you:
https://live.datatables.net/qikavaxi/1/edit
It has
style="line-height: 10px;"
on thetable
tag and does work. We will need to see the issue to help debug. Update the example I provided if you want.Kevin
Kevin, there are a few problems with using a test case:
Thank you.
Unfortunately we don't know either without seeing the issue. I showed an example of Datatables 1.9 where the style does apply properly. Investigation via the inspect tool is needed. You might need to inspect the
tr
andtd
elements to see if something there is causing the issue.Kevin
Just as an aside (it might have nothing to do with data tables) there is a reference to admin/ in several elements. Do you have any idea what this represents? Thank you.
Click it. It should take you to the source. It looks like you are loading a page called "admin/" and the styles are inline. I'd guess.
Here is where things get weird. This is an Eclipse application, so there is an "admin" folder {under views} which contains a file called admin.jsp. The problem is, there is no styling for "td" in admin.jsp.
And to add to my confusion, I searched for "height: 15px;" in the code base and I came up with a few matches, but nothing relevant to "td" at all.
There is also a
td
andth
setting forline-height: 24px
in themain.css
.Possibly all you need to do to override these settings is to create a CSS for
-tad td
and, if needed,th
in thestyle
section of the HTML file with your Datatable. For example:Kevin
Likely it is a server-side built file. If you click on the link in your inspector as I suggested, I would have expected the browser to take you to the rendered source. How the file is rendered / constructed is entirely a matter for the server-side and without seeing it, we can't possibly know how it is done. Actually, since I don't know JSP, even seeing it I might not know!
Allan
Thanks Allan that's good information. It's possible there is some library-based utility working on top of data tables. Thank you and Kevin for all your help, I'll keep investigating.