Spacing of table using TinyMCE causing issues with alignment?

Hi i am having some spacing issues with a table created using the plugin TinyMCE Advanced,

it creates a table that i have inputted info into, however when publishing the result is alot different to that which is in the editor ? @Michael Bissett said

"
I'm seeing that the elements have a 100% width set, which is part of the reason why the layout is odd presently.
- could be usefull

i have opened support access

the page affected is -

Thanks

Tom

  • Tom

    Hi Vaughan,

    here is the full html code

    <h3 style="text-align: center;">Timetable</h3>
    <table class=" aligncenter" style="height: 120px;" width="546">
    <tbody>
    <tr>
    <td><strong>Day</strong></td>
    <td><strong>Time</strong></td>
    <td><strong>Duration</strong></td>
    <td><strong>Class Type</strong></td>
    <td><strong>Price</strong></td>
    <td><strong>Book a class</strong></td>
    </tr>
    <tr>
    <td><strong>Tuesday</strong></td>
    <td>8:10pm-9:10pm</td>
    <td>60min</td>
    <td>SpinAddikts Intervals</td>
    <td>£16</td>
    <td>10</td>
    </tr>
    <tr>
    <td><strong>Thursday</strong></td>
    <td>7:30pm-8:30pm</td>
    <td>60min</td>
    <td>SpinAddikts Beat the Burnout</td>
    <td>£16</td>
    <td>10</td>
    </tr>
    <tr>
    <td><strong>Saturday</strong></td>
    <td>9:45am-11:15am</td>
    <td>90min</td>
    <td>SpinAddikts Endurance</td>
    <td>£20</td>
    <td>10</td>
    </tr>
    <tr>
    <td><strong>Sunday</strong></td>
    <td>9:30am-10:30am</td>
    <td>60min</td>
    <td>SpinAddikts Regular</td>
    <td>£16</td>
    <td>10</td>
    </tr>
    </tbody>
    </table>
    <h3 style="text-align: center;">Fees</h3>
    <table class=" aligncenter" style="height: 96px;" width="118">
    <tbody>
    <tr>
    <td><strong>Duration     </strong></td>
    <td><strong>Price</strong></td>
    </tr>
    <tr>
    <td>60 min</td>
    <td>£16</td>
    </tr>
    <tr>
    <td>90 min</td>
    <td>£20</td>
    </tr>
    <tr>
    <td>2.5 hours</td>
    <td>£28</td>
    </tr>
    </tbody>
    </table>

    Thanks

    Tom

  • Vaughan

    Hi,

    Can you try the below, i've corrected a few minor errors in 2 of your styles related to the width.

    <h3 style="text-align: center;">Timetable</h3>
    <table class="aligncenter" style="height: 120px; width: 546px">
    <tbody>
    <tr>
    <td><strong>Day</strong></td>
    <td><strong>Time</strong></td>
    <td><strong>Duration</strong></td>
    <td><strong>Class Type</strong></td>
    <td><strong>Price</strong></td>
    <td><strong>Book a class</strong></td>
    </tr>
    <tr>
    <td><strong>Tuesday</strong></td>
    <td>8:10pm-9:10pm</td>
    <td>60min</td>
    <td>SpinAddikts Intervals</td>
    <td>£16</td>
    <td>10</td>
    </tr>
    <tr>
    <td><strong>Thursday</strong></td>
    <td>7:30pm-8:30pm</td>
    <td>60min</td>
    <td>SpinAddikts Beat the Burnout</td>
    <td>£16</td>
    <td>10</td>
    </tr>
    <tr>
    <td><strong>Saturday</strong></td>
    <td>9:45am-11:15am</td>
    <td>90min</td>
    <td>SpinAddikts Endurance</td>
    <td>£20</td>
    <td>10</td>
    </tr>
    <tr>
    <td><strong>Sunday</strong></td>
    <td>9:30am-10:30am</td>
    <td>60min</td>
    <td>SpinAddikts Regular</td>
    <td>£16</td>
    <td>10</td>
    </tr>
    </tbody>
    </table>
    <h3 style="text-align: center;">Fees</h3>
    <table class="aligncenter" style="height: 96px; width: 118px;">
    <tbody>
    <tr>
    <td><strong>Duration</strong></td>
    <td><strong>Price</strong></td>
    </tr>
    <tr>
    <td>60 min</td>
    <td>£16</td>
    </tr>
    <tr>
    <td>90 min</td>
    <td>£20</td>
    </tr>
    <tr>
    <td>2.5 hours</td>
    <td>£28</td>
    </tr>
    </tbody>
    </table>

    Hope this helps

  • Vinod Dalvi

    Hi Tom,

    In the above HTML code change the first two lined of code as following.

    <h3 style="text-align: center;">Timetable</h3>
    <table class="aligncenter" style="height: 120px; width: 600px">

    And add the following CSS code in the style.css file of your child theme or add it in your site using the following plugin.

    http://wordpress.org/plugins/simple-custom-css

    body.page-id-362 .entry-content table.aligncenter td {
    width: auto;
    padding: 0 5px;
    }

    Best Regards,
    Vinod Dalvi

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.