#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2007
    Posts
    113
    Rep Power
    0

    Table better in CSS?


    Hello

    I have the following:

    Code:
    .table {width: 100%;}
    .table tr:first-child {height: 25px; background-color: #000; color: #fff; line-height: 25px; font-weight: bold; border-radius: 5px;}
    .table tr {height: 25px; border-bottom: 1px solid #ff7577; color: #fff; line-height: 25px;}
    .table td:first-child {font-weight: bold;}
    .table tr:last-child {border: 0;}
    .table tr:first-child td:first-child {border-top-left-radius: 5px;}
    .table tr:first-child td:last-child {border-top-right-radius: 5px;}
    .table tr:last-child td:first-child {border-bottom-left-radius: 5px;}
    .table tr:last-child td:last-child {border-bottom-right-radius: 5px;}
    .table td {padding: 3px;}
    Code:
    <table class="table">
    <tr>
    <td style="width: 25%;"></td>
    <td style="width: 25%;">Class Name</td>
    <td style="width: 25%;">Start - End Time</td>
    <td style="width: 25%;">Class Type</td>
    </tr>
    <tr style="background-color: #dd3134;">
    <td>Monday</td>
    <td colspan="3"><i>There are no classes scheduled on a Monday</i></td>
    </tr>
    <tr style="background-color: #000;">
    <td style="width: 25%;">Tuesday</td>
    <td style="width: 25%;">Awesome Metafit Class</td>
    <td style="width: 25%;">17:00 - 18:00</td>
    <td style="width: 25%;">Metafit</td>
    </tr>
    <tr style="background-color: #000;">
    <td style="width: 25%;"></td>
    <td style="width: 25%;">My Boxercise</td>
    <td style="width: 25%;">17:00 - 18:00</td>
    <td style="width: 25%;">Boxercise</td>
    </tr>
    <tr style="background-color: #dd3134;">
    <td>Wednesday</td>
    <td colspan="3"><i>There are no classes scheduled on a Wednesday</i></td>
    </tr>
    <tr style="background-color: #000;">
    <td>Thursday</td><td colspan="3"><i>There are no classes scheduled on a Thursday</i></td>
    </tr>
    <tr style="background-color: #dd3134;">
    <td>Friday</td>
    <td colspan="3"><i>There are no classes scheduled on a Friday</i></td>
    </tr>
    <tr style="background-color: #000;">
    <td>Saturday</td>
    <td colspan="3"><i>There are no classes scheduled on a Saturday</i></td>
    </tr>
    <tr style="background-color: #dd3134;">
    <td>Sunday</td>
    <td colspan="3"><i>There are no classes scheduled on a Sunday</i></td>
    </tr>
    </table>
    It displays how I like in a browser, but I'm using a responsive layout I bought, so I was wondering, would it be possible to achieve the same result, but in css which is also responsive?

    The table can be viewed towards the bottom of the table here

    Thanks in advance
  2. #2
  3. Lord of the Dance
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Oct 2003
    Posts
    3,540
    Rep Power
    1906
    That is one of the cases where using tables will be correct.

    Tables are not bad when they are being used for listing data.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2007
    Posts
    113
    Rep Power
    0
    So I presume there's no way of making this work responsively?
  6. #4
  7. Lord of the Dance
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Oct 2003
    Posts
    3,540
    Rep Power
    1906
    What do you mean with "responsive layout " and "work responsively"?
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2007
    Posts
    113
    Rep Power
    0
    Originally Posted by MrFujin
    What do you mean with "responsive layout " and "work responsively"?
    Adjust automatically to different screen resolutions, to make it more "touch friendly"
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    676
    Rep Power
    441
    Well you're mostly doing the right thing already, using percentages to allow the table to resize with the browser. Depending on your table, this might be good enough to display on mobile devices. If things are getting cut off, you could use code to hide certain columns, like:

    Code:
    /* show only first two columns */
    td:nth-child(n+3), th:nth-child(n+3) {
    	display: none;
    }
    Or, you could tell it to stop being a table and just display top to bottom:

    Code:
    table, tr, th, td {display: block}

    Try experimenting with it. The first step is to get all your inline styles (style="") out of the page and into your CSS file.

    Comments on this post

    • stevenatherton4 agrees
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2007
    Posts
    113
    Rep Power
    0
    Thanks, exactly the kind of thing I was looking for

IMN logo majestic logo threadwatch logo seochat tools logo