Skip to content

Creating a Responsive Designed Table?

Responsive Designed Tables


To create tables that look good and function properly on all screen sizes without all the columns getting crammed together on smaller screens, you need to build them in the following way.

Create a Text Block wherever you need the table to go on the page. Click on the Table icon to insert a table. Then select the number of rows and columns that you'll need.


Next you will need to select the "Text" tab in order to add in some styles to the table.

Change the table ID to include your unique tablename:
<table id="tablename-table" width="100%"

Your first table row should be your Table Heading. Make it read:
<tr class="table-heading">

The columns' widths (however many you have) should be in the form of percentages. Only the Table Heading Row's columns need these percentages in their widths. Make sure they add up to 100%.

All rows after the Table Heading need to have the class of "table-row", like this:
<tr class="table-row">

All first columns in the rows under the Table Heading row need to have the class "first_td" and have a vertical alignment of "top", like this:
<td class="first_td" valign="top">

All of the middle columns (columns between the first and last columns) need to have a vertical alignment of "top", and include a class of "mobile-title", and include the actual title of that column from the Table Heading row, like this:
<td valign="top"><span class="mobile-title"><strong>Executive DBA: </strong></span>

And the final column needs to have the class of "last_td", be vertically aligned to the top, as well as include the actual title of that column from the Table Heading row, like this:
<td class="last_td" valign="top"><span class="mobile-title"><strong>Ph.D.: </strong></span>

The Table Heading row and the first row should look something like this:
<table id="tablename-table" width="100%" cellspacing="5">
<tbody>
<tr class="table-heading">
<td width="30%"></td>
<td width="35%"><strong>Executive DBA</strong></td>
<td width="35%"><strong>Ph.D.</strong></td>
</tr>
<tr class="table-row">
<td class="first_td" valign="top"><strong>Program Length and Structure</strong></td>
<td valign="top"><span class="mobile-title"><strong>Executive DBA: </strong></span>3 years, part-time, cohort-based, four on-campus residencies per semester</td>
<td class="last_td" valign="top"><span class="mobile-title"><strong>Ph.D.: </strong></span>5-7 years, full-time, individual learning</td>
</tr>

Add the CSS to the Page

Copy and paste the following code in the CSS option at the top of the page (the "Gear" icon with "CSS" on top of it):


#tablename-table tr.table-heading th, #dbaphd-table tr.table-row td {
    font-size: 16px;
    line-height: 1.15;
    padding: 5px 5px 10px 15px !important;
}
#tablename-table tr.table-row td span.mobile-title {
    display:none;
    font-weight:400;
}
@media (max-width:799px) {
    #dbaphd-table tr.table-row td span.mobile-title {
        display:inline;
    }
    #dbaphd-table tr.table-heading {
        display:none;
    }
    #dbaphd-table tr.table-row td {
        display:block;
        width:100% !important;
    }
    #dbaphd-table tr.table-row td.last_td {
        border-bottom: 2px dotted #0039a6;
        padding-bottom:15px !important;
        margin-bottom:15px;
        border-top: none;
    }
    #dbaphd-table tr.table-row td.first_td {
        border-top: none;
        font-size:18px;
    }
}

------------------------------------------------------------------------------------------

Sortable Tables


You can create sortable tables (by their column headers) by using the Plugin Formidable Forms. If you're an administrator, you can add Formidable to your website by visiting your dashboard and clicking Plugins and then selecting activate Formidable.

Next, you'll need to create a view and add that view to your webpage. Below is a useful article on how to get started creating views on Formidable.



Feedback and Knowledge Base