I am creating a table using div tags like the code below. Is there a way to make borders so that they dont stretch to the corners of the element ? In other words, currently, my column borders reach from the top of row 1 and to the bottom of row 3. Is there a way to render the column border so that begins in the middle of row 1 and ends in the middle of row 3?
code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Test
What you can do is make the container smaller in height and pull back the first row and last on using a negative margin.
There's no straightforward way to do this, and you're probably better off using images
There are a couple of ways of going about this. You can either use background images and the sliding doors effect to fake it (this is my preferred solution).
Or you can add an absolute positioned empty div with the border-styles applied, as suggested in this forum posting.
The main pro of the first is that it'll work across most browsers with little tweaking and incurs no extra mark-up. The main con is obviously the extra download artifacts.
These pros and cons can be reversed for the extra div method.
What about using an
tag and styling it with... margin:8px auto 0px auto; width:80%;
That should put it at the bottom, centred and 10% in from left and right.