1

我在表格中遇到了一个小问题，其中我在多个列中有很长的单个单词或多个中等大小的单词，占用了大量空间。我得到一个看起来像http://cl的结果。ly/8cb66d08b6b9755ce858 这些行设置了宽度百分比，即使我希望每个行都自然增长，而且换行器也不会破坏它，并且 display: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 文件生成的。如果您知道任何适用于 jQuery 1.8 的插件（我见过一些可以工作的插件，但它们需要 1.3）。我想知道由于其中的数据而正在设置表格列宽，并且修改该数据不会自动修改列宽，因此我是否可能需要进行手动更改。

4

1 回答 1

3

部分问题可能是您已将自动换行的 CSS 属性分配给表格，而不是包含数据的实际单元格。看看你是否可以分配一个样式或类来设置word-wrap: break-word;实际<td>元素的属性。

另一个需要考虑的因素是使用&shy;软连字符。如果你可以——无论是在文本呈现到页面之前的服务器端还是在使用 JavaScript 的浏览器中——将这个软连字符插入到你的文本中，浏览器就会知道在那个时候打断你的话。

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

于 2010-11-10T22:31:06.503 回答