Html Making Table Borders Invisible

I use Drupal 6 with theme summertime. Also I use FCKeditor. In order to align content I wanted to create a table with invisible borders. First I tried FCKEditor table properties an

Solution 1:

The border attribute should be specified on the cell level, eg <td style="border: 0;">. Of course, this should be made in CSS using:

tabletd { border: 0; }

But I see that in your case that might be difficult.

Solution 2:

It should be done like this:

<tablewidth="468"cellspacing="0"cellpadding="0"border="0"style="width: 468px; height: 201px;"><tbody><tr><tdstyle="border: 0"><h2class="rtecenter"><ahref="http://mydomain.com/url"><strong>Content </strong></a></h2></td><tdstyle="border: 0"><imgsrc="/sites/mydomain.com/files/sample.jpg"alt="" /></td></tr></tbody>

Solution 3:

There are probably borders set in the CSS. Drupal core's system.css sets some borders on table headers and body that can be a pain to override.

You can add a custom CSS file to the theme so you avoid editing its CSS directly. Simply add the path to your added .css file in the theme's .info file.

Then try adding:

tbody,
thead,
theadth,
tr.even,
tr.odd {
  border: 0;
}

Don't forget to turn off CSS aggregation and clear your cache.

Solution 4:

I just happened upon this while searching for something else. This is old, but thought I'd comment anyway. Someone else might find it helpful.

Rather than do a few of the things mentioned above, it would be simpler to just add a specific ID or CLASS name to the table itself, then you could specify settings just for that table in the CSS.

HTML:

<table .... id="exampleclass">

CSS:

#exampleclasstbody,
#exampleclassthead, 
#exampleclassth { 
  border: 0; 
}