Remove table border and resize images in table

  • Unknown's avatar
    llfoster2014 · Member ·

    I have a table made up of various images and am looking to (1) remove the table’s border and (2) have the images take up the entire cell of the table (I tried setting the image heights/widths to 100% but that did not work)

    I tried removing the border in both the HTML and CSS and neither worked…here is my code:

    <table id= “main table”>
    <table style= “border: none;”>
    <td style= “border: none;”>
    <tbody>
    <tr id = “main tr”>
    <tr>
    <td>
    [caption id="attachment_209" align="alignnone" width="800"]<img class=”alignnone size-full wp-image-209″ src=”https://freewaylive.files.wordpress.com/2017/07/boston-to-california2.png” alt=”Boston to California” width=”800″ height=”800″ /> Boston to California[/caption]</td>

    <td>
    [caption id="attachment_204" align="alignnone" width="800"]<img class=”alignnone size-full wp-image-204″ src=”https://freewaylive.files.wordpress.com/2017/07/montreal-cover1.png” alt=”Montreal cover” width=”800″ height=”800″ /> Boston to Montreal[/caption]</td>

    <td>
    [caption id="attachment_320" align="alignnone" width="960"]<img class=”alignnone size-full wp-image-320″ src=”https://freewaylive.files.wordpress.com/2017/09/toronto.jpg” alt=”Boston to Toronto” width=”960″ height=”689″ /> Boston to Toronto[/caption]</td>
    </tr>

    <tr>
    <td>
    [caption id="attachment_170" align="alignnone" width="640"]<img class=”alignnone size-full wp-image-170″ src=”https://freewaylive.files.wordpress.com/2017/08/chicago.jpg” alt=”chicago” width=”640″ height=”427″ /> Boston to Chicago[/caption]</td>

    <td>

    [caption id="attachment_159" align="alignnone" width="1024"]<img class=”alignnone size-full wp-image-159″ src=”https://freewaylive.files.wordpress.com/2017/08/texas.jpg” alt=”texas” width=”1024″ height=”682″ /> Boston to Houston[/caption]</td>
    <td>
    [caption id="attachment_84" align="alignnone" width="1000"]<img class=”alignnone size-full wp-image-84″ src=”https://freewaylive.files.wordpress.com/2017/07/colorado.jpg” alt=”” width=”1000″ height=”573″ /> Boston to Denver[/caption]</td>
    </tr>

    <tr>
    <td>
    [caption id="attachment_110" align="alignnone" width="600"]<img class=”alignnone size-full wp-image-110″ src=”https://freewaylive.files.wordpress.com/2017/07/montreal-1.jpg” alt=”Montreal” width=”600″ height=”400″ /> Boston to Montreal[/caption]</td>

    <td>
    [caption id="attachment_57" align="alignnone" width="634"]<img class=”alignnone size-full wp-image-57″ src=”https://freewaylive.files.wordpress.com/2017/07/montreal.jpg” alt=”” width=”634″ height=”419″ /> Boston to Montreal[/caption]</td>

    <td>
    [caption id="attachment_183" align="alignnone" width="1650"]<img class=”alignnone size-full wp-image-183″ src=”https://freewaylive.files.wordpress.com/2017/08/vermont.jpg” alt=”vermont” width=”1650″ height=”1080″ /> Tour of New England[/caption]</td>
    </tr>
    </tbody>
    </table>

    and…
    #maintable {
    display: block;
    width: 100%;
    height: 100%;
    border: 0 px;
    }

    #maintr {
    border: 0px;
    }

    any help would be greatly appreciated, thank you!

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

  • Unknown's avatar
    rnwnc · Member ·

    Wow! Neat idea!

    I’m wondering…you are using the Cubic theme, which has similar functionality “built in” when you add posts and set a featured image for each. What led you to hand-craft your table? I want to make sure I’m tracking with you so I don’t suggest something at odds with your end goal.

    Richard

  • Unknown's avatar
    siobhyb · Member ·

    @llfoster2014: I had similar thoughts to @rnwnc. What led you to create a table to display your images in? Are you open to other approaches?

    For example, if you’d like to display multiple images on a single post or page then we have a special gallery feature that you can use to display them nicely in a few different styles. You can find more information on that feature here:

    https://en.support.wordpress.com/gallery/

    A benefit of using our built-in gallery feature is that you can be certain that the images will display well across all devices and browsers, something which may be tricky if you organise the images into tables.

  • The topic ‘Remove table border and resize images in table’ is closed to new replies.