...

View Full Version : How do I create a table with an external border but no internal cell borders?



Sarah-ibeforee
10-26-2010, 01:48 AM
I've only got basic HTML skills (my CSS-fu is nearly non-existent), and I'm stuck working with a VERY old content manager (Web Interprise, or WIP).

I've successfully created tables with alternating fill-colours for table-rows, but I need to create a single outlining border for the table that DOESN'T create borders for each cell.

An example of the tables I'm talking about is here:

http://online.justice.vic.gov.au/CA2574F700805DE7/page/Listing-Bar+Menu+Buttons-Turnaround+times?OpenDocument&1=10-Listing~&2=-Bar+Menu+Buttons~&3=40-Turnaround+times~

I'm planning the table border to be 2px width, in #646464 colour, but can't figure out how to do this!

Help?

DrDOS
10-26-2010, 02:12 AM
Just wrap the table in a div of the same size and give the div a border. I haven't tried it but you might try giving the tbody a border.

SB65
10-26-2010, 07:29 AM
Just applying:

table{border:2px solid #646464}

should do it. No need for an extra div.

Arbitrator
10-26-2010, 08:37 AM
Just applying:

table{border:2px solid #646464}

should do it. No need for an extra div.Generally speaking, this will work. However, if a caption element is used and the author wants to encapsulate the caption within the border, they'll have to resort to either using a wrapper element (as DrDOS suggested) or faking a continuous border.

A continuous border can be faked by setting left and right borders on the table and caption elements, setting a top border on the caption element, and setting a bottom border on the table element. (The last two requirements would be reversed if using a bottom caption via caption-align: bottom.) Unfortunately, this method gets significantly more complicated if you also need to accommodate tables without captions.


Just wrap the table in a div of the same size and give the div a border.The key thing to note here is that the div (or other wrapper) element must be the same size as the table. Since div elements auto-expand and table elements shrink-to-fit, that's not necessarily as easy as it sounds.

If you have a fixed width table, you can match the width of the div element to that of the table element. If your table does not have a fixed width, you may have to use something like div { display: table; } to get matching shrink-to-fit behavior.


I haven't tried it but you might try giving the tbody a border. Per CSS2.1 (http://www.w3.org/Style/css2-updates/css2/tables.html#separated-borders): "Rows, columns, row groups, and column groups cannot have borders (i.e., user agents must ignore the border properties for those elements)."



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum