Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

mail.ru removes <caption> element #127

Open
M-J-Robbins opened this issue Mar 28, 2023 · 1 comment
Open

mail.ru removes <caption> element #127

M-J-Robbins opened this issue Mar 28, 2023 · 1 comment
Labels
Other clients Samsung, SFR, Orange, T-Online, Onet, …

Comments

@M-J-Robbins
Copy link
Contributor

When using a table with a caption such as this example from W3C

<table>
  <caption>Concerts</caption>
  <tr>
    <th>Date</th>
    <th>Event</th>
    <th>Venue</th>
  </tr>
  <tr>
    <td>12 Feb</td>
    <td>Waltz with Strauss</td>
    <td>Main Hall</td>
  </tr>
</table>

Mail.ru will remove the <caption> element and place the text before the <table>

  Concerts
 <table><tbody><tr>
    <th>Date</th>
    <th>Event</th>
    <th>Venue</th>
  </tr>
  <tr>
    <td>12 Feb</td>
    <td>Waltz with Strauss</td>
    <td>Main Hall</td>
  </tr></tbody></table>

This means you will not only loose the semantic meaning of the <caption> but also any styling on it.
If you add a <div> inside the <caption> to try and maintain styles it will add a <tr> and <td> to the <table> and place the <div> there.

<table>
<tbody><tr><td><div>Concerts</div>
</td></tr><tr>
  <th>Date</th>
  <th>Event</th>
  <th>Venue</th>
</tr>
<tr>
  <td>12 Feb</td>
  <td>Waltz with Strauss</td>
  <td>Main Hall</td>
</tr>
</tbody></table>

So the best workaround I've found is to add a <span> inside the <caption> you can apply styles there and they will remain, however you will still loose the relationship to the table.

@M-J-Robbins
Copy link
Contributor Author

Example of the workaround

<table>
  <caption><span style="color:red">Concerts</span></caption>
  <tr>
    <th>Date</th>
    <th>Event</th>
    <th>Venue</th>
  </tr>
  <tr>
    <td>12 Feb</td>
    <td>Waltz with Strauss</td>
    <td>Main Hall</td>
  </tr>
</table>

will become.

<span style="color:red;">Concerts</span>
<table>
  <tbody><tr>
    <th>Date</th>
    <th>Event</th>
    <th>Venue</th>
  </tr>
  <tr>
    <td>12 Feb</td>
    <td>Waltz with Strauss</td>
    <td>Main Hall</td>
  </tr>
</tbody></table>

@hteumeuleu hteumeuleu added the Other clients Samsung, SFR, Orange, T-Online, Onet, … label Mar 30, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Other clients Samsung, SFR, Orange, T-Online, Onet, …
Projects
None yet
Development

No branches or pull requests

2 participants