Need help? Check out our Support site, then


Table Stretching

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

    The blog I need help with is llwfansite.wordpress.com.

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

  3. 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;"><b>M</b></td>
    <td style="border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;"><b>T</b></td>
    <td style="border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;"><b>W</b></td>
    <td style="border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;"><b>T</b></td>
    <td style="border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;"><b>F</b></td>
    <td style="border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;"><b>S</b></td>
    <td style="border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;"><b>S</b></td>
    <td style="border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;"><b>M</b></td>
    <td style="border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;"><b>T</b></td>
    <td style="border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;"><b>W</b></td>
    <td style="border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;"><b>T</b></td>
    <td style="border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;"><b>F</b></td>
    <td style="border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;"><b>S</b></td>
    <td style="border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;"><b>S</b></td>
    <td style="border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;"><b>M</b></td>
    <td style="border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;"><b>T</b></td>
    <td style="border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;"><b>W</b></td>
    <td style="border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;"><b>T</b></td>
    <td style="border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;"><b>F</b></td>
    <td style="border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;"><b>S</b></td>
    <td style="border:2px solid #ffffff;text-align:center;vertical-align:middle;background-color:#ffffff;"><b>S</b></td>
    </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>
    <td style="border:2px solid #ff0000;text-align:center;vertical-align:middle;background-color:#ff0000;">2</td>
    <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;background-color:#ffff00;">1</td>
    <td style="border:2px solid #ff0000;text-align:center;vertical-align:middle;background-color:#ffff00;">2</td>
    <td style="border:2px solid #ff0000;text-align:center;vertical-align:middle;background-color:#ffff00;">3</td>
    <td style="border:2px solid #ff0000;text-align:center;vertical-align:middle;background-color:#ffff00;">4</td>
    <td style="border:2px solid #00b0f0;text-align:center;vertical-align:middle;background-color:#00b0f0;">5</td>
    <td style="border:2px solid #00b0f0;text-align:center;vertical-align:middle;background-color:#00b0f0;">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>
    <td style="border:2px solid #ff0000;text-align:center;vertical-align:middle;background-color:#ffff00;">2</td>
    <td style="border:2px solid #00b0f0;text-align:center;vertical-align:middle;background-color:#00b0f0;">3</td>
    <td style="border:2px solid #00b0f0;text-align:center;vertical-align:middle;background-color:#00b0f0;">4</td>
    </tr>
    </tbody>
    </table>

  4. 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;

Topic Closed

This topic has been closed to new replies.

About this Topic