Support » Plugin: Table Sorter » Style changed in the table header when using tablesorter class

  • Resolved zumcorp

    (@zumcorp)


    Hi there,
    The plugin works great, congratulations for a super work!
    I have a issue, though: the header style differs from the rest.
    I have a table which presentation I handle using CSS.
    When I use my style class combined with tablesorter class, the functionality works great but the table header has different border colors.
    The table itself is data-only. All presentation is handled via CSS.

    My style code is as follows:
    `table.TSTComparisonTable { border-collapse: collapse; border: 1px solid #000000; background: #f8fcb9; padding=5; align=left }
    .TSTComparisonTable tr:nth-child(2n) { background: #fcfc92; }
    .TSTComparisonTable th {background: #f9fc5e; font-weight: bold; text-align: center; vertical-align: bottom;}
    .TSTComparisonTable td {text-align: center; vertical-align: center;}
    .TSTComparisonTable th:nth-child(1) { text-align: left; width: 220px;}
    .TSTComparisonTable td:nth-child(1) { text-align: left; }
    .TSTComparisonTable td { padding: 5px 5px 5px 10px; }
    .TSTComparisonTable th { padding: 5px 20px 5px 10px; }`

    The table is this:

    <table class="tablesorter TSTComparisonTable" >
    <thead>
    <tr>
    <th>Col 1</th>
    <th>Col 2</th>
    <th>Col 3</th>
    <th>Col 4</th>
    <th>Col 5</th>
    <tr>
    </thead>
    <tbody>
    <tr>
    <td>Row 1</td>
    <td>1,000</td>
    <td>25,000</td>
    <td>-</td>
    <td>-</td>
    </tr>
    <tr>
    <td>Row 2</td>
    <td>500</td>
    <td><span style="font-size: x-small;">N/A</span></td>
    <td>-</td>
    <td>-</td>
    </tr>
    <tr>
    <td>Row 3</td>
    <td>500</td>
    <td>5,000</td>
    <td>-</td>
    <td>50&nbsp;<span style="font-size: x-small;">note 1</span></td>
    </tr>
    <tr>
    <td>Row 4</td>
    <td>0</td>
    <td><span style="font-size: x-small;">N/A</span></td>
    <td>-</td>
    <td>25&nbsp;<span style="font-size: x-small;">note 2</span></td>
    </tr>
    </tbody></table>

    And the link to see the results is this.

    Can you please give me some directions? I’d like to handle this via CSS, but not sure about the rules for CSS used within Table Sorter plug-in.

    Thanks in advance!
    JC

    https://wordpress.org/plugins/table-sorter/

Viewing 1 replies (of 1 total)
  • Thread Starter zumcorp

    (@zumcorp)

    I found how to solve it. Just added a line in my CSS:

    /* Customize tablesorter header border colors */
    table.tablesorter thead tr th { border: 1px solid #000000; }

    Also, as a tip, in order to avoid that the small triangles for sorting interfere with your column header text, add the following:

    table.tablesorter th { padding-right: 20px; }

    Excellent plug-in. Thanks!

    JC

Viewing 1 replies (of 1 total)
  • The topic ‘Style changed in the table header when using tablesorter class’ is closed to new replies.