CSS Overlaying Table Borders with an Image?

Question

Alright, so I've been handed an html document that is more or less a stack of tables. I'm trying to create a css design layout for the page where the tables are overlayed with a graphic- to give the appearance of rounded corners and a gradiated color. I'm using an external css file, because I don't want to mess too much with the html itself. Here is a copy of a basic form of the html:

<tr><td>Defects</td></tr>

<tr><td>Stuff</td></tr>

<tr><td>More Stuff</td></tr>

</table></td>

In this section, I have a table within a table, and I need to overlay the outter table with an image, while having the inner table on the inside. Anyone have any ideas how to do this? I know tables are a pain, but I cant change that. I just need to work with what I've been given.

Any help is appreciated.

Update:

I tried using it as a bg image, but I was having problems getting it to match up. Plus, my manager wants it to be fluid, so bg image just didn't seem to work. Let me know if I'm incorrect in that.

Defects

Stuff

More Stuff

Tikken · Accepted Answer

The best Technique to create a Fluid Box with Rounded Corners is found at http://www.brugbart.com/Examples/Bordertechnique.html

It works by positioning additional divisions with background images, inside a relatively positioned parent.

Tables are not to be used for layout purposes, its far better to have a few additional divisions, then it is to use tables.

There is no practical solution to your problem, other then redesigning the page-markup.

Anonymous · Answer

You could set a background image for the table, that would seem to be the simplest solution. CSS: background-image:url('image.png');

Edit: I can't think of a way to solve this without messing with the HTML. If you want to use tables you can do it like this: http://ebusiness.hopto.org/ add a square of extra cells around the table.

? · Answer

in case you're utilising abode windows, run Paint.exe from the initiating menu. Run Manually: click commence and decide "Run..." -- enter %SystemRootpercentsystem32mspaint.exe interior the textual content cloth container and decide "ok" OR click commence, decide on All classes, upload-ons, and Paint from that folder. as quickly as in Paint in basic terms upload textual content cloth on your image! different software(s) for greater advantageous textual content cloth: Adobe® Photoshop 6.0 or larger *cautioned* in basic terms append on your question if greater help is needed. *forget approximately appropriate to the Above* Flash? isn't .png a Flash format? in basic terms insert the image in this technique and use it as your historic past image. And upload textual content cloth in the layer. i think of that's what you're asking. Sorry appropriate to the 1st area. + I understand yet have not any clue as to the thank you to help. Sorry ;)

Trending News

CSS Overlaying Table Borders with an Image?

3 Answers