[Table] Table is not responsive on small screens

[pytjiam]

Table is not responsive on small screens, column is being cut off.

Desktop view:

Mobile view:

HTML code:

<table>
  <thead>
    <tr>
      <th>Field</th>
      <th>Example Value</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>iat</code></td>
      <td><code>1587494962</code></td>
      <td>The time at which the JWT was issued. Unix timestamp in SECONDS.</td>
    </tr>
    <tr>
      <td><code>jti</code></td>
      <td><code>c5ba8f24-1a14-4c10-bfdf-3fbe8ce511b5</code></td>
      <td>A unique ID for the JWT.</td>
    </tr>
    <tr>
      <td><code>iss</code></td>
      <td><code>Vonage</code></td>
      <td>The issuer of the JWT. This will always be 'Vonage'.</td>
    </tr>
    <tr>
      <td><code>payload_hash</code></td>
      <td><code>d6c0e74b5857df20e3b7e51b30c0c2a40ec73a77879b6f074ddc7a2317dd031b</code></td>
      <td>A SHA-256 hash of the request payload. Can be compared to the request payload to ensure it has not been tampered with during transit.</td>
    </tr>
    <tr>
      <td><code>api_key</code></td>
      <td><code>a1b2c3d</code></td>
      <td>The API key associated with the account that made the original request.</td>
    </tr>
    <tr>
      <td><code>application_id</code></td>
      <td><code>aaaaaaaa-bbbb-cccc-dddd-0123456789ab</code></td>
      <td>(Optional) The id of the application that made the original request if an application was used.</td>
    </tr>
  </tbody>
</table>

[yinonov]

responsive tables are a big challenge. solutions are mostly opinionated and require context of usage. a generic component cannot anticipate all cases. common practices require author's (YOUR) intervention (e.g. render less columns in narrow viewports etc')

This article can help understanding the challenge https://www.smashingmagazine.com/2022/12/accessible-front-end-patterns-responsive-tables-part1/

Would you expect context in cells to trim?

[rinaok]

Hey @pytjiam , Could you please let me know if this is still an issue or if we can close it?