html - HTML/CSS：如何设置此表格的大小？

Question

如果您访问下面的链接并将商品添加到购物车（以使购物车出现在侧边栏中），您会注意到购物车与侧边栏小部件的边缘重叠。

http://savageworkouts.com/2012/05/07/sample-product/

我需要编写什么 CSS 才能使表格成为其父容器的大小？

Answer 1

写table-layout:fixed在你的table.eshop. 像这样写：

table.eshop {
    border-collapse: collapse;
    table-layout: fixed;
    width: 99%;
    word-wrap: break-word;
}

Answer 2

您需要更改th和td元素的填充：

table thead tr th,
table tfoot tr td {
  padding: 8px 10px 9px;
  font-size: 14px;
  font-weight: bold;
  color: #222;
}

对于购物车中的 0-9 件商品，5作为左右两侧的良好填充。如果你想走得更高，你需要把它推得更低。

table thead tr th,
table tfoot tr td {
  padding: 8px 5px 9px;
  font-size: 14px;
  font-weight: bold;
  color: #222;
}

另一种选择是更改字体大小。这完全取决于您以及您认为在不损害可用性的情况下有效的方法。