Colspan Driving me Crazy.

  • PolishHurricane
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1585

Post 3+ Months Ago

I have a big very complex table I'm making in order to make sort of a picture with borders of table cells and I've stumbled upon this problem whilst doing it. I've made a very scaled down version of it, but I still need to maintain the colspans.

Problem: I'm attempting to make the BLUE cell colspan="3". And I want the GREEN cell to be colspan="1", to be 1/3rd of the BLUE cell (the first cell under the blue cell in the "SECOND" (3rd) column. In IE it displays with all the table cells offset and stuff. In FireFox it's correct, but the green cell decides to take up the entire blue column. The table is 11 colspan/cell's wide.

Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>TEST</title>
</head>
<body>

        <table cellspacing="0" style="width: 100%; border: 1px solid #000000; empty-cells: show; ">
        <tr>
         <th colspan="1" style="border-bottom: 1px solid #000000; border-right: 1px solid #000000; ">COLUMN</th>
         <th colspan="2" style="border-bottom: 1px solid #000000; border-right: 1px solid #000000; ">FIRST</th>
         <th colspan="3" style="border-bottom: 1px solid #000000; border-right: 1px solid #000000; background-color: #0000FF; ">SECOND</th>
         <th colspan="3" style="border-bottom: 1px solid #000000; border-right: 1px solid #000000; ">THIRD</th>
         <th colspan="2" style="border-bottom: 1px solid #000000; ">FOURTH</th>
        </tr>
        <tr>
         <td colspan="2" style="background-color: #000000; "></td>
         <td colspan="1" style="width: 5px; height: 5px; background-color: #FF0000; "></td>
         <td colspan="1" style="width: 5px; height: 5px; background-color: #00FF00; "></td>
         <td colspan="7" style="height: 5px; background-color: #FF0000; "></td>
        </tr>
        </table>

</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4. <title>TEST</title>
  5. </head>
  6. <body>
  7.         <table cellspacing="0" style="width: 100%; border: 1px solid #000000; empty-cells: show; ">
  8.         <tr>
  9.          <th colspan="1" style="border-bottom: 1px solid #000000; border-right: 1px solid #000000; ">COLUMN</th>
  10.          <th colspan="2" style="border-bottom: 1px solid #000000; border-right: 1px solid #000000; ">FIRST</th>
  11.          <th colspan="3" style="border-bottom: 1px solid #000000; border-right: 1px solid #000000; background-color: #0000FF; ">SECOND</th>
  12.          <th colspan="3" style="border-bottom: 1px solid #000000; border-right: 1px solid #000000; ">THIRD</th>
  13.          <th colspan="2" style="border-bottom: 1px solid #000000; ">FOURTH</th>
  14.         </tr>
  15.         <tr>
  16.          <td colspan="2" style="background-color: #000000; "></td>
  17.          <td colspan="1" style="width: 5px; height: 5px; background-color: #FF0000; "></td>
  18.          <td colspan="1" style="width: 5px; height: 5px; background-color: #00FF00; "></td>
  19.          <td colspan="7" style="height: 5px; background-color: #FF0000; "></td>
  20.         </tr>
  21.         </table>
  22. </body>
  23. </html>


I don't get it, do I need an even number of colspans? I'm wicked tired, so is it just me?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8399
  • Loc: USA

Post 3+ Months Ago

You mean something like this?

Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>TEST</title>
<style type="text/css">
.table {
padding: 0 0 0 0;
width: 100%;
empty-cells: show;
text-align: center;
}
</style>
</head>
<body>
<table cellspacing="0" class="table">
<tr>
 <td style="border: 1px solid #000000;">
  Column
 </td>
 <td style="border: 1px solid #000000;">
  FIRST
 </td>
 <td colspan="3" style="border: 1px solid #000000; background-color: #0000FF;">
  Second
 </td>
 <td style="border: 1px solid #000000;">
  Third
 </td>
 <td style="border: 1px solid #000000;">
  FOURTH
 </td>
</tr>
<tr>
 <td style="background-color: #000000;">
 </td>
 <td style="height: 5px; background-color: #FF0000;">
 </td>
 <td style="background-color: #FFFF00;">
 </td>
 <td style="height: 5px; background-color: #FF0000;">
 </td>
 <td style="background-color: #FFFF00;">
 </td>
 <td style="background-color: #000000;">
 </td>
 <td style="background-color: #000000;">
 </td>
</tr>
</table>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4. <title>TEST</title>
  5. <style type="text/css">
  6. .table {
  7. padding: 0 0 0 0;
  8. width: 100%;
  9. empty-cells: show;
  10. text-align: center;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <table cellspacing="0" class="table">
  16. <tr>
  17.  <td style="border: 1px solid #000000;">
  18.   Column
  19.  </td>
  20.  <td style="border: 1px solid #000000;">
  21.   FIRST
  22.  </td>
  23.  <td colspan="3" style="border: 1px solid #000000; background-color: #0000FF;">
  24.   Second
  25.  </td>
  26.  <td style="border: 1px solid #000000;">
  27.   Third
  28.  </td>
  29.  <td style="border: 1px solid #000000;">
  30.   FOURTH
  31.  </td>
  32. </tr>
  33. <tr>
  34.  <td style="background-color: #000000;">
  35.  </td>
  36.  <td style="height: 5px; background-color: #FF0000;">
  37.  </td>
  38.  <td style="background-color: #FFFF00;">
  39.  </td>
  40.  <td style="height: 5px; background-color: #FF0000;">
  41.  </td>
  42.  <td style="background-color: #FFFF00;">
  43.  </td>
  44.  <td style="background-color: #000000;">
  45.  </td>
  46.  <td style="background-color: #000000;">
  47.  </td>
  48. </tr>
  49. </table>
  50. </body>
  51. </html>
  • PolishHurricane
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1585

Post 3+ Months Ago

Nope sorry, the table is actually more complex. Just didn't post the other code.

It turned out even though the row I was shooting for was 11 colspans wide, for some reason the browser thought it was less on the right and more on the left. So the fix was basically adding another identical cell in front of the colspan="7" cell, but without the colspan. Kind of half-ass but it worked.

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 36 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.