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>

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

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

如何获取此行为？

TNX

Answer 1

您需要将表格设置为table-layout:fixed，th元素为white-space:break-word

.table_legenda {
  table-layout: fixed;
}
.table_legenda th {
  word-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/gaby/wkrn1mva/

如何自动将HTML表格单元格中的文本换行到新行？

1 个答案: