Jump to content

Table Row Border


Jack Tripper

Recommended Posts

I generally use a border-right and border-bottom for the table cells (td) and then put a border-top and border-left on the table itself. That usually serves my purposes just fine.

Link to comment
Share on other sites

I would get rid of the table all together.What are you trying to do? Do you have an example?
You can see what i'm after here. It's trying to simulate the Vista control panel. ie7 now supports :hover on non-anchor elements, which works well if i'm using a DIV as the container. But i can't get the alignment to work properly with an image there. And even if i do, the header needs a "hanging indent". So the obvious formatting choice is to use a table, but then i can't apply a background and border to a table row.
Link to comment
Share on other sites

Have a look at this page to get a couple of ideas from. All css, using divs. No tables and I think I remember validating it once, but can't recall how recently. Of course, you'll have to make some changes, but the concept is the same.

Link to comment
Share on other sites

Have a look at this page to get a couple of ideas from. All css, using divs. No tables and I think I remember validating it once, but can't recall how recently. Of course, you'll have to make some changes, but the concept is the same.
(The page is working now)That technique doesn't do what i need, which is why i had to move to a table.Try resizing the browser horizontally, the "Content Here" text will begin to wrap underneath the image, where i want it to stay aligned.
Link to comment
Share on other sites

Of course, you'll have to make some changes, but the concept is the same.
Change the margin from 20% to a number of ems or pixels and the behaviour changes.I will not code the page for you. Take the time to understand the elements involved and learn to use them to achieve your results. Drop the parts you don't want. Add a Hover feature. Do with it as you will. Just don't wait for someone to come along and code the page for you. Tables are not the answer for this page and you know it. Well, not without <br /> tags and spacer gifs. :)
Link to comment
Share on other sites

Change the margin from 20% to a number of ems or pixels and the behaviour changes.
i don't want to add more white space just to account for how narrow the browser could become, i want the layout engine to do it for real. Margin is just a super-hack which can be made to fail; and fails to achieve what i want visually.
Tables are not the answer for this page and you know it.
i think tables are the only answer for this example. i will never be able to achieve my original design goal of having a single border around the entire thing, but the TR:hover changing it to a blueish background will be close enough. i would, of course, rather not use a table for page layout; but i can't figure out the valid "css" way to do layout.
Well, not without <br /> tags and spacer gifs.
That's worse than using tables, and i'll never stoop to that level.
Link to comment
Share on other sites

Take the time to understand the elements involved and learn to use them to achieve your results. Drop the parts you don't want. Add a Hover feature. Do with it as you will.
i think you're under the impression that i didn't do that already. i picked your page apart, figured out the difference between what i was doing and what you had (you wrap the image in a DIV and float it left). That looked promising, until i realize that as soon as the wrapped content is taller than the image: it wraps under the floated DIV. This is exactly what a float is supposed to do; it's also exactly what i don't want to do.i also tried doing a relative left position of +48px to the "content" and relation left position of -48px for the image. But this only changes where the image and content appear, the wrapping under the image still happens.i also tried two side-by-side spans inside a containing div, but then my content contains a DIV, and CSS forbids having a DIV inside a SPAN, for reasons beyond understanding.The point is i could have posted all my failed approaches, but that doesn't help answer my original question. My original question was how to put a border around a table row. If the answer is "you can't", then that's fine. But don't be afraid of the answer.Alternativly, i have tried to make it work without tables. If anyone cares to point out a non-table based approach that acheives the look i'm going for - feel free. But please don't say, "there is a technique that isn't what you want, but i won't tell you want it is."
Link to comment
Share on other sites

you could do something like this:

<style>	td.first	{		border-width:1px 0px 1px 1px;		border-color:red;		border-style:solid;	}	td.last	{		border-width:1px 1px 1px 0px;		border-color:red;		border-style:solid;	}	td.middle	{		border-width:1px 0px;		border-color:red;		border-style:solid;	}</style><table border="0" cellspacing="0" >	<tr><td>data</td><td>data</td><td>data</td><td>data</td></tr>	<tr><td class="first">data</td><td class="middle">data</td><td class="middle">data</td><td  class="last">data</td></tr>	<tr><td>data</td><td>data</td><td>data</td><td>data</td></tr>	<tr><td>data</td><td>data</td><td>data</td><td>data</td></tr>	<tr><td>data</td><td>data</td><td>data</td><td>data</td></tr></table>

Link to comment
Share on other sites

Or this:

<html><head><style type="text/css">.left, .right { border-style: solid; border-color: red; border-width: 1px 0px 1px 0px; }.right { border-right-width: 1px; }.left { border-left-width: 1px; }</style></head><body><table cellspacing="0" cellpadding="0"><tr><td class="left right">test</td><td class="right">test</td><td class="right">test</td><td class="right">test</td></tr><tr><td>test</td><td>test</td><td>test</td><td>test</td></tr><tr><td>test</td><td>test</td><td>test</td><td>test</td></tr></table></body></html>

Link to comment
Share on other sites

you could do something like this:Or this:
Thank you both.To sum up for those googling:Q. How do you put a border on a table row?A. You can't.The best workaround is to have borders on every cell, designed to simulate a border around the entire row. Alternativly, every row in your table can contain a table, and you put your border around either the outer table's cell, or the whole inner table.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...