Ширина столбца не работает должным образом с использованием дисплея: стол-столбец; и пустое пространство: nowrap;

Question

У меня есть таблица дивы с помощью display: column; width: 100px;

Клетки используют display: table-cell; white-space: nowrap; overflow: hidden;, потому что я всегда хочу, чтобы данные, чтобы быть на той же строке, и если он слишком долго она должна быть обрезана.

Адрес jsfiddle.

 <div class="table"> 
     <div class="column1" style="display:table-column;width:50px;overflow:hidden;"></div> 
     <div class="column2" style="display:table-column;width:50px;overflow:hidden;"></div> 
     <div class="column3" style="display:table-column;width:200px;overflow:hidden;"></div> 
     <div class="column4" style="display:table-column;width:50px;overflow:hidden;"></div> 
     <div class="row"> 
      <div class="cell"><span>a sdf</span></div> 
      <div class="cell"><span>as dlfk jas dofj </span></div> 
      <div class="cell"><span>as klödfjasdfj asöldfjk as</span></div> 
      <div class="cell"><span>a sdf</span></div> 
     </div> 
     <div class="row"> 
      <div class="cell"><span>a sdf</span></div> 
      <div class="cell"><span>as dlfk jas dofj </span></div> 
      <div class="cell"><span>as klödfjasdfj asöldfjk </span></div> 
      <div class="cell"><span>a sdf</span></div> 
     </div> 
     <div class="row"> 
      <div class="cell"><span>a sdf</span></div> 
      <div class="cell"><span>as dlfk jas dofj </span></div> 
      <div class="cell"><span>kludd as klödfjasdfj asöldfjkaskj fhalksfh alskdfhak dfhaslkfhasldfh asklh aslkdfh asklfh</span></div><!-- Add this to the cell: style="max-width:0px;"--> 
      <div class="cell"><span>a sdf</span></div> 
     </div> 
     <div class="row"> 
      <div class="cell"><span>a sdf</span></div> 
      <div class="cell"><span>as dlfk jas dofj </span></div> 
      <div class="cell"><span>as klödfjasdfj asöldfjk </span></div> 
      <div class="cell"><span>a sdf</span></div> 
     </div> 
    <div> 

.table{ 
    display:table; 
    table-layout:fixed; 
    border:1px solid; 
} 

.row{ 
    display:table-row; 
} 

.cell{ 
    display:table-cell; 
    border-right:1px solid; 
    white-space:nowrap; 
    overflow:hidden; 
} 

.cell:last-of-type{ 
    border:0; 
} 

.cell span{ 
    text-overflow:ellipsis; 
} 

Таблица действует как должно, пока данные не будут длиннее 200 пикселей. Я мог бы решить эту проблему, установив max-width: 200px; на ячейку. Однако ширина является динамическим значением с сервера, и я не хочу отображать эти ненужные данные для каждой ячейки атрибута style.

Можно ли написать мои столбцы, чтобы решить эту проблему?

Еще одна странная вещь, Если я установил max-width: 0px; в атрибуте стиля в ячейке с очень длинными данными, он отображает 200px! Может ли кто-нибудь объяснить это?

Answer 1

Я думаю, что это то, о чем вы спрашиваете, дайте мне знать, если я ошибаюсь.

установить [макс ширину], чтобы все, что вы хотите, а затем установите [переполнение: прокрутки]

// CSS BLOCK

.cell { 
    display:table-cell; 
    border-right:1px solid; 
    white-space:nowrap; 
    overflow:scroll; 
    border: 1px solid; 
    max-width: 200px; 
} 

Answer 2

Вы пробовали обрезая строку на уровне исходного кода. Если это SQL-запрос (и т. Д.) Из базы данных, почему бы просто не попросить меньше?

Вы также можете использовать функцию javascript .substring() для обрезания текста.

<div id="text_display"></div> 
<script> 
var content = "Hello world!"; 
document.getElementById("text_display").innerHTML = content.substring(0, 6);; 
</script> 

Если вы хотите идти по пути отсечения в таблице самый попробовать использовать DIV вместо пяди. Применение стиля, который я использовал к тегу span, не обрезало. Казалось бы, что все, что работает как табличный компонент, придерживается своих ограничений. Мне еще нужно найти, как красиво обрезать ячейки таблицы. Обертка содержимого, затем в теге div дает клиппинг, который вы желаете. На данный момент, однако, если вы действительно показываете табличные данные, вы можете пойти по маршруту стол с div теги внутри каждого td на ячейки, которые нуждаются в обрезке.

HTML:

<div class="table"> 
     <div class="column1" style="display:table-column;width:50px;overflow:hidden;"></div> 
     <div class="column2" style="display:table-column;width:50px;overflow:hidden;"></div> 
     <div class="column3" style="display:table-column;width:200px;overflow:hidden;"></div> 
     <div class="column4" style="display:table-column;width:50px;overflow:hidden;"></div> 
    <div class="table"> 
     <div class="row"> 
      <div class="cell"><div>a sdf</div></div> 
      <div class="cell"><div>as dlfk jas dofj </div></div> 
      <div class="cell"><div>as klödfjasdfj asöldfjk as</div></div> 
      <div class="cell"><div>a sdf</div></div> 
     </div> 
     <div class="row"> 
      <div class="cell"><div>a sdf</div></div> 
      <div class="cell"><div>as dlfk jas dofj </div></div> 
      <div class="cell"><div>as klödfjasdfj asöldfjk </div></div> 
      <div class="cell"><div>a sdf</div></div> 
     </div> 
     <div class="row"> 
      <div class="cell"><div>a sdf</div></div> 
      <div class="cell"><div>as dlfk jas dofj </div></div> 
      <div class="cell"><div>kludd as klödfjasdfj asöldfjkaskj fhalksfh alskdfhak dfhaslkfhasldfh asklh aslkdfh asklfh</div></div> 
      <div class="cell"><div>a sdf</div></div> 
     </div> 
     <div class="row"> 
      <div class="cell"><div>a sdf</div></div> 
      <div class="cell"><div>as dlfk jas dofj </div></div> 
      <div class="cell"><div>as klödfjasdfj asöldfjk </div></div> 
      <div class="cell"><div>a sdf</div></div> 
     </div> 
    <div> 
    <div> 

УС:

.table{ 
    display:table; 
    table-layout:fixed; 
    border:1px solid; 
} 

.row{ 
    display:table-row; 
} 

.cell{ 
    display:table-cell; 
    border-right:1px solid; 
} 
.cell:last-of-type{ 
    border:0; 
} 

.cell div { 
    white-space:nowrap; 
    overflow:hidden; 
    width:50px; 
    background:lightblue; 
} 
.row div:nth-child(3) div { 
    background:white; 
    width:200px; 
}