jQuery UI resizable - ridimensiona le dimensioni delle colonne della tabella con overflow

Question

Ho una tabella con colonne ridimensionabili implementate con jQuery UI Resizable. Tutto funziona bene, tranne che non posso modificare la dimensione delle colonne ridotta rispetto al contenuto. Non posso usare la regola del layout della tabella perché dopo quella regola la tabella non può essere più ampia della dimensione della finestra. Come risolverlo?

$(function () { $("table th").resizable({
    minWidth: 100,
    resize: function (event, ui) {
      const sizerID = "#" + $(event.target).attr("id"); const { width } = ui.size; $(sizerID).children("span").width(width);
    }
  });
});

.table-holder {
  overflow: auto;
}

.table thead span {
  display: block;
}
.table tbody tr td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>



<div class="table-holder">
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th id="Company"><span>Company</span></th>
        <th id="Contact"><span>Contact</span></th>
        <th id="Country"><span>Country</span></th>
      </tr>
    </thead>
    <tbody>
      <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>
      <tr>
        <td>Ernst Handel</td>
        <td>Roland Mendel</td>
        <td>Austria</td>
      </tr>
      <tr>
        <td>Island Trading</td>
        <td>Helen Bennett</td>
        <td>UK</td>
      </tr>
      <tr>
        <td>Laughing Bacchus Winecellars</td>
        <td>Yoshi Tannamuri</td>
        <td>Canada</td>
      </tr>
      <tr>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
      </tr>
    </tbody>
  </table>
</div>

Codepen demo https://codepen.io/DenisDov/pen/WNwodEe

Answer 1

Come spiegato in Perché overflow: hidden non funziona in un ? il problema non è con il ridimensionamento, ma con la natura degli elementi TD. Ereditano le proprietà della cella di tabella e non le proprietà di blocco, quindi non è possibile ricondurre il contenuto allo stesso modo.

Come suggerito da alcuni nel thread, puoi avvolgere il contenuto della cella con un elemento DIV e traboccare. Ecco un esempio con il tuo codice.

$(function() { $(".table th").resizable({
    minWidth: 100
  });
});

.table-holder {
  overflow: auto;
}

.table thead span {
  display: block;
  width: 100%;
}

.table tbody tr td div {
  display: inline-block;
  white-space: nowrap;
  position: relative;
  /* must be relative */
  width: 100%;
  /* fit to table cell width */
  margin-right: -1000px;
  /* technically this is a less than zero width object */
  overflow: hidden;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>



<div class="table-holder">
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th id="Company"><span>Company</span></th>
        <th id="Contact"><span>Contact</span></th>
        <th id="Country"><span>Country</span></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div>Alfreds Futterkiste</div>
        </td>
        <td>
          <div>Maria Anders</div>
        </td>
        <td>
          <div>Germany</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>Centro comercial Moctezuma</div>
        </td>
        <td>
          <div>Francisco Chang</div>
        </td>
        <td>
          <div>Mexico</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>Ernst Handel</div>
        </td>
        <td>
          <div>Roland Mendel</div>
        </td>
        <td>
          <div>Austria</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>Island Trading</div>
        </td>
        <td>
          <div>Helen Bennett</div>
        </td>
        <td>
          <div>UK</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>Laughing Bacchus Winecellars</div>
        </td>
        <td>
          <div>Yoshi Tannamuri</div>
        </td>
        <td>
          <div>Canada</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>Magazzini Alimentari Riuniti</div>
        </td>
        <td>
          <div>Giovanni Rovelli</div>
        </td>
        <td>
          <div>Italy</div>
        </td>
      </tr>
    </tbody>
  </table>
</div>