html - 如何自动将 HTML 表格单元格内的文本换行？

Question

我在 HTML 中遇到以下问题。

我的这个表只包含一个 thead:

<table border="1" class="table_legenda" width="100%">

    <thead>
    <tr>
        <th width="8.33%">Codice</th>
        <th width="2%">Stato</th>
        <th width="8.33%">Creazione<</th>
        <th width="8.33%">Registrazione</th>
        <th width="6.33%">Autore Cr</th>
        <th width="6.33%">Autore Con</th>
        <th width="6.33%">Autore Acq</th>
        <th width="8.33%">Totale Imponibile</th>
        <th width="24.66%">Fornitore</th>
        <th width="4.33%">RM riserva</th>
        <th width="8.33%">Errore</th>
        <th width="8.33%">Azione</th>
    </tr>
    </thead>
</table>

现在，如您所见，每个单元格都设置了一个百分比宽度并包含一个文本值。

我的问题是，如果单元格的文本值比单元格的可用空间长，它将自动隐藏。我希望文本自动换行。

我怎样才能获得这种行为？

谢谢

Answer 1

您需要将表格设置为具有 table-layout:fixed 并将第 th 元素设置为 overflow-wrap:break-word

.table_legenda {
  table-layout: fixed;
}
.table_legenda th {
  overflow-wrap: break-word;
}

<table border="1" class="table_legenda" width="100%">
  <thead>
    <tr>
      <th width="8.33%">Codice</th>
      <th width="2%">Stato</th>
      <th width="8.33%">Creazione</th>
      <th width="8.33%">Registrazione</th>
      <th width="6.33%">Autore Cr</th>
      <th width="6.33%">Autore Con</th>
      <th width="6.33%">Autore Acq</th>
      <th width="8.33%">Totale Imponibile</th>
      <th width="24.66%">Fornitore</th>
      <th width="4.33%">RM riserva</th>
      <th width="8.33%">Errore</th>
      <th width="8.33%">Azione</th>
    </tr>
  </thead>
</table>

---

演示在 http://jsfiddle.net/ma4bc7zj/