I would like to change the default look of the standard HTML tables used on my site, and haven't found any methods for this.

Basically I want to add some borders to the tables, some cell padding, and possibly add column headers. I would like this to apply to the whole site, including table lists generated by the Views module, if possible. I'm using a modified version of the Combustion theme (PHPTemplate).

Any suggestions/tips?

Comments

budda’s picture

If you want to apply the same theme to all tables then in your styles.css just do a

table {
border: 1px solid black;
}

However, if you'd like to be more granular, as I do, well it's not as easy because system generated HTML tables rarely have a CSS class attribute defined for them in Drupal Core. Annoying, but nothing you can do with it as far as I know.

--
Ixis (UK) providing Drupal consultancy and Drupal theme design.

Scourge’s picture

Thanks, that almost works. Of course it puts borders around every region on every page, since they're just tables anyway. Didn't think about that.

If anyone finds a way to only apply it to tables inside page content, let me know. I'll keep poking at it.

budda’s picture

Well most page content, thats created by users, is inside of a

- so you can restrict your CSS to something like:
.node table {
  border: 1px solid black;
}
Scourge’s picture

Right on, that did the trick. Also did the same for .view to work on view pages. Thanks!

mboy-1’s picture

All the table in drupal site is not 100%, it is content related, say, the longer the title, the wider the width of the table. I want all the table is 100% width regardless the content. How can I do that?

I tried to put an

table { width :100% }

in style.css, no success.

searched google and drupal forum about 4 hours, still can not find a solution.

Thanks a lot!

budda’s picture

table { width :100%; }

...should work. Note the ';' at the end.

--
Ixis (UK) providing Drupal consultancy and Drupal theme design.