gpt4 book ai didi

html - 表格中带有奇怪填充的图像

转载 作者:行者123 更新时间:2023-11-28 00:52:05 25 4
gpt4 key购买 nike

我用 HTML 和 CSS 为家庭作业创建了以下代码:

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

我使用的图像是 70x70px 大,尽管表格一直在它旁边添加大量填充。我希望图像显示在一个较小的单元格中,单元格的每一侧都有相同数量的填充。 TL;DR 我希望单元格的宽度和高度相等。

注意:您需要全屏打开代码片段才能真正看到问题,表格需要覆盖整个页面。

占位符图像:© by Jeff Dean

最佳答案

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

更新:(遵循@FluffyKitten 的建议)

您的问题是由于缺少尺寸规范而导致带有图像的扩展单元格。在这种情况下,浏览器会自动平衡表格单元格的大小,并且在非常宽的表格上,它会导致表格单元格的大小比您想要的大得多(因为没有限制)。设置非常窄的宽度(在本例中为 1%)会缩小单元格,但它仍然可以根据单元格的内容(在本例中为图像)进行扩展。

填充值的定义只是为了实现您要求的目标,即在 td 上设置 padding: 20px 5px 时单元格间距相等。

关于html - 表格中带有奇怪填充的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46797170/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com