我对 HTML 很陌生,得到了一个由一组指令和一张图片组成的作业,目标是用 HTML 复制这张图片。
我现在遇到的问题是我似乎无法在表格中添加底部边距。
说明说我应该添加一个 margin-bottom: 1em;但我无法让它工作。
html {
background-color: maroon;
}
body {
background-color: white;
width: 650px;
margin-top: 30px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
h1 {
font-size: 3em;
padding: 0.2em;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: 3em;
margin-right: 3em;
background-color: black;
color: orange;
text-align: center;
}
table {
width: 80%;
margin-right: auto;
margin-left: auto;
margin-top: 2em;
text-align: center;
border: 10px solid navy;
/* margin-bottom goes here?*/
}
thead {
background-color: #00bbbb;
color: #0000aa;
font-size: 1.25em;
font-style: italic;
}
caption {
font-size: 2em;
font-weight: bold;
color: white;
background-color: #008080;
padding: 0.5em;
text-shadow: 1px 1px 8px black;
}
/* ändra värde på raderna nedan för att ändra bredd på motsvarande (n) kolumn */
td:nth-of-type(1) {
width: 19%;
}
td:nth-of-type(2) {
width: 23%;
}
td:nth-of-type(3) {
width: 27%;
}
td:nth-of-type(4) {
width: 31%;
}
/* ändra ingenting under denna raden! */
tbody:last-of-type td {
border: 3px dotted navy;
background-color: #ffff99;
padding: 0.4em;
}
tfoot:last-of-type th {
font-weight: bold;
border: 5px dotted red;
background-color: #9999ff;
padding: 0.4em;
}
<h1>Tabell</h1>
<table>
<caption>Cellräkning</caption>
<thead>
<tr>
<th>Kol 1</th>
<th>Kol 2</th>
<th>Kol 3</th>
<th>Kol 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 5</td>
<td>Cell 6</td>
<td>Cell 7</td>
<td>Cell 8</td>
</tr>
<tr>
<td>Cell 9</td>
<td>Cell 10</td>
<td>Cell 11</td>
<td>Cell 12</td>
</tr>
<tr>
<td>Cell 13</td>
<td>Cell 14</td>
<td>Cell 15</td>
<td>Cell 16</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Totalt: 28</th>
<th>Totalt: 32</th>
<th>Totalt: 36</th>
<th>Totalt: 40</th>
</tr>
</tfoot>
</table>
最佳答案
由于底部表格和正文末尾之间没有内容,这似乎是 collapsing margins 的情况。 .设置 overflow: auto;
到 html
和 body
元素似乎可以恢复您所追求的行为。出于说明目的,在下表中应用了较大的底部边距:
html {
background-color: maroon;
}
body {
background-color: white;
width: 650px;
margin-top: 30px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
html,
body {
overflow: auto;
}
h1 {
font-size: 3em;
padding: 0.2em;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: 3em;
margin-right: 3em;
background-color: black;
color: orange;
text-align: center;
}
table {
width: 80%;
margin-right: auto;
margin-left: auto;
margin-top: 2em;
text-align: center;
border: 10px solid navy;
margin-bottom: 10em;
}
thead {
background-color: #00bbbb;
color: #0000aa;
font-size: 1.25em;
font-style: italic;
}
caption {
font-size: 2em;
font-weight: bold;
color: white;
background-color: #008080;
padding: 0.5em;
text-shadow: 1px 1px 8px black;
}
/* ändra värde på raderna nedan för att ändra bredd på motsvarande (n) kolumn */
td:nth-of-type(1) {
width: 19%;
}
td:nth-of-type(2) {
width: 23%;
}
td:nth-of-type(3) {
width: 27%;
}
td:nth-of-type(4) {
width: 31%;
}
/* ändra ingenting under denna raden! */
tbody:last-of-type td {
border: 3px dotted navy;
background-color: #ffff99;
padding: 0.4em;
}
tfoot:last-of-type th {
font-weight: bold;
border: 5px dotted red;
background-color: #9999ff;
padding: 0.4em;
}
<h1>Tabell</h1>
<table>
<caption>Cellräkning</caption>
<thead>
<tr>
<th>Kol 1</th>
<th>Kol 2</th>
<th>Kol 3</th>
<th>Kol 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 5</td>
<td>Cell 6</td>
<td>Cell 7</td>
<td>Cell 8</td>
</tr>
<tr>
<td>Cell 9</td>
<td>Cell 10</td>
<td>Cell 11</td>
<td>Cell 12</td>
</tr>
<tr>
<td>Cell 13</td>
<td>Cell 14</td>
<td>Cell 15</td>
<td>Cell 16</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Totalt: 28</th>
<th>Totalt: 32</th>
<th>Totalt: 36</th>
<th>Totalt: 40</th>
</tr>
</tfoot>
</table>
关于html - 无法向表格添加底部边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69290425/