Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Borders, grid style

Posted on 2004-10-09
8
Medium Priority
?
2,049 Views
Last Modified: 2011-10-03
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
Comment
Question by:HeadAcheMike
  • 4
  • 2
  • 2
8 Comments
 
LVL 3

Expert Comment

by:Kupi
ID: 12268380
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 12269437
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
 
LVL 2

Author Comment

by:HeadAcheMike
ID: 12269504
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 3

Expert Comment

by:Kupi
ID: 12270307
The black border is still visible in Opera too...
0
 
LVL 3

Expert Comment

by:Kupi
ID: 12270511
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
 
LVL 3

Expert Comment

by:Kupi
ID: 12270522
<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
 
LVL 31

Accepted Solution

by:
seanpowell earned 400 total points
ID: 12270830
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
 
LVL 2

Author Comment

by:HeadAcheMike
ID: 12271758
Thank you once again Sean, much appreciated.


Kupi thanks for your input too but Seans approach is certainly more simplistic and convienient.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Suggested Courses

886 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