Responsive table?

  • vms01

    (@vms01)


    6 years, 11 months ago

    Hi all
    How do I make the table responsive?
    the following lines dont work on TinyMCE table:
    ========================================
    /* Typography */
    body,
    button,
    input,
    select,
    textarea {
    font-size: 10px;
    font-size: 0.8rem;
    }
    ========================================

    All I need is just reducing the font size & table size, in other words: zoom out.
    Thanks in advance.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter vms01

    (@vms01)

    6 years, 11 months ago

    1964337

    This pic will probably clear things up,
    The table will never fully displayed on mobile devices, unless i zoom out,
    I want to make the right one as the default look.

    here is the code of the table

    <!-- wp:tadv/classic-paragraph -->
<table>
<tbody>
<tr>
<td style="width: 412px;">
<p>qwertyusdfghjkewrtyuidfghj</p>
<p>dfghdgjhdfgjhjdg</p>
<p>ghkfdgfhgfgfj</p>
<p>rdgfgjhghfgjhhgh</p>
</td>
<td style="width: 148px;"><img alt="" src="https://dynaimage.cdn.cnn.com/cnn/q_auto,w_412,c_fill,g_auto,h_232,ar_16:9/http%3A%2F%2Fcdn.cnn.com%2Fcnnnext%2Fdam%2Fassets%2F190523102340-10-best-beaches-united-states-restrictred.jpg"></td>
</tr>
</tbody>
</table>
<!-- /wp:tadv/classic-paragraph -->
    • This reply was modified 6 years, 11 months ago by vms01.
    • This reply was modified 6 years, 11 months ago by vms01.
    Plugin Author Andrew Ozz

    (@azaozz)

    6 years, 11 months ago

    Unfortunately tables in HTML are non-responsive by design. There are few “tricks” to make them responsive with CSS, but none is bulletproof.

    Reducing the font size is not a great idea, it makes it harder to read. Setting the table widths in percent values works but can “squeeze” the cells a lot if you have several columns.

    Looking at the screenshot, perhaps try setting the two columns widths at 50% and the table at 100% (in CSS).

    smswordpress

    (@smswordpress)

    6 years, 11 months ago

    VMS01

    Try this table plugin I’ve tried most but for your table this should work fine:

    https://ww.wp.xz.cn/plugins/make-tables-responsive/

    When you add your table in TinyMCE be sure to clear the table formatting

    Format menu > remove styling

    Then highlight/select the first row of your table

    Table menu > table > Row > Table Row Properties > Row Type > Header

    Plugin Author Andrew Ozz

    (@azaozz)

    6 years, 10 months ago

    Yep, that plugin is pretty much as far as you can do with making HTML tables responsive.

    Problem is larger tables become confusing as the rows turn into columns… Smaller/narrower tables work better.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Responsive table?’ is closed to new replies.

Tags