Give help. Get help.

  • # 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?

    # July 21, 2012 at 12:25 am

    Nifty. Thank you

    # July 21, 2012 at 1:03 am

    You’re welcome.

    # July 21, 2012 at 2:07 am

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

    # 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 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.