Table headers won't align-left

snowtires

Here is a link to the site I'm working on:http://cowalker.com/northhill/index.html

It's still a work in progress, but the table is close to being finished.
The only CSS sheet I am using is jquery.dataTables.

Everything else is working fine, I was able to get my table looking how I wanted, EXCEPT that -for the life of me- I just cannot get the table headers to align to the left. I have tried every single way I know how to do so, and nothing works.

At this point I'm wondering if it's possible for someone to point me to where the headers are set to 'center' in the dataTables CSS sheet, so I can manually change them. It's not the most elegant solution, but I've been trying to figure this out for the last 24 hours and I'd like to be able to move on with the rest of the page!

mRender

element.style {
margin-left: 0px;
width: 800px;
}
.dataTables_wrapper.no-footer div.dataTables_scrollHead table, .dataTables_wrapper.no-footer div.dataTables_scrollBody table {
border-bottom: none;
}
table.dataTable.no-footer {
border-bottom: 1px solid #111111;
}
table.dataTable, table.dataTable th, table.dataTable td {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
table.dataTable {
width: 100%;
margin: 0 auto;
clear: both;
border-collapse: separate;
border-spacing: 0;
}
table[Attributes Style] {
width: 100%;
}
user agent stylesheettable {
white-space: normal;
line-height: normal;
font-weight: normal;
font-size: medium;
font-variant: normal;
font-style: normal;
color: -webkit-text;
text-align: start;

Here are your classes that you're using. You can search for these in the datatable CSS or just set the style align to left when you code in your table.

In your browser you can open the dev console and it'll tell you what you CSS styling is based on what you select.

snowtires

For a second, let's pretend that I'm new to a lot of this. I've gone over everything with the browser inspector and it seems like it's using classes that I just can't find in the datatable CSS. Is there a specific th class I should use when trying to left-justify the table headers?

vogomatix

Datatables is using a .sorting class, so around line 41 of datatables.css add text-align: left

P.S. Removing the right click is a PITA and those practising it should be first against the wall when the revolution comes :-)

snowtires

Ha! I know. One of my clients requested it be added, he checked to see that is was working and now I'm going to remove it, seeing as it takes about half a second to work around it.

That's the exact answer I was looking for, but it didn't work! The table headers DID move a little to the left, but not all the way. Is some of the padding @ line 41 not allowing it, or do you think some other code is conflicting with datatables.css?

vogomatix

Right idea, wrong line -- you have 18px of left/right padding at datatables.css line 23. Changng this may affect the position of the sort up/down arrows so be careful

P.S. Please accept answers as I think they buy support from Allen and I need to ask some serious questions :-)

snowtires

That fixed it! Thank you sooooooo much! Answers accepted, for sure.