Grow your CSS skills. Land your dream job.

Need to make a table (but in the least crappy way)

  • # July 20, 2012 at 3:07 pm

    I need to create a layout for tabular data. As a designer, it’s been hammered into my skull that tables should not be used for anything other than tabular data. The layout should be flexible and easy to style without the use of inline styles anywhere. Is there an ideal/semantic way to go about doing this?

    # July 20, 2012 at 6:42 pm

    *Polite poke* Please let me know if I wasn’t very clear in my question so I can rephrase.

    # July 20, 2012 at 9:43 pm

    This crappy or happy?

    http://jsfiddle.net/h4mjf/3/

    # July 21, 2012 at 12:25 am

    Nifty. Thank you

    # July 21, 2012 at 1:03 am

    You’re welcome.

    # July 21, 2012 at 1:57 am

    @theacefes I disagree with @amoss code and would not use it
    bad HTML, and lot of repetition in CSS

    # July 21, 2012 at 2:07 am

    Was waiting for this.
    @krysak4ever Improve it then. Thanks.

    # July 21, 2012 at 2:22 am

    @amoss (with due respect)

    1.] you do not need to declare class .table
    2.] empty TD and class blank, for what ?

    3.] CSS obvious first sight repetition
    a] things that have common settings can be group (not declared 3 times the same)
    b] then you write only stuff that differs
    c] ussing classes on TD is good for IE 6,7,8 which ignores E:nth-child

    result = less verbose code, which is shorter, easy to use and read

    # July 21, 2012 at 5:12 am

    Thank you – I’m glad that there are different solutions floating around.

    # July 21, 2012 at 12:13 pm

    @krysak4ever, nice, thanks.
    2.] empty TD and class blank, for what ?
    To separate the columns and keep the borders from touching. There may be a better way but no one jumped in to help so I gave it a shot. Cheers.

    # July 22, 2012 at 10:04 am

    Take a look at how Bootstrap sets up their table css… here is the demo and the css

    table {
    max-width: 100%;
    background-color: transparent;
    border-collapse: collapse;
    border-spacing: 0;
    }
    .table {
    width: 100%;
    margin-bottom: 18px;
    }
    .table th,
    .table td {
    padding: 8px;
    line-height: 18px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #dddddd;
    }
    .table th {
    font-weight: bold;
    }
    .table thead th {
    vertical-align: bottom;
    }
    .table caption + thead tr:first-child th,
    .table caption + thead tr:first-child td,
    .table colgroup + thead tr:first-child th,
    .table colgroup + thead tr:first-child td,
    .table thead:first-child tr:first-child th,
    .table thead:first-child tr:first-child td {
    border-top: 0;
    }
    .table tbody + tbody {
    border-top: 2px solid #dddddd;
    }
    .table-condensed th,
    .table-condensed td {
    padding: 4px 5px;
    }
    .table-bordered {
    border: 1px solid #dddddd;
    border-collapse: separate;
    *border-collapse: collapsed;
    border-left: 0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    }
    .table-bordered th,
    .table-bordered td {
    border-left: 1px solid #dddddd;
    }
    .table-bordered caption + thead tr:first-child th,
    .table-bordered caption + tbody tr:first-child th,
    .table-bordered caption + tbody tr:first-child td,
    .table-bordered colgroup + thead tr:first-child th,
    .table-bordered colgroup + tbody tr:first-child th,
    .table-bordered colgroup + tbody tr:first-child td,
    .table-bordered thead:first-child tr:first-child th,
    .table-bordered tbody:first-child tr:first-child th,
    .table-bordered tbody:first-child tr:first-child td {
    border-top: 0;
    }
    .table-bordered thead:first-child tr:first-child th:first-child,
    .table-bordered tbody:first-child tr:first-child td:first-child {
    -webkit-border-top-left-radius: 4px;
    border-top-left-radius: 4px;
    -moz-border-radius-topleft: 4px;
    }
    .table-bordered thead:first-child tr:first-child th:last-child,
    .table-bordered tbody:first-child tr:first-child td:last-child {
    -webkit-border-top-right-radius: 4px;
    border-top-right-radius: 4px;
    -moz-border-radius-topright: 4px;
    }
    .table-bordered thead:last-child tr:last-child th:first-child,
    .table-bordered tbody:last-child tr:last-child td:first-child {
    -webkit-border-radius: 0 0 0 4px;
    -moz-border-radius: 0 0 0 4px;
    border-radius: 0 0 0 4px;
    -webkit-border-bottom-left-radius: 4px;
    border-bottom-left-radius: 4px;
    -moz-border-radius-bottomleft: 4px;
    }
    .table-bordered thead:last-child tr:last-child th:last-child,
    .table-bordered tbody:last-child tr:last-child td:last-child {
    -webkit-border-bottom-right-radius: 4px;
    border-bottom-right-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    }
    .table-striped tbody tr:nth-child(odd) td,
    .table-striped tbody tr:nth-child(odd) th {
    background-color: #f9f9f9;
    }
    .table tbody tr:hover td,
    .table tbody tr:hover th {
    background-color: #f5f5f5;
    }
Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

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