How do you set borders around the header row cells

tomcat14

I have looked at a lot of the examples and none of the ones I looked at have borders around the header row. It is possible to have a border around the header row? I am using cell-border and that works for the body but does nothing with the header.

tangerine

Your browser's "Inspect element" or similar tool will tell you what style(s) apply to the table header. Either amend DataTables' own CSS file or override it with your own file.

tomcat14

Thanks for the reply but that is not exactly what I was asking. I was asking if there is a function within DataTables that does that similar to cell-border does for the body of the table.

tangerine

cell-border is a CSS class, not a function.
https://datatables.net/manual/styling/classes

allan

It will also depend upon what styling library you are using. cell-border is a class provided by the DataTables styling, but other styling libraries such as Bootstrap and Foundation might have their own classes for that kind of thing.

Allan

tomcat14

The only styling I am using is DataTables. I am currently using cell-border and that works great for the <tbody> section but does nothing for the <thead> section. Is there a setting that will give me the same thing for the <thead> section?

tangerine

I already gave you the link to DataTables' available CSS classes. Either amend one of those styles or apply your own CSS class.

tomcat14

tangerine,

As I mentioned, I am using one of those. I prefer not to mess with the styles that come with DataTables in case they get changed and a new file overlays it.

I also told you that those styles do not accomplish what I am attempting to do. If you don't have any other assistance than what you already said, why are you repeating yourself? If you know exactly which style applies to that section when why don't you give me the code that will make it work?

I am not a css developer or a web designer. I get by with html and what little JavaScript I know..If I knew how to do it, why would I be asking the question here?

tangerine

I prefer not to mess with the styles that come with DataTables

So you should provide your own CSS styling.

why are you repeating yourself?

You are repeating the question after being given the answer. What part of my first post don't you understand?

If you know exactly which style applies to that section ....

I don't. Find out for yourself using your browser's "Inspect element" or similar tool. There I go, repeating myself again...

kthorngren

I'm not much for CSS either but maybe this example has what you are looking for:
http://live.datatables.net/yemituwa/1/edit

I just took what was in cell-border and created a CSS for TH specifically. Here is what I used:

th {
  border-top: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
}

th:first-child {
  border-left: 1px solid #dddddd;
}

Kevin

allan

Yes, Kevin is spot on. The provided DataTables stylesheet doesn't come with built in styles that will put borders around the cells in the headers. A little custom CSS is all that is required.

More generally, and the point tangerine was making, the DataTables stylesheets can't provide for every possible style, in the same way that Bootstrap, Foundation, etc, can't. You are encouraged to use your own CSS to style the table to suit your needs.

Allan

tomcat14

Kevin,

Thank you very much. That is exactly what I needed. I need to take more time and learn css but it seems there is so much other stuff that I also need to accomplish that I keep putting it off.

Allen,

Thank you for validating what was needed. I see you are the site admin here and I commend the work you do. It seems you are the primary person responding to a lot of individuals questions. I am not sure how you keep up with it all, but you are doing a great job and I appreciate the tool.