Question

如果您访问以下链接并向购物车添加商品（以使购物车显示在侧边栏中），您会发现购物车重叠超过侧边栏小部件的边缘。

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

Answer 1

在table.eshop中写下 table-layout：fixed 。写得像这样：

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

另一种选择是更改字体大小。在没有损害可用性的情况下，这取决于你和你的想法。