Html Question posted in
Some basic documentation can be found here.

Html – How can I make a table width 100% for Safari/Firefox Reader Mode?

On browsers like Safari and Firefox, the table width isn’t shown 100% in Reader View Mode. But if I add <table width="100%">, HTML validators flag it as an obsolete element. Adding styles won’t work as Reader View Mode strips CSS. Tried using inline styles for the table but that too is stripped away in Reader View Mode.

How to resolve this issue?

My code for table:

<table width="100%">
    <caption>The table below shows nutritional values per serving without the additional fillings.</caption>
    <tbody>
        <tr>
            <td>Calories</td><td>227kcal</td>
        </tr>
        <tr>
            <td>Carbs</td><td>0g</td>
        </tr>
        <tr>
            <td>Protein</td><td>20g</td>
        </tr>
        <tr>
            <td>Fat</td><td>22g</td>
        </tr>
    </tbody>
</table>
Tags:

3

Answers


  1. 0

    Just checked in Google Chrome, using a CSS class will do the trick, for example:

    .tbl_reader {
    width: 100%;
}

    and of course, don’t forget to add the class="tbl_reader" to the table tag.

    Login or Signup to reply.
  2. 0

    You can use colgroup tag. The colgroup is very useful to apply styles to all columns in table. I provide updated code using colgroup.

    <table>
    <caption>The table below shows nutritional values per serving without the additional fillings.</caption>
    <colgroup>
        <col style="width: 50%">
        <col style="width: 50%">
    </colgroup>
    <tbody>
        <tr>
            <td>Calories</td><td>227kcal</td>
        </tr>
        <tr>
            <td>Carbs</td><td>0g</td>
        </tr>
        <tr>
            <td>Protein</td><td>20g</td>
        </tr>
        <tr>
            <td>Fat</td><td>22g</td>
        </tr>
    </tbody>
</table>
    Login or Signup to reply.
  3. 0

    You can add a class to the table and width: 100% to the class.

    This should solve.

    <table class="table">
<caption>The table below shows nutritional values per serving without the additional fillings.</caption>
<tbody>
    <tr>
        <td>Calories</td><td>227kcal</td>
    </tr>
    <tr>
        <td>Carbs</td><td>0g</td>
    </tr>
    <tr>
        <td>Protein</td><td>20g</td>
    </tr>
    <tr>
        <td>Fat</td><td>22g</td>
    </tr>
</tbody>

    CSS:

    .table { width: 100%; }

    Also, the width attribute is deprecated.

    A simple google search –

    The width attribute, now deprecated, was once the correct way to
    adjust the width of a table’s columns.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search