Table Stretching

• 

  ewt4354353434 · Member · Nov 14, 2013 at 12:07 am

  • Copy link
  • Add topic to favorites

  I am trying to put a longer version of the table below in a post. However, it is stretching across the whole page and I can’t seem to fix it. Any ideas? Thanks.

  <table>
  <tbody>
  <tr>
  <th align=”center”>March</th>
  <td align=”center”>
  </td>
  <th align=”center”>April</th>
  <td align=”center”>
  </td>
  <th align=”center”>May</th>
  </tr>
  <tr>
  <td>
  <table>
  <tbody>
  <tr>
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>M
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>T
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>W
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>T
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>F
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>S
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>S
  </tr>
  <tr>
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>

  </td>
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>

  </td>
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>

  </td>
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>

  </td>
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>

  </td>
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ff0000″>1
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ff0000″>2
  </tr>
  <tr>
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ff0000″>3
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ff0000″>4
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ff0000″>5
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ff0000″>6
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ff0000″>7
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ff0000″>8
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ff0000″>9
  </tr>
  <tr>
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ff0000″>10
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ff0000″>11
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ff0000″>12
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ff0000″>13
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ffff00″>14
  <td style=”border:2px solid
  #00b0f0;text-align:center;vertical-align:middle;width:20px;background-color:#00b0f0″>15
  <td style=”border:2px solid
  #00b0f0;text-align:center;vertical-align:middle;width:20px;background-color:#00b0f0″>16
  </tr>
  <tr>
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ffff00″>17
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ff0000″>18
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ff0000″>19
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ffff00″>20
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ffff00″>21
  <td style=”border:2px solid
  #00b0f0;text-align:center;vertical-align:middle;width:20px;background-color:#00b0f0″>22
  <td style=”border:2px solid
  #00b0f0;text-align:center;vertical-align:middle;width:20px;background-color:#00b0f0″>23
  </tr>
  <tr>
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ffff00″>24
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ff0000″>25
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ff0000″>26
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ffff00″>27
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ffff00″>28
  <td style=”border:2px solid
  #00b0f0;text-align:center;vertical-align:middle;width:20px;background-color:#00b0f0″>29
  <td style=”border:2px solid
  #00b0f0;text-align:center;vertical-align:middle;width:20px;background-color:#00b0f0″>30
  </tr>
  <tr>
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ffff00″>31
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>

  </td>
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>

  </td>
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>

  </td>
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>

  </td>
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>

  </td>
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>

  </td>
  </tr>
  </tbody>
  </table>
  </td>
  <td>
  </td>
  <td>
  <table>
  <tbody>
  <tr>
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>M
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>T
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>W
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>T
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>F
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>S
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>S
  </tr>
  <tr>
  <td style=”border:2px solid #ffffff” align=”center”
  valign=”middle” width=”20px”> </td>
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ffff00″>1
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ffff00″>2
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ffff00″>3
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ffff00″>4
  <td style=”border:2px solid
  #00b0f0;text-align:center;vertical-align:middle;width:20px;background-color:#00b0f0″>5
  <td style=”border:2px solid
  #00b0f0;text-align:center;vertical-align:middle;width:20px;background-color:#00b0f0″>6
  </td>
  </tr>
  <tr>
  <td style=”border:2px solid
  #00b0f0;text-align:center;vertical-align:middle;width:20px;background-color:#00b0f0″>7
  <td style=”border:2px solid
  #00b0f0;text-align:center;vertical-align:middle;width:20px;background-color:#00b0f0″>8
  <td style=”border:2px solid
  #00b0f0;text-align:center;vertical-align:middle;width:20px;background-color:#00b0f0″>9
  <td style=”border:2px solid
  #00b0f0;text-align:center;vertical-align:middle;width:20px;background-color:#00b0f0″>10
  <td style=”border:2px solid
  #00b0f0;text-align:center;vertical-align:middle;width:20px;background-color:#00b0f0″>11
  <td style=”border:2px solid
  #00b0f0;text-align:center;vertical-align:middle;width:20px;background-color:#00b0f0″>12
  <td style=”border:2px solid
  #00b0f0;text-align:center;vertical-align:middle;width:20px;background-color:#00b0f0″>13
  </tr>
  <tr>
  <td style=”border:2px solid
  #ffff00;text-align:center;vertical-align:middle;width:20px;background-color:#ffff00″>14
  <td style=”border:2px solid
  #ffff00;text-align:center;vertical-align:middle;width:20px;background-color:#ffff00″>15
  <td style=”border:2px solid
  #ffff00;text-align:center;vertical-align:middle;width:20px;background-color:#ffff00″>16
  <td style=”border:2px solid
  #ffff00;text-align:center;vertical-align:middle;width:20px;background-color:#ffff00″>17
  <td style=”border:2px solid
  #ffff00;text-align:center;vertical-align:middle;width:20px;background-color:#ffff00″>18
  <td style=”border:2px solid
  #00b0f0;text-align:center;vertical-align:middle;width:20px;background-color:#00b0f0″>19
  <td style=”border:2px solid
  #00b0f0;text-align:center;vertical-align:middle;width:20px;background-color:#00b0f0″>20
  </tr>
  <tr>
  <td style=”border:2px solid
  #00b0f0;text-align:center;vertical-align:middle;width:20px;background-color:#00b0f0″>21
  <td style=”border:2px solid
  #ffff00;text-align:center;vertical-align:middle;width:20px;background-color:#ffff00″>22
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ffff00″>23
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ffff00″>24
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ffff00″>25
  <td style=”border:2px solid
  #00b0f0;text-align:center;vertical-align:middle;width:20px;background-color:#00b0f0″>26
  <td style=”border:2px solid
  #00b0f0;text-align:center;vertical-align:middle;width:20px;background-color:#00b0f0″>27
  </tr>
  <tr>
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ffff00″>28
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ff0000″>29
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ff0000″>30
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>

  </td>
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>

  </td>
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>

  </td>
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>

  </td>
  </tr>
  <tr>
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>

  </td>
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>

  </td>
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>

  </td>
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>

  </td>
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>

  </td>
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>

  </td>
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>

  </td>
  </tr>
  </tbody>
  </table>
  </td>
  <td>
  </td>
  <td>
  <table>
  <tbody>
  <tr>
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>M
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>T
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>W
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>T
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>F
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>S
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>S
  </tr>
  <tr>
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>

  </td>
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>

  </td>
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>

  </td>
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ffff00″>1
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ffff00″>2
  <td style=”border:2px solid
  #00b0f0;text-align:center;vertical-align:middle;width:20px;background-color:#00b0f0″>3
  <td style=”border:2px solid
  #00b0f0;text-align:center;vertical-align:middle;width:20px;background-color:#00b0f0″>4
  </tr>
  <tr>
  <td style=”border:2px solid
  #00b0f0;text-align:center;vertical-align:middle;width:20px;background-color:#00b0f0″>5
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ffff00″>6
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ffff00″>7
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ffff00″>8
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ffff00″>9
  <td style=”border:2px solid
  #00b0f0;text-align:center;vertical-align:middle;width:20px;background-color:#00b0f0″>10
  <td style=”border:2px solid
  #00b0f0;text-align:center;vertical-align:middle;width:20px;background-color:#00b0f0″>11
  </tr>
  <tr>
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ffff00″>12
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ff0000″>13
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ff0000″>14
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ffff00″>15
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ffff00″>16
  <td style=”border:2px solid
  #00b0f0;text-align:center;vertical-align:middle;width:20px;background-color:#00b0f0″>17
  <td style=”border:2px solid
  #00b0f0;text-align:center;vertical-align:middle;width:20px;background-color:#00b0f0″>18
  </tr>
  <tr>
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ffff00″>19
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ffff00″>20
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ffff00″>21
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ffff00″>22
  <td style=”border:2px solid
  #ff0000;text-align:center;vertical-align:middle;width:20px;background-color:#ffff00″>23
  <td style=”border:2px solid
  #00b0f0;text-align:center;vertical-align:middle;width:20px;background-color:#00b0f0″>24
  <td style=”border:2px solid
  #00b0f0;text-align:center;vertical-align:middle;width:20px;background-color:#00b0f0″>25
  </tr>
  <tr>
  <td style=”border:2px solid
  #00b0f0;text-align:center;vertical-align:middle;width:20px;background-color:#00b0f0″>26
  <td style=”border:2px solid
  #00b0f0;text-align:center;vertical-align:middle;width:20px;background-color:#00b0f0″>27
  <td style=”border:2px solid
  #00b0f0;text-align:center;vertical-align:middle;width:20px;background-color:#00b0f0″>28
  <td style=”border:2px solid
  #00b0f0;text-align:center;vertical-align:middle;width:20px;background-color:#00b0f0″>29
  <td style=”border:2px solid
  #00b0f0;text-align:center;vertical-align:middle;width:20px;background-color:#00b0f0″>30
  <td style=”border:2px solid
  #00b0f0;text-align:center;vertical-align:middle;width:20px;background-color:#00b0f0″>31
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>

  </td>
  </tr>
  <tr>
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>

  </td>
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>

  </td>
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>

  </td>
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>

  </td>
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>

  </td>
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>

  </td>
  <td style=”border:2px solid
  #ffffff;text-align:center;vertical-align:middle;width:20px;background-color:#ffffff”>

  </td>
  </tr>
  </tbody>
  </table>
  </td>
  </tr>
  </tbody>
  </table>

  The blog I need help with is: (visible only to logged in users)

• 

  ewt4354353434 · Member · Dec 1, 2013 at 2:01 pm

  • Copy link

  Is anyone out there able to help with my query? Thanks.

• 

  justpi · Member · Dec 1, 2013 at 2:45 pm

  • Copy link

  Study my tutorial:

  Table coding for wordpress.com users

• 

  ewt4354353434 · Member · Dec 1, 2013 at 5:30 pm

  • Copy link

  Thanks for that. I have managed to fix the problem using <table style=”table-layout:fixed”>

  However, I have a new problem in that the content is offset by 1 column compared to the border. Any items?

  Two rows of the table below:

  <table style=”table-layout:fixed”>
  <tbody>
  <tr>
  <td colspan=”7″ style=”text-align:center;”><b>March</b></td>
  <td colspan=”7″ style=”text-align:center;”><b>April</b></td>
  <td colspan=”7″ style=”text-align:center;”><b>May</b></td>
  </tr>
  <tr>
  <td style=”border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;”>M
  <td style=”border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;”>T
  <td style=”border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;”>W
  <td style=”border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;”>T
  <td style=”border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;”>F
  <td style=”border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;”>S
  <td style=”border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;”>S
  <td style=”border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;”>M
  <td style=”border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;”>T
  <td style=”border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;”>W
  <td style=”border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;”>T
  <td style=”border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;”>F
  <td style=”border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;”>S
  <td style=”border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;”>S
  <td style=”border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;”>M
  <td style=”border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;”>T
  <td style=”border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;”>W
  <td style=”border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;”>T
  <td style=”border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;”>F
  <td style=”border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;”>S
  <td style=”border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;”>S
  </tr>
  <tr>
  <td style=”border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;”>

  </td>
  <td style=”border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;”>

  </td>
  <td style=”border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;”>

  </td>
  <td style=”border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;”>

  </td>
  <td style=”border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;”>

  </td>
  <td style=”border:2px solid #ff0000;text-align:center;vertical-align:middle;background-color:#ff0000;”>1
  <td style=”border:2px solid #ff0000;text-align:center;vertical-align:middle;background-color:#ff0000;”>2
  <td style=”border:2px solid #ffffff;” align=”center” valign=”middle” width=”20px”> 
  <td style=”border:2px solid #ff0000;text-align:center;vertical-align:middle;background-color:#ffff00;”>1
  <td style=”border:2px solid #ff0000;text-align:center;vertical-align:middle;background-color:#ffff00;”>2
  <td style=”border:2px solid #ff0000;text-align:center;vertical-align:middle;background-color:#ffff00;”>3
  <td style=”border:2px solid #ff0000;text-align:center;vertical-align:middle;background-color:#ffff00;”>4

  5

  6

  </td>
  <td style=”border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;”>

  </td>
  <td style=”border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;”>

  </td>
  <td style=”border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;”>

  </td>
  <td style=”border:2px solid #ff0000;text-align:center;vertical-align:middle;background-color:#ffff00;”>1
  <td style=”border:2px solid #ff0000;text-align:center;vertical-align:middle;background-color:#ffff00;”>2

  3

  4

  </tr>
  </tbody>
  </table>

• 

  justpi · Member · Dec 1, 2013 at 9:27 pm

  • Copy link

  As I explain in my guide, most new themes have a default styling that may or may not suit your purposes. When it doesn’t, you don’t improvise, you examine the table CSS to find what you need to override. In your case it’s the excessive horizontal padding. Remove this:
  style="table-layout:fixed"
  and add this to the style attribute of each opening td tag:
  padding:3px;