Table overspill

  • Author
    Posts
  • #39472

    timeimage
    Member
    Original poster

    Hi all,

    I’m tired and going round and round in circles trying to work out what I’m doing wrong here.

    The ridiculous table on this page will, without CSS intervention, spill over off the side of the page. I’ve been trying to make it resize automatically (I can make it scroll fine, but that’s not what I want).
    I seem to have managed to make it resize with:

    body.page-id-389, .entry-content table tbody tr {
    max-width: 100%;
    font-size: 100%;
    overflow: auto;
    }

    but, as you can see, this shrinks ALL the text on the page, which isn’t ideal. I figure I’m referring to the wrong class and such, but I can’t find the right combination to fix it. I imagine it would be something more like:

    .entry-content table.WhatsOn {
    max-width: 100%;
    font-size: 100%;
    color:

    but that’s obviously wrong as well.

    If anyone could give me a hand with this, I’d be most grateful.

    Best, Sarah

    The blog I need help with is: camdennewwave.co.uk

    #39575

    maharzan
    Theme Author

    Hi Sarah,

    Yep, that table is indeed too big. :) For larger screens, it seems to fit well. If you are concerned about it spilling over in smaller screens, I think you might want to make the table small. You can use

    table {word-break: break-word;}

    but it separates each letter and makes it look uglier.

    Thanks,
    Chandra

    #39578

    timeimage
    Member
    Original poster

    Hm, the word-break technique isn’t ideal. I think i’d rather have it small!

    Do you know why

    Table {
    max-width: 100%;
    font-size: 100%;
    overflow: auto;
    }

    doesn’t work?

    Best, Sarah

    #39619

    maharzan
    Theme Author

    It looks like its working now. I see the scrollbar once the content width is smaller than the table.

    #39679

    timeimage
    Member
    Original poster

    Yeah, it wasn’t quite what I was aiming for, but it’ll do.

The topic ‘Table overspill’ is closed to new replies.