从CSS中的表行中删除不必要的填充

Question

我想在html和css中编写以下设计

我得到的结果：

我想将其他内容集中在td元素中，因此它将与产品图像对齐。我尝试将display：list-item与产品图片一起使用，它可以在Chrome中使用，如下图所示：

CSS代码：

table {
        width: 100%;

        thead {
            border-bottom: 1px solid #eeeeee;
        }

        th {
            text-align: left;
            text-transform: uppercase;
            color: #909090;
            padding-bottom: 1em;
        }

        .thumb {
            width: 100px;
            height: 100px;
            background: #f7f7f7;
            border: 1px solid #e5e5e5;
            display: list-item;
        }

        tr:nth-child(even) {
            background: #fafafa;
            border-bottom: 1px solid #e5e5e5;
            border-top: 1px solid #e5e5e5;
        }

        td,
        tr {
            padding: 1em 0;
            span {
                display: block;
            }
        }
    }

请检查此fiddle

谢谢，

Answer 1

在您显示的第三张图片中，看起来不是“居中”（在垂直轴上），而是与顶部对齐。如果这是您想要的 - 那么只需为表格单元格指定vertical-align：

.cart table td {
    vertical-align:top;
}

http://jsfiddle.net/ahpegfvj/3/