Borderless table

  • Resolved chrismacleavy

    (@chrismacleavy)


    9 years, 4 months ago

    Hi Ben,
    I’ve been working for ages to create a table that has no borders. Sounds simple, right?
    I’m not sure if I’m coming up against resistance from the way I’m trying to implement code because of WordPress, or if this is something that the custom CSS doesn’t like (or any other place I try to insert it). No matter what ode I try – or where I place it – I cannot remove the borders from my tables.

    I know it’s gotta be easy. Help a brother out?

Viewing 7 replies - 1 through 7 (of 7 total)
  • Theme Author Ben Sibley

    (@bensibley)

    9 years, 4 months ago

    Hey Chris,

    Try the following CSS:

    table,
td,
th,
tr {
  border: none;
}

    There are quite a few elements in tables that could be responsible for the borders, but that code should cover it all. If that still doesn’t apply, try adding an “important” tag, like this:

    table,
td,
th,
tr {
  border: none !important;
}
    Thread Starter chrismacleavy

    (@chrismacleavy)

    9 years, 4 months ago

    Thanks Ben. This code works. However, all the text inside the table is a different font to the normal paragraph text. Is there a way I can have all text in the table look the same as text *outside* the table?
    Only really interested in the paragraph style, but if I could H2 and have it look the same, that’d be sweet.

    Theme Author Ben Sibley

    (@bensibley)

    9 years, 4 months ago

    Sure, do you have an example of a table on the site you could link me to? The font should be the same, so I think there may be a plugin on the site affecting the tables. Will be helpful if I can check it out.

    Thread Starter chrismacleavy

    (@chrismacleavy)

    9 years, 4 months ago

    Absolutely.

    Here’s an example article: http://www.chrismacleavy.com/2017/01/what-im-reading-in-feburary-022017/

    The table is 2 columns (left for text and right for images).
    On the last row, I’ve changed the title row to <td colspan=”2″>. Once I add that in, all text in subsequent cells changes for the worst.
    Like this:
    <tr>
    <td colspan=”2″>
    <h2>Dandelion Fire (100 Cupboards, Book #2): N. D. Wilson</h2>
    </td>
    </tr>
    <tr>
    <td>
    I thoroughly enjoyed book one of the 100 cupboards; I think it’s my favourite kind of fantasy. In a very The Lion, The Witch, and The Wardrobe -esque mix of the wondrous meeting the ordinary, this is the ongoing story of Henry York, a boy who discovered in his bedroom portals to one hundred different worlds.
    </td>
    <td></td>
    </tr>

    Remove all the colspan=”2″ attributes, and everything is fine.

    WEIRD.

    • This reply was modified 9 years, 4 months ago by chrismacleavy.
    Theme Author Ben Sibley

    (@bensibley)

    9 years, 4 months ago

    Thanks for the link Chris.

    I just visited and I’m seeing the Roboto font used both inside and outside the table now: http://pics.competethemes.com/1K1t2y1e2K3o. Have you found a solution, or is it displaying differently for you? If so, try clearing your browser’s cache and check if this helps.

    Thread Starter chrismacleavy

    (@chrismacleavy)

    9 years, 4 months ago

    Ok, so that’s kind of amazing.
    I saw the incorrect font on both PC and iPhone, and making the change consistently changed the font back and forth. I even saw the incorrect font when WordPress sent me the new post in an email.

    Today – after doing nothing – it’s corrected.

    Hey man…thanks!! 🙂

    Theme Author Ben Sibley

    (@bensibley)

    9 years, 4 months ago

    Glad to hear that! Let me know if there are any further issues with it and I’ll check it out.

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Borderless table’ is closed to new replies.