resize funktionniert nicht in Firefox

[Forumsgast]

Hallo,

folgender Code funktioniert in Chrome, Opera und Edge jedoch nicht in Firefox (das Symbol zum ziehen wird nicht angezeigt, somit kein resize möglich):

<style>
.resizable th {
   overflow: hidden;
  resize: horizontal;
}

td {
  white-space: nowrap;
}

</style>

<table class="resizable">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  </table>

Wenn ich hier schau https://caniuse.com/?search=resize dann müsste es kompatibel sein (hab grade Firefox aktualisiert und habe Version 116.0.3)

[Forumsgast]

Ich bin an der Stelle nicht sicher, ob FF möglicherweise das resize verhindert, weil nur th, nicht aber td horizontal erlaubt ist.
Die Implementierung kann durchaus von browser zu browser leicht unterschiedlich sein.

Im ersten Schritt würde ich einmal eine Tabelle nur mit head aber ohne daten versuchen.

Falls ich damit falsch liege, dann hilft nur eine intensive recherche in der FF Doku.

[Forumsgast]

resize funktioniert nicht mit overflow zusammen

[Forumsgast]

Note:

The resize property does not apply to inline elements or to block elements where overflow="visible". So, make sure that overflow is set to "scroll", "auto", or "hidden".

Laut Doku funktionniert resize ausschliesslich mit overflow, siehe https://www.w3schools.com/cssref/css3_pr_resize.php

[Forumsgast]

Firefox unterstützt wohl das Resize-Attribut bei th-Elementen nicht. Hier muss auf JavaScript zurückgegriffen werden.

[Forumsgast]

https://developer.mozilla.org/en-US/...tiredLocale=de