Question

我已经为HTML和CSS中的家庭作业创建了以下代码：

＆＃13;

table {
  border-collapse: collapse;
  border-spacing: 0;
  border-color: black;
}

th {
  border: 1px solid black;
  color: white;
}

td {
  font-family: Arial, sans-serif;
  font-size: 20px;
  padding: 20px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
}

th {
  font-family: Arial, sans-serif;
  font-size: 20px;
  font-weight: normal;
  padding: 20px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
}

th {
  background-color: #656565;
  text-align: center;
  vertical-align: top
}

.name {
  background-color: #9b9b9b;
  text-align: center;
  vertical-align: top
}

.ort {
  background-color: #c0c0c0;
  vertical-align: top
}

.image {
  background-color: #c0c0c0;
  text-align: center;
  vertical-align: top;
}

.oh {
  text-align: left;
}

.age {
  background-color: #d6d6d6;
  text-align: right;
  vertical-align: top
}

table {
  width: 70%;
}

.hl {
  border: solid red 5px;
}

＆＃13;

<!DOCTYPE html>

<head>
  <meta charset="UTF-8">
  <title>People</title>
</head>

<body>

  <table align=center>
    <tr>
      <th>Name</th>
      <th colspan="2" class="oh">Living in</th>
      <th>Age</th>
    </tr>
    <tr>
      <td class="name">Frank</td>
      <td class="ort">Europe</td>
      <td class="image"><img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/70x70.jpg"></td>
      <td class="age">24</td>
    </tr>
    <tr class="hl">
      <td class="name">Carl</td>
      <td class="ort">Canada</td>
      <td class="image"><img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/70x70.jpg"></td>
      <td class="age">22</td>
    </tr>
    <tr>
      <td class="name">Fred</td>
      <td class="ort">Russia</td>
      <td class="image"><img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/70x70.jpg"></td>
      <td class="age">17</td>
    </tr>
  </table>
</body>

＆＃13;

我使用的图像是70x70px大，尽管Table不断在其旁边添加大量填充。我希望图像显示在一个较小的单元格中，每边都有等量的填充。 TL; DR我希望单元格的宽度和高度相等。

注意：您需要全屏打开Snippet才能真正看到问题，Table需要覆盖整个页面。

Answer 1

td.image {
  width: 1%;
  padding: 20px;
}

更新：（关注@FluffyKitten建议）

由于错过尺寸规格而导致图像扩展细胞出现问题。在这种情况下，浏览器会自动平衡表格单元格大小，并且在非常宽的表格上会导致表格单元格大小比您想要的大得多（因为它没有限制）。设置非常窄的宽度（在这种情况下为1％）会缩小单元格，但它仍然可以通过单元格的内容进行扩展（在本例中为图像）。

定义填充值只是为了在padding: 20px 5px td上plt.errorbar(F1,p11,fmt='r',yerr=yerr1,lw=3,label='Summer') plt.errorbar(F2,p12,fmt='b',yerr=yerr2,lw=3,label='Winter')时实现所请求的目标，使其具有相等的单元格间距。

表内有奇怪填充的图像

1 个答案: