• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2051
  • Last Modified:

Borders, grid style

Hi,

i am not quite sure how to go about doing this, basically i have this:

<html>
<head>
<style>
 #grid {
  width: 225px;
  height: 225px;
  border: 2px solid #000000;
  padding: 4px;
 }
 .cell {
  width: 75px;
  height: 75px;
 }
</style>
</head>

<body>

<table id="grid" cellspacing="1px">
 <tr>
  <td class="cell">&nbsp;</td>
  <td class="cell">&nbsp;</td>
  <td class="cell">&nbsp;</td>
 </tr>
 <tr>
  <td class="cell">&nbsp;</td>
  <td class="cell">&nbsp;</td>
  <td class="cell">&nbsp;</td>
 </tr>
 <tr>
  <td class="cell">&nbsp;</td>
  <td class="cell">&nbsp;</td>
  <td class="cell">&nbsp;</td>
 </tr>
</table>

</body>
</html>


At the moment the border appears just around the outside of the table however i want the exact opposite. I want the border to appear in the internal cells but not around the outside... sort of like this

 __|__|__
 __|__|__
    |    |  

Is there an easy way to do this?

I kind of like the idea of doing it with divisions (ie. <div>) but im not sure if thats practical here... or even possible?

An image will eventually go in each of these cells if that information is at all relevant

Thank you
0
HeadAcheMike
Asked:
HeadAcheMike
  • 4
  • 2
  • 2
1 Solution
 
KupiCommented:
Is this what you mean?

<html>
<head>
<style>

#grid {
  margin: 0px;
  padding: 0px;
  border: none;
  border-collapse: collapse;
  width: 225px;
  height: 225px;
}

.cell {
  margin: 0px;
  padding: 0px;
  border: 2px solid #000;
  width: 75px;
  height: 75px;
}

</style>
</head>
<body>

<table id="grid">
  <tr>
    <td class="cell" style="border-width: 0px 0px 2px 0px;">&nbsp;</td>
    <td class="cell" style="border-width: 0px 2px 2px 2px;">&nbsp;</td>
    <td class="cell" style="border-width: 0px 0px 2px 0px;">&nbsp;</td>
  </tr>
  <tr>
    <td class="cell" style="border-width: 0px 0px 2px 0px;">&nbsp;</td>
    <td class="cell" style="border-width: 0px 2px 2px 2px;">&nbsp;</td>
    <td class="cell" style="border-width: 0px 0px 2px 0px;">&nbsp;</td>
  </tr>
  <tr>
    <td class="cell" style="border-width: 0px 0px 0px 0px;">&nbsp;</td>
    <td class="cell" style="border-width: 0px 2px 0px 2px;">&nbsp;</td>
    <td class="cell" style="border-width: 0px 0px 0px 0px;">&nbsp;</td>
  </tr>
</table>

</body>
</html>
0
 
seanpowellCommented:
I would simplify that a bit...

1. Simply override the border of the table with white (or whatever your background is)
2. Use the cascade to set the td's instead of repeating "class" for all of them.
3. Remove the height and width of your table - let the cells define that so you don't run into problems...

<html>
<head>
<style>
#grid
{
      border: 1px solid #ffffff;
      padding: 4px;
      border-collapse:collapse;
}

#grid td
{
      width: 75px;
      height: 75px;
      border: 2px solid #000000;
}

</style>
</head>
<body>
<table id="grid" cellspacing="0">
 <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
 <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
 <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
</table>

</body>
</html>

Sean
0
 
HeadAcheMikeAuthor Commented:
Kupi, thanks that is exactly what i need in appearence but i was hoping for an easier way to do it because the rows/columns will be generated dynamically so having to specify varying border widths for each cell will cause me problems later on.

Sean, once again thats great, exactly what i need but just one small issue which i hope you have an answer for...

It displays as needed in IE but in Firefox i still see a black border around the table, any ideas?

Thank you
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
KupiCommented:
The black border is still visible in Opera too...
0
 
KupiCommented:
This seems to be a bit more crossbrowser:

<html>

<head>

<title></title>

<style>

body {
  margin: 0px;
  padding: 8px;
  background-color: #FFF;
}

#gridbox {
  overflow: hidden;
}

#grid {
  position: relative;
  top: -2px;
  left: -2px;
  margin: 0px;
  padding: 0px;
  border: 2px solid #FFF; /* border-color = background color */
  border-collapse: collapse;
  width: 225px;
  height: 225px;
}

.cell {
  margin: 0px;
  padding: 0px;
  border: 2px solid #000;
  border-width: 2px 0px 0px 2px;
  width: 75px;
  height: 75px;
}

</style>

</head>

<body>

<div id="gridbox">
  <table id="grid">
    <tr>
      <td class="cell">&nbsp;</td>
      <td class="cell">&nbsp;</td>
      <td class="cell">&nbsp;</td>
    </tr>
    <tr>
      <td class="cell">&nbsp;</td>
      <td class="cell">&nbsp;</td>
      <td class="cell">&nbsp;</td>
    </tr>
    <tr>
      <td class="cell">&nbsp;</td>
      <td class="cell">&nbsp;</td>
      <td class="cell">&nbsp;</td>
    </tr>
  </table>
</div>

</body>

</html>
0
 
KupiCommented:
<html>

<head>

<title></title>

<style>

body {
  margin: 0px;
  padding: 8px;
  background-color: #FFF;
}

#gridbox {
  overflow: hidden;
}

#grid {
  position: relative;
  top: -2px;
  left: -2px;
  margin: 0px;
  padding: 0px;
  border: 2px solid #FFF; /* border-color = background color */
  border-collapse: collapse;
}

#grid td {
  margin: 0px;
  padding: 0px;
  border: 2px solid #000;
  border-width: 2px 0px 0px 2px;
  width: 75px;
  height: 75px;
}

</style>

</head>

<body>

<div id="gridbox">
  <table id="grid">
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</div>

</body>

</html>
0
 
seanpowellCommented:
Kupi,

I know where you're going with that but it is really is overkill, we don't need to get that complicated :-)
The thing with CSS is that we always want simplicity over anything else, because we need to build in flexibility. Anytime we try to force CSS into pixel-perfect rendering, I guarantee there will be problems down the road...

HeadacheMike,

I did a lousy job of posting that example, as I had left the default styles in. The CSS table model has something called border conflict resolution. It's one of the more complicated parts of the model, but in essense says that anything bigger or stronger will take precedence.

In the example I posted, simply change this:

border: 1px solid #ffffff;
to this:
border: 3px solid #ffffff;

and now the external border will disappear :-)
Doesn't matter what the values are, just make sure the outer value is bigger than the inner one.

Sean
0
 
HeadAcheMikeAuthor Commented:
Thank you once again Sean, much appreciated.


Kupi thanks for your input too but Seans approach is certainly more simplistic and convienient.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

  • 4
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now