Question

我在表格中遇到一个小问题，我在多个列中使用长单个单词或多个中等大小的单词会占用大量空间。我得到的结果看起来像http://cl。 LY / 8cb66d08b6b9755ce858 行设置了宽度百分比，即使我希望每个行都有自然增长，行包装也不会破坏它并显示：当表自然增长时，none实际上不会停止它。我想要的是桌子留在父母设置的宽度（蓝色部分有一些填充）。同样，标题是桌子周围的div，用于造型，我无法改变。

<div class="table-wrapper group">
  <table class="tabular sortable" id="campaign_table" style="table-layout:fixed; word-wrap: break-word; ">
    <thead>
      <tr>
        <td class="sorttable_nosort" style="border-right-width: 1px; border-right-style: solid; border-right-color: rgb(255, 255, 255); ">
          <input type="checkbox" id="check_all_2" name="check_all_2" title="Select All" onclick="selectAllTable(document.wizard_form, check_all_2); checkIsSelected([ 'by_date', 'display_hidden', 'check_all_2']);">
        </td>
        <td width="37%" style="border-right-width: 1px; border-right-style: solid; border-right-color: rgb(255, 255, 255); ">List/Campaign</td>
        <td width="43%" style="border-right-width: 1px; border-right-style: solid; border-right-color: rgb(255, 255, 255); ">Template &amp; Segmentation</td>
        <td width="17%" style="min-width: 140px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(255, 255, 255); ">Date Sent</td>
        <td width="4%">Sent</td>
      </tr>   
    </thead>

    <tbody class="campaign-table">
      <input type="hidden" id="campaignNum" name="campaignNum" value="1">
      <tr class="evenRow">
        <td>
          <label>
            <input type="checkbox" id="select_981" name="select_981" onclick="checkIsSelected(['by_date', 'display_hidden']);">  
          </label>
        </td>
        <td>0ThisIsAReallyLongNameThatHasNoSpacesHopefullyMaxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
        <td>ThisIsAReallyLongNameThatHasNoSpacesHopefullyMax <br>  (BiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiggggggggggggggggggggggggggggggggggggggggText)</td>
        <td>11/08/10 4:28 PM</td>
        <td>0</td>
      </tr>
    </tbody>
    <tfoot></tfoot>
  </table> 
</div>

注意，大多数类和样式都是从某些JavaScript文件生成的。如果您知道任何与1.8的jQuery一起使用的插件（我已经看到一些可以工作但它们需要1.3的插件）。我想知道是否可能必须进行手动更改，因为表格列宽度正在设置，因为它们中的数据并且修改数据不会自动修改列的宽度。

Answer 1

问题的部分原因可能是您已将word-wrap的CSS属性分配给表，而不是包含数据的实际单元格。看看您是否可以指定在实际word-wrap: break-word;元素上设置<td>属性的样式或类。

要考虑的另一个考虑因素是使用软连字符。如果您可以 - 在文本呈现到页面之前的服务器端或使用JavaScript的浏览器中 - 将此soft hyphen character插入到您的文本中，浏览器将知道在那时打破您的单词。

最后，看一下在表的开头应用<colgroup>和<col>元素是否有助于清理表结构并更明确地定义列宽。最后一点对于实际影响文本的自动换行和连字可能没什么影响，但可能有助于表格布局。

截断表格中的长字符串省略了html

1 个答案: