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 and I gave 0 to border size in order to make borders invisible. But it did not work. I looked up the source and non working code was like below (Why giving border="0" did not work?) :

<table width="468" cellspacing="0" cellpadding="0" border="0" style="width: 468px; height: 201px;">
    <tbody>
        <tr>
            <td>
            <h2 class="rtecenter"><a href="http://mydomain.com/url"><strong>Content </strong></a></h2>
            </td>
            <td><img src="/sites/mydomain.com/files/sample.jpg" alt="" /></td>
        </tr>
    </tbody>
</table>

Then I tried:

<table width="468" cellspacing="0" cellpadding="0" style="border: medium hidden ; width: 468px; height: 201px;">

Table borders are now invisible but cell borders are still visible. How can I make it totally invisible. Thanks.

回答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:

table td { border: 0; }

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

回答2:

It should be done like this:

<table width="468" cellspacing="0" cellpadding="0" border="0" style="width: 468px; height: 201px;">
<tbody>
    <tr>
        <td style="border: 0">
        <h2 class="rtecenter"><a href="http://mydomain.com/url"><strong>Content </strong></a></h2>
        </td>
        <td style="border: 0"><img src="/sites/mydomain.com/files/sample.jpg" alt="" /></td>
    </tr>
</tbody>

回答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,
thead th,
tr.even,
tr.odd {
  border: 0;
}

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

回答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:

#exampleclass tbody,
#exampleclass thead, 
#exampleclass th { 
  border: 0; 
}

来源：https://stackoverflow.com/questions/1992767/html-making-table-borders-invisible

标签

html

drupal