Question

我有一个表，用于显示数据库中的动态数据，该数据可以包含图像，视频，iframe，表，文本等。

我正在使用DataTables jQuery库：http://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js

这里是一个例子：

<table>
  <thead>
    <tr>
      <td>FirstHeading</td>
    </tr>
  </thead> <!-- thead -->
  <tbody>
    <tr>
      <td class="truncate">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum itaque, sint impedit recusandae sunt, vel quod optio voluptas laudantium doloremque aspernatur deleniti autem delectus expedita veritatis explicabo quidem perspiciatis sapiente praesentium, ratione. Beatae praesentium possimus explicabo, rerum quia architecto itaque a vero odio dolores saepe quisquam, natus vel eos veniam id voluptatum harum iusto corporis. Facilis neque, cum corporis debitis suscipit veritatis quod! Harum iste sequi cum accusantium magni facere sunt assumenda impedit eveniet, veniam laudantium obcaecati quo, labore error reprehenderit quod, doloremque. Iusto fugit, libero minima tempora vitae iste rem, magnam sint explicabo quas tempore natus possimus reprehenderit ab, inventore.
        <img src="//placehold.it/200x200/100" > <!-- image -->
        <img src="//placehold.it/200x200/200" > <!-- image -->
      </td> <!-- .truncate -->
    </tr>
  </tbody> <!-- tbody -->
</table> <!-- table -->

包含数据的<td>具有以下类class="truncate"，我使用该类来限制<td>的高度和宽度，因为如果我不这样做，桌子的宽度将超过窗口的大小，高度将非常长。

该类的样式：

.truncate{
  max-width: 50px;
  max-height: 50px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

内容包含HTML元素<p> <img> <table> <iframe> ..etc，而这些元素包含html代码中的某些尺寸，例如<img style="width: 500px; height: 300px" src="">，所以我尝试设置这些元素的样式：

.tuncate img,
.truncate table,
.truncate iframe,
.truncate video{
  max-height: 5px;
}

但是高度仍然很长，我希望整个<td>不超过50px里面的任何元素。

Answer 1

td中的div的max-height：50px而不是td。

<td>
  <div style="max-height:50px">whatever content...</div>
</td>

将内部数据设置为静态宽度和高度

1 个答案: