HeadAcheMike
asked on
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"> </td>
<td class="cell"> </td>
<td class="cell"> </td>
</tr>
<tr>
<td class="cell"> </td>
<td class="cell"> </td>
<td class="cell"> </td>
</tr>
<tr>
<td class="cell"> </td>
<td class="cell"> </td>
<td class="cell"> </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
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"> </td>
<td class="cell"> </td>
<td class="cell"> </td>
</tr>
<tr>
<td class="cell"> </td>
<td class="cell"> </td>
<td class="cell"> </td>
</tr>
<tr>
<td class="cell"> </td>
<td class="cell"> </td>
<td class="cell"> </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
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> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
Sean
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> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
Sean
ASKER
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
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
The black border is still visible in Opera too...
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"> </td>
<td class="cell"> </td>
<td class="cell"> </td>
</tr>
<tr>
<td class="cell"> </td>
<td class="cell"> </td>
<td class="cell"> </td>
</tr>
<tr>
<td class="cell"> </td>
<td class="cell"> </td>
<td class="cell"> </td>
</tr>
</table>
</div>
</body>
</html>
<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"> </td>
<td class="cell"> </td>
<td class="cell"> </td>
</tr>
<tr>
<td class="cell"> </td>
<td class="cell"> </td>
<td class="cell"> </td>
</tr>
<tr>
<td class="cell"> </td>
<td class="cell"> </td>
<td class="cell"> </td>
</tr>
</table>
</div>
</body>
</html>
<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> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</body>
</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> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thank you once again Sean, much appreciated.
Kupi thanks for your input too but Seans approach is certainly more simplistic and convienient.
Kupi thanks for your input too but Seans approach is certainly more simplistic and convienient.
<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;"> </td>
<td class="cell" style="border-width: 0px 2px 2px 2px;"> </td>
<td class="cell" style="border-width: 0px 0px 2px 0px;"> </td>
</tr>
<tr>
<td class="cell" style="border-width: 0px 0px 2px 0px;"> </td>
<td class="cell" style="border-width: 0px 2px 2px 2px;"> </td>
<td class="cell" style="border-width: 0px 0px 2px 0px;"> </td>
</tr>
<tr>
<td class="cell" style="border-width: 0px 0px 0px 0px;"> </td>
<td class="cell" style="border-width: 0px 2px 0px 2px;"> </td>
<td class="cell" style="border-width: 0px 0px 0px 0px;"> </td>
</tr>
</table>
</body>
</html>