[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

CSS for TR/TBODY border/outline

Posted on 2009-04-01
8
Medium Priority
?
3,855 Views
Last Modified: 2013-12-08
I'm trying use CSS to put a border around multiple all columns in a table row.  Neither browser allows use of the 'border' property on TR or TBODY, and while I can use 'outline' in Firefox just fine, Internet Explorer doesn't seem to support it.

I would just put a partial border on each of the cells, but I'm already using border on them to show a different color in a block uniformly inset from the cell boundary regardless of the block content.  And a div wrapping the content of the cell won't work either because neither browser seems to honor 'height' for divs (or anything but images, for that matter).

I only found the 'outline' property by seeing how Firefox accomplishes "Outline Table Cells" with the Web Developer Toolbar.  I was hoping that the IE Developer Toolbar "Select Element by Click" function would also use CSS, but this does not seem to be the case.

I've spent hours banging my head against this, and while I'd be irritated by the lost time, I'd love to find out that there really is a way to do this.

Thanks for any suggestions!
0
Comment
Question by:Mykaella
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 2
8 Comments
 
LVL 14

Expert Comment

by:RickEpnet
ID: 24045930
Here is a test page that demonstrates that.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	font-family: Arial, Helvetica, sans-serif;
}
td.insidetb {
	border-right-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: none;
	border-right-color: #666666;
	border-left-color: #666666;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-color: #666666;
	border-bottom-color: #666666;
}
td.tltb {
	border-right-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: solid;
	border-right-color: #666666;
	border-left-color: #666666;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-color: #666666;
	border-bottom-color: #666666;
}
td.toptb {
	border-right-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-right-color: #666666;
	border-left-color: #666666;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-color: #666666;
	border-bottom-color: #666666;
}
td.trtb {
	border-right-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: none;
	border-left-style: none;
	border-right-color: #666666;
	border-left-color: #666666;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-color: #666666;
	border-bottom-color: #666666;
}
td.bottb {
	border-right-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-right-color: #666666;
	border-left-color: #666666;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-color: #666666;
	border-bottom-color: #666666;
}
td.brtb {
	border-right-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: none;
	border-right-color: #666666;
	border-left-color: #666666;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-color: #666666;
	border-bottom-color: #666666;
}
td.bltb {
	border-right-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #666666;
	border-left-color: #666666;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-color: #666666;
	border-bottom-color: #666666;
}
td.lefttb {
	border-right-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: solid;
	border-right-color: #666666;
	border-left-color: #666666;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-color: #666666;
	border-bottom-color: #666666;
}
td.righttb {
	border-right-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: none;
	border-left-style: none;
	border-right-color: #666666;
	border-left-color: #666666;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-color: #666666;
	border-bottom-color: #666666;
}
-->
</style>
</head>
 
<body>
<p>&nbsp;</p>
<table width="500" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="tltb">&nbsp;</td>
    <td class="toptb">&nbsp;</td>
    <td class="trtb">&nbsp;</td>
  </tr>
  <tr>
    <td class="lefttb">&nbsp;</td>
    <td class="toptb">&nbsp;</td>
    <td class="righttb">&nbsp;</td>
  </tr>
  <tr>
    <td class="lefttb">&nbsp;</td>
    <td class="bottb">&nbsp;</td>
    <td class="righttb">&nbsp;</td>
  </tr>
  <tr>
    <td class="lefttb">&nbsp;</td>
    <td>&nbsp;</td>
    <td class="righttb">&nbsp;</td>
  </tr>
  <tr>
    <td class="bltb">&nbsp;</td>
    <td class="bottb">&nbsp;</td>
    <td class="brtb">&nbsp;</td>
  </tr>
</table>
</body>
</html>

Open in new window

0
 

Author Comment

by:Mykaella
ID: 24046197
I may be missing something, but that doesn't look at all like what I'm aiming for.  So here's an example.

Note that the hard breaks after the text on the right side of the "Good Sample" are ONLY to make the display illustrate what I want.  Padding with additional line breaks is NOT a viable solution, as the number of lines on the left side is not static or predictable.
<html>
<head>
  <style type="text/css">
    .fieldset td.left {
      border: 2px groove #cccccc;
      border-right: 0;
      padding: 15px 0px 10px 20px;
    }
    .fieldset td.center {
      border: 2px groove #cccccc;
      border-left: 0;
      border-right: 0;
      padding: 15px 0px 10px 0px;
    }
    .fieldset td.right {
      border: 2px groove #cccccc;
      border-left: 0;
      padding: 15px 10px 10px 0px;
    }
    span.legend {
      background-color: white;
      position: relative;
      left: 10px;
      top: 8px;
      padding: 0px 2px;
    }
    div.grey {
      background-color: #EEEEEE;
      height: 100%;
    }
    tr.fieldset2 {
      outline: 2px groove #cccccc;
    }
    .fieldset2 td.left {
      border-color: #ffffff;
      border-style: solid;
      border-width: 14px 0px 9px 19px;
    }
    .fieldset2 td.center {
      border-color: #ffffff;
      border-style: solid;
      border-width: 14px 0px 9px 0px;
    }
    .fieldset2 td.right {
      border-color: #ffffff;
      border-style: solid;
      border-width: 14px 9px 9px 0px;
      background-color: #eeeeee;
    }
  </style>
</head>
<body>
  <table border=0 cellpadding=0 cellspacing=0 style="margin-left: 3px; width: 700px;">
    <tr>
      <td>
        <span class="legend">Good Sample</span>
      </td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr class="fieldset">
      <td class="left" valign="top">
        <div>Some<br>random<br>data.</div>
      </td>
      <td class="center">&nbsp;</td>
      <td class="right" valign="top">
        <div class="grey">This is what I want.<br>&nbsp;<br>&nbsp;</div>
      </td>
    </tr>
    <tr>
      <td>
        <span class="legend">Bad Sample</span>
      </td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr class="fieldset">
      <td class="left" valign="top">
        <div>Some<br>more<br>random<br>data.</div>
      </td>
      <td class="center">&nbsp;</td>
      <td class="right" valign="top">
        <div class="grey">This is what I get.</div>
      </td>
    </tr>
    <tr>
      <td>
        <span class="legend">Alternate Solution</span>
      </td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr class="fieldset2">
      <td class="left" valign="top">This<br>works<br>in<br>Firefox...</td>
      <td class="center">&nbsp;</td>
      <td class="right" valign="top">...but not in IE</td>
    </tr>
  </table>
</body>
</html>

Open in new window

0
 
LVL 13

Expert Comment

by:qwerty021600
ID: 24046622
You can define it like this also.. which works in all the browsers
<fieldset>
        <legend> Good Sample  </legend>
        <table cellpadding="0" cellspacing="0" border="0"  width="100%">
        <tr>
        <td>
        Some<br>random<br>data.</td>
      <td class="right"><div class="grey">This is what I want.<br>&nbsp;<br>&nbsp;</div></td>
      </tr>
      </table>
        </fieldset>
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 14

Expert Comment

by:RickEpnet
ID: 24046636
You are talking more row height than border? I do not think I am understanding what you want...
0
 

Author Comment

by:Mykaella
ID: 24046685
qwerty:  Putting them in separate tables won't work because I need the two sides to be the same width across multiple rows without forcing a static width.

RickEpnet: My primary goal is to make the grey shading on the right side fill (with a white border) the height of the row.  I initially tried to use a div with height=100%, but that didn't work in either FF or IE.  When I discovered that 'outline' worked in FF, I was aggravated to find that it didn't work in IE.

I figure I'm closer to a solution with the border idea, so I chose to ask about that.  But I'll definitely take any CSS solution that works in at least FF and IE.
0
 
LVL 13

Expert Comment

by:qwerty021600
ID: 24046705
Either you can fix the width of the Table and the TD's which will be consistent in all the Fieldset.
Also you can give compatibility code for classes to work for both IE and FF.
0
 
LVL 14

Expert Comment

by:RickEpnet
ID: 24046711
What are you using for a dynamic web site? PHP, CF, ASP.NET???
0
 

Accepted Solution

by:
Mykaella earned 0 total points
ID: 24055893
It finally dawned on me what I had to do -- make the white padding be separate cells on the top, bottom, left, and right of the "real" cells with the data in them.  The HTML is pretty atrocious, but at least I got it to do what I wanted.  :)
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Citrix XenApp, Internet Explorer 11 set to Enterprise Mode and using central hosted sites.xml file.
Today, still in the boom of Apple, PC's and products, nearly 50% of the computer users use Windows as graphical operating systems. If you are among those users who love windows, but are grappling to keep the system's hard drive optimized, then you s…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses

650 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question