如何修复使用DataTables.net打破容器外表的长列值问题？ [英] How do I fix long column value issue which breaks table outside of container, using DataTables.net?

问题描述

当一个列具有长值，没有空格时，表格将以任何具有设置宽度（或百分比）的容器分隔。目前，我需要一个具有50％宽度的表，长度值将表从50％宽度的容器中打开。

When one column has a long value, without spaces, the table breaks out of any container with a set width (or percentage). Currently, I'm needing a table with 50% width, and the long value breaks the table out of the 50% width container.

这个jsFiddle简化了我的问题，宽度为70％，以及我使用的任何自定义CSS重写典型的DataTables.net CSS（除了视觉样式）。

This jsFiddle simplifies my issue, with a width of 70%, and any custom CSS I've used overriding typical DataTables.net CSS (besides visual styling).

http://jsfiddle.net/mswieboda/8qVh4/

HTML：

<div class="container">
  <table class="grid"></table>
</div>

CSS：

.dataTable {
  width: 100% !important;
  margin: 0;
}
.dataTables_wrapper {
  position: relative;
}
.dataTables_scrollHeadInner {
  width: 100% !important;
}
.container {
  position: relative;
  width: 70%;
  border: 1px solid #f0f;
}
.container .grid {
  position: relative;
  overflow-x: hidden;
}

注意：我知道我不应该使用 ！important ，，但这是另一天的问题。

a href =http://jsfiddle.net/mswieboda/8qVh4/ =nofollow> jsFiddle ，以及我使用的DataTables.net选项。

Please see the jsFiddle for the specific JS, and DataTables.net options I'm using.

我想使用CSS来截断/截断长整数值。我可能需要像：

I'd like to cut off/truncate the long value with ellipses using CSS. I probably need something like:

.dataTable tbody td {
  text-overflow: ellipsis;
  overflow: hidden;
}

唯一适用于我的解决方案是有一个 中设置 max-width > width 在 div ，但我不想设置一个固定的宽度，因为我想要从DataTables.net选项，使用 sWidth 选项。

The only solution that's worked for me is to have a div in the td and setting a max-width/width on the div, but I don't want to set a fixed width, since I want it to be figured out from DataTables.net options, using the sWidth option.

我做了一些研究，但没有想出任何固溶体。有没有人有这个解决方案？

I've done some research, but haven't come up with any solid solutions yet. Does anyone have a solution for this?

推荐答案

添加这个CSS。必须在表格renderd之前应用CSS。

Add this CSS. The CSS must be applied before the table is renderd.

table { table-layout: fixed; }

td { 
 overflow: hidden;
 text-overflow: ellipsis; 
}

jsfiddle

如果你真的不需要显示椭圆，可以在td中强行换行。 / p>

If you don't really need to show ellipses, you can force a line break inside the td.

table { table-layout: fixed; }
td { word-wrap:break-word; }

这篇关于如何修复使用DataTables.net打破容器外表的长列值问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！