Grow your CSS skills. Land your dream job.

[Solved] Simple and "silly" CSS question

  • # March 27, 2014 at 11:55 am

    Hi all,

    Current I have the following CSS code for Table layout,
    table {
    border-collapse: separate;
    border-spacing: 2;
    vertical-align: middle;
    margin: auto;
    }

    What I want is to have multiple Tables to be displayed Vertically (not horizontally next to another), the above code does not do that. How to fix it?

    Thanks.

    Don

    # March 27, 2014 at 11:58 am

    Codepen.io example please.

    # March 27, 2014 at 1:30 pm

    A table should, by default, stack… and they do, even if you use the CSS from your original post.

    http://codepen.io/drainpip/pen/qzfLe/

    So basically, there’s something else going on. We need you to give us an active example.

    # March 28, 2014 at 8:42 am

    Ok, guys, here’s a sample page,

    http://54.242.162.60/dev/details.htm

    The table class does not seem to be applied.

    Desired outcome:
    The [project], [sponsor], [year],[quarter] etc. Table should be at the bottom.

    Thanks.

    # March 28, 2014 at 9:03 am

    If you don’t want to see them next to each other why are you floating them left in the head of your page?

    <style>
    .tbl {float:left;}
    </style>

    I guess my next question is why are you using (in some cases) tables for layout?

    # March 28, 2014 at 12:11 pm

    Paulie, application-wise, tables are centered, which is good but for one particular page, I’d like all the Tables to be left-aligned and to be displayed vertically, not next to one another. Ok, silly me with CSS, it’s simple, just use left-align:10px; right-align:auto solves the problem.

    Thanks.

    Don
    P.S. Of course the left-align value can be 0 etc…

    # March 28, 2014 at 1:27 pm

    But the question remains – why tables?

    You simply don’t need them for layout, in fact they become so burdensome and unwieldy it’s a hindrance more than anything.

    Consider this code: http://codepen.io/drainpip/pen/dgpbB/

    Please pay no attention to .example-block, I simply used that for illustrative purposes.

    First, I’m not using tables.

    Second, I’m relying on defaults to be defaults (text is left-aligned by default).

    Third, with the inclusion of one simple class I can center text in any block-level element.

    Of course, this is a simplistic example, but if you take it to the logical conclusion, you’ll see that using tables for layout is not only bad practice, it’s wasting your time unnecessarily by making an impossible to update code base.

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".