Jack Tripper Posted December 4, 2006 Share Posted December 4, 2006 You can put borders on TABLEs, and you can put borders on TDs. But you can't put them on TRs.So how do you put them on TRs? Link to comment Share on other sites More sharing options...
S@m Posted December 4, 2006 Share Posted December 4, 2006 I would get rid of the table all together.You could put border-left/border-right on your td's. But you are looking at a lot more work than it's worth IMO.What are you trying to do? Do you have an example? Link to comment Share on other sites More sharing options...
jesh Posted December 4, 2006 Share Posted December 4, 2006 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 More sharing options...
Jack Tripper Posted December 5, 2006 Author Share Posted December 5, 2006 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 More sharing options...
jlhaslip Posted December 5, 2006 Share Posted December 5, 2006 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 More sharing options...
Jack Tripper Posted December 5, 2006 Author Share Posted December 5, 2006 Have a look at this page to get a couple of ideas from.Have a look at this page to see how this page doesn't work. (DNS doesn't resolve) Link to comment Share on other sites More sharing options...
jlhaslip Posted December 5, 2006 Share Posted December 5, 2006 Resolves just fine for me with or without the dns page of information with no errors on it. Link to comment Share on other sites More sharing options...
Jack Tripper Posted December 5, 2006 Author Share Posted December 5, 2006 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 More sharing options...
jlhaslip Posted December 5, 2006 Share Posted December 5, 2006 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 More sharing options...
Jack Tripper Posted December 5, 2006 Author Share Posted December 5, 2006 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 More sharing options...
Jack Tripper Posted December 5, 2006 Author Share Posted December 5, 2006 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 More sharing options...
aalbetski Posted December 5, 2006 Share Posted December 5, 2006 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 More sharing options...
jesh Posted December 5, 2006 Share Posted December 5, 2006 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 More sharing options...
Jack Tripper Posted December 5, 2006 Author Share Posted December 5, 2006 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now