Усечение длинных строк в таблицах эллипсов html - PullRequest
Новая
       50

Усечение длинных строк в таблицах эллипсов html

1 голос
/ 10 ноября 2010

У меня небольшая проблема с таблицами, в которых у меня длинные длинные слова или слова среднего размера в нескольких столбцах, которые занимают много места.Я получаю результат, который выглядит следующим образом: http://cl. ly / 8cb66d08b6b9755ce858 Строки имеют установленный процент ширины, хотя я хотел бы, чтобы в каждом из них был естественный рост, так как строка-обертка не сломает его и не отобразит: ни один из них на самом деле неостановите это, поскольку стол растет естественно.То, что я хотел бы, чтобы таблица оставалась в родительской ширине набора (синий раздел с некоторыми отступами).Кроме того, заголовок - это 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).Мне интересно, если мне придется вносить изменения вручную, так как ширина столбцов таблиц устанавливается из-за данных в них, и изменение этих данных не приведет к автоматическому изменению ширины столбцов.

1 Ответ

3 голосов
/ 11 ноября 2010

Частично проблема может заключаться в том, что вы присвоили таблице свойство CSS для переноса слов, но не фактические ячейки, содержащие данные.Посмотрите, можете ли вы назначить стиль или класс, который устанавливает свойство word-wrap: break-word; для фактического элемента <td>.

Еще одно соображение, на которое стоит обратить внимание, это использование мягкого дефиса &shy;.Если вы можете - либо на стороне сервера до того, как текст будет отображен на странице, либо в браузере с использованием JavaScript - вставьте этот символ мягкого дефиса в ваш текст, браузер будет знать, что нужно разбить ваши слова на этом этапе.

Наконец, посмотрите, помогает ли применение элементов <colgroup> и <col> в начале таблицы как очистить структуру таблицы, так и более точно определить ширину столбцов.Этот последний пункт может не сильно повлиять на перенос слов и переносов в тексте, но может помочь при разметке таблицы.

...