Как я могу обрезать центральный столбец текста при изменении размера таблицы, но оставить только 2 боковых столбца? - PullRequest
Новая
       14

Как я могу обрезать центральный столбец текста при изменении размера таблицы, но оставить только 2 боковых столбца?

1 голос
/ 12 апреля 2011

У меня есть таблица с тремя столбцами текста, из-за которой у меня возникают проблемы с правильным изменением размера. В среднем столбце содержится много некритичного текста, который должен быть обрезан (с многоточием) при изменении размера страницы, но два краевых столбца содержат текст, который не может быть вырезан. Ни один из текста не должен быть завернут. Вот пример HTML: 

<table id="resize-table">
<thead>
    <tr>
        <th class="col-1">Column 1</th>
        <th class="col-2">Column 2</th>
        <th class="col-3">Column 3</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td class="col-1">Unclippable text</td>
        <td class="col-2">Clippable text that is very long. Clippable text that is very long.</td>
        <td class="col-3">Unclippable text</td>
    </tr>
</tbody>

А вот CSS, который я использую: 

#resize-table{
    width:50%;
    border-collapse:collapse;
}
#resize-table th{
    padding:0.2em;
    border:1px solid black; 
}
#resize-table td{
    padding:0.2em;
    border:1px solid black;
    white-space:nowrap;
}
#resize-table .col-2{
    overflow: hidden;
    text-overflow: ellipsis;
}

Когда я изменяю размер страницы, средний столбец никогда не обрезается и многоточие никогда не отображается. Вместо этого ячейки таблицы просто перестают уменьшаться, когда достигают ширины содержимого. Я много играл с разными настройками ширины, но не получил ничего, чтобы работать должным образом. Я также попробовал макет таблицы: исправлено, но это просто приводит к одинаковому изменению размера всех столбцов. Есть идеи?

РЕДАКТИРОВАТЬ: я просматриваю это в Chrome, но кросс-браузерное решение было бы идеально.

1 Ответ

0 голосов
/ 12 апреля 2011

Я не могу сказать, может ли это быть сделано исключительно в CSS, но если вы подумаете о некотором jQuery, вы сможете достичь чего-то подобного.Подумайте о следующем. 

 $(window).resize(function() {
  //if the table gets less that 300 say
  if ($("#resize-table").width() < 300) {
      //class small added so we do not repeat the operation unnecessarily
      if (!$(".col-2").hasClass("small")) {
        $(".col-2").each(function(){
            //put the content in a hidden div for later and only display the ellipses
            $(this).html("..." + "<div class='content' style='display:none'>" + $(this).html() + "</div>").addClass("small");
        });           
    }
} else {
    //else the table is large enough so
    if ($(".col-2").hasClass("small")) {
        $(".col-2").each(function() {
            //copy the td content back out of the hidden div
            $(this).html($(this).find(".content").html()).removeClass("small");
        });
    }
 }
});

Теперь я не пробовал это ни в каком строгом смысле, но он справляется со своей задачей.Так что это элементарная демонстрация осуществимости.

...