Question

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

This fiddle显示我到目前为止取得的成就。

在chrome中（尚未尝试其他浏览器），图像缩略图会忽略分配给整行的height。我不知道如何垂直居中文本以及如何强制表格在页面中水平放置，如果需要，文本字段上没有水平滚动显示椭圆。

图片代表我希望它如何： row concept

HTML：

<div class="table-responsive">
    <table class="table" id="list-table">
        <thead>
            <tr>
                <td><input class="toggle-all" type="checkbox" /></td>
                <td>Thumbnail</td>
                <td>Name</td>
                <td class="link-margin"></td>
                <td>Description</td>
                <td>Category</td>
                <td>Type</td>
            </tr>
        </thead>
        <tbody>
            <tr class="list-content-row">
                <td><input class="select-product" type="checkbox" /></td>
                <td class="img">
                    <div><img class="img-responsive product-img" src="http://www.mildred.co/issueassets/22/14RSowlhat.jpg"/></div>
                </td>
                <td><div><a href="#">Lorem ex amet</a></div></td>
                <td class="link-margin"></td>
                <td><div>Aute esse ullamco fugiat amet dolore fugiat proident in mollit. Veniam minim in enim consequat nulla velit.</div></td>
                <td><div>music</div></td>
                <td><div>Video (mp4)</div></td>
            </tr>            
            <tr class="list-content-row">
                <td><input class="select-product" type="checkbox" /></td>
                <td class="img">
                    <div><img class="img-responsive product-img" src="http://www.dncompute.com/blog/wp-content/uploads/2008/03/dice.jpg"/></div>
                </td>
                <td><div><a href="#">ex qui do</a></div></td>
                <td class="link-margin"></td>
                <td><div>Cillum sunt irure minim commodo et ipsum. Nisi elit occaecat officia dolore eu culpa quis.</div></td>
                <td><div>films</div></td>
                <td><div>Image (gif)</div></td>
            </tr>            
            <tr class="list-content-row">
                <td><input class="select-product" type="checkbox" /></td>
                <td class="img">
                    <div><img class="img-responsive product-img" src="http://zoarchurch.co.uk/content/pages/uploaded_images/91.png"/></div>
                </td>
                <td><div><a href="#">esse Lorem consequat</a></div></td>
                <td class="link-margin"></td>
                <td><div>Officia fugiat consequat officia aliquip sit consectetur eu. Non laborum aliquip cillum ipsum consectetur.</div></td>
                <td><div>music</div></td>
                <td><div>Image (png)</div></td>
            </tr>            
        </tbody>
    </table>
</div>

CSS：

.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%;
}

谢谢！

Answer 1

也包括这个CSS：

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

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

1 个答案: