html - 表格列垂直显示而不是水平显示 - Bootstrap

Question

我正在使用 Bootstrap 类并尝试水平显示表格。我一直在网上搜索，但没有找到解决方案。

具体JSP页表的代码片段为:

        <table class="table table-striped table-hover">
            <thead>
            <tr class="bg-success">
                <th>Photo Thumb</th>
                <th>Product Name</th>
                <th>Category</th>
                <th>Condition</th>
                <th>Price</th>
                <th></th>
            </tr>
            </thead>
            <tbody>

            <c:forEach items="${products}" var="product">
                <tr>
                    <td><img src="<c:url value="/resources/images/${product.productId}.png" /> " alt="image"
                             style="width:100%"/></td>
                    <td>${product.productName}</td>
                    <td>${product.productCategory}</td>
                    <td>${product.productCondition}</td>
                    <td>${product.productPrice}</td>
                    <td><a href="<spring:url value="/productList/viewProduct/${product.productId}" />"
                    ><span class="glyphicon glyphicon-info-sign"></span></a></td>
                </tr>
            </c:forEach>

            </tbody>
        </table>

编辑 1 我添加的额外 CSS 如下:

.container-wrapper {
    height: 80%;
    margin: auto;
    margin-top: 80px;
    margin-bottom: 300px;
}

.table {
    table-layout: fixed;
    overflow: auto;
}

.table th {
    text-align: center;
}

.table td {
    text-align: center;
    background: whitesmoke;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Answer 1

删除

.table td {
    display: block;
}

codepen example

在 css 中注释和取消注释 display 属性以查看它所产生的差异。