JapyDooge
asked on
[HTML/CSS] Using CSS to give a table borders and a fixed width/height
I have a huge table (little example attached) that should have a lot of cells all being 100x100px with a 20px border between them.
I trought the <table> tag would be the easyst way to create this, but if it's possible doing by <div> tags thats okay for me too. The page is generated by PHP and sometimes theres a cell thats 220x220px (using 4x100px + border).
See the attached picture, there you can cleary see that my current code does'nt work, how strange...
I trought the <table> tag would be the easyst way to create this, but if it's possible doing by <div> tags thats okay for me too. The page is generated by PHP and sometimes theres a cell thats 220x220px (using 4x100px + border).
See the attached picture, there you can cleary see that my current code does'nt work, how strange...
<html>
<head>
<title>Map</title>
<style>
#map{
border-collapse: collapse;
border-top: #000000 20px solid;
border-right: #000000 20px solid;
border-bottom: #000000 20px solid;
border-left: #000000 20px solid;
}
td{
border-top: #000000 20px solid;
border-right: #000000 20px solid;
border-bottom: #000000 20px solid;
border-left: #000000 20px solid;
width: 100px;
height: 100px;
text-align: center;
}
</style>
</head>
<body>
<table id="map">
<tr><td>T</td><td>E</td><td>S</td><td>T</td><td>1</td></tr>
<tr><td>T</td><td>E</td><td colspan=2 rowspan=2>S</td><td>2</td></tr>
<tr><td>T</td><td>E</td><td>3</td></tr>
<tr><td>T</td><td>E</td><td>S</td><td>T</td><td>4</td></tr>
</table>
</body>
</html>
wrong.png
Whats the problem in here ?
>> sometimes theres a cell thats 220x220px (using 4x100px + border).
If the problem is that "big square", then the reason is because of the rowspan and the colspan. This is the table code you should be generating:
If the problem is that "big square", then the reason is because of the rowspan and the colspan. This is the table code you should be generating:
<table id="map">
<tr>
<td>T</td>
<td>E</td>
<td>S</td>
<td>T</td>
<td>1</td></tr>
<tr>
<td>T</td>
<td>E</td>
<td>S</td>
<td>T</td>
<td>3</td></tr>
<tr>
<td>T</td>
<td>E</td>
<td>S</td>
<td>T</td>
<td>3</td></tr>
<tr>
<td>T</td>
<td>E</td>
<td>S</td>
<td>T</td>
<td>4</td></tr>
</table>
ASKER
The big square is the good thing, thats the 220x220px cell but, those cell's are'nt 100x100, they are 102x92 or 102x83 or whatever, that's each row completely random. I need the _white space_ in a cell to be exact 100x100px or exact 220x220px for the bigger ones.
ASKER
See for example the 2 and 3 row, those are'nt 100x100, the rest of the rows are neither 100x100 but 2 and 3 are the smallest.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Woow, great, thanks! This is exactly what i was looking for!