具有固定行高文本溢出省略号垂直对齐的响应html/css表

我正在尝试创建一个具有固定行高（图像将垂直拉伸以适应）的引导响应表，文本单元格垂直对齐，如果有溢出，文本在一行中显示椭圆

展示我迄今为止所取得的成就

在chrome中（没有尝试过其他浏览器），图像缩略图会忽略指定给整行的高度。我也不知道如何将文本垂直居中，以及如何强制表格水平放置在页面中，如果需要，在文本字段上没有显示省略号的水平滚动

该图像表示我希望它是什么样子：

HTML:

---

谢谢

也包括此CSS：

.img div
{
    max-height:50px !important;
}

---

对于响应性，使用

最大高度：3em

和

1em=16 px

.table .link-margin {
  padding: 0;
  padding-right: 20px;
}
.table tbody tr {
  height: 30px;
}
.table tbody tr td > div {
  width: 100%;
  height: 100%;
  overflow: hidden;
  white-space: nowrap;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}
.table tbody tr td > div img {
  height: 100%;
}

.img div
{
    max-height:50px !important;
}