CSS 表 <td> 填充不能完全移除 [重复]
Posted
技术标签:
【中文标题】CSS 表 <td> 填充不能完全移除 [重复]【英文标题】：CSS table <td> padding isn't removable completly [duplicate] 【发布时间】：2019-04-05 21:10:33 【问题描述】：我真的像填充像素一样粘在表格数据的底部。我试图将每个填充设置为零，我认为它可能与表格内的图像有关，但是在使用 Firefox 插件检查标签的填充之后，它必须与 <td> 标签有关。
我添加了两张图片来显示插件的含义（红色边框）。
/*
************************************************
General-Styling"
************************************************
*/
body,
html
background-color: aquamarine;
background-image: url(../background.jpg);
height: 100%;
overflow-y: hidden;
margin: 0;
#Wrapper
margin-left: 15%;
margin-right: 15%;
height: 100vh;
main
display: flex;
flex-direction: column;
align-items: center;
width: 80%;
height: calc(100vh - 56px);
background-color: white;
margin: 0;
margin-right: auto;
margin-left: auto;
overflow-y: auto;
border: 1px solid Maroon;
border-top: 0px;
main h2
margin: 1em;
font-family: 'Anton', sans-serif;
main h4
font-size: 2em;
/*
************************************************
Hier endet General-Styling"
************************************************
*/
/*
************************************************
Hier beginnt das Header-Styling"
************************************************
*/
header
position: relative;
background-color: blueviolet;
margin: 0;
display: flex;
justify-content: space-between;
align-items: center;
flex: 0 1 60%;
padding: 0 1rem;
border-radius: 0em 0em 1em 1em;
height: 56px;
header img
width: 2.5em;
height: 2.5em;
#branding
position: absolute;
left: 2em;
margin: 0;
margin-left: 0.3em;
font-family: 'Yanone Kaffeesatz', sans-serif;
color: lawngreen;
.nav
display: flex;
flex: 0 1 25%;
justify-content: space-between;
align-items: center;
.navitem
list-style: none;
.navitem a
font-size: 20px;
margin-top: 0;
color: black;
text-decoration: none;
font-family: 'Anton', sans-serif;
.navitem a
.navitem a:hover
color: rgba(0, 0, 0, 0.6);
cursor: pointer;
/*
************************************************
Header-Styling ENDE
************************************************
*/
/*
************************************************
Hier beginnt das Tabellen-Styling"
************************************************
*/
table
padding: 1em;
padding-left: 0em;
padding-right: 0em;
background-color: lightgray;
max-width: 80%;
table th
font-size: 1.5em;
table td
padding-bottom: 0em;
font-size: 1.3em;
font-weight: 700;
text-align: center;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
table td:nth-child(2)
width: 30%;
table td:last-child
border-right: 0px;
padding: 0em;
width: 10em;
table td:first-child
width: 0.5em;
padding: 0em;
td img
height: 11em;
width: 11em;
padding: 0em;
margin: 0em;
table tr
padding: 0em;
margin: 0em;
/*
************************************************
Tabellen-Styling ENDE
************************************************
*/
/*
************************************************
Hier beginnt das Formular Styling
************************************************
*/
form
margin: 4em;
padding: 3em;
background-color: slategray;
form div
margin-bottom: 1em;
.forms
display: flex;
align-items: center;
.forms label
display:inline-block;
width: 7em;
font-size: 1.3em;
.centered
display: flex;
width: 100%;
justify-content: center;
.centered h3
font-size: 2em;
/*
************************************************
Formular-Styling ENDE
************************************************
*/<!DOCTYPE html>
<html>
<head>
<title>Einfache-Rezepte</title>
<link href="https://fonts.googleapis.com/css?family=Anton|Baloo+Bhaijaan|Gloria+Hallelujah|PT+Sans+Narrow|Righteous|Titillium+Web|Yanone+Kaffeesatz" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="CSS/normalize.css">
<link rel="stylesheet" href="CSS/style.css">
<meta name="description" content="Diese Seite wird im Laufe der Zeit (hoffentlich) Rezepte beinhalten">
</head>
<body>
<div id="Wrapper">
<header>
<img src="logo.png">
<h1 id="branding">Einfache-Rezepte</h1>
<ul class="nav">
<li class="navitem active"><a href="index.html">Startseite</a></li>
<li class="navitem"><a href="#">Rezepte</a></li>
<li class="navitem"><a href="contact.html">Kontakt</a></li>
</ul>
</header>
<main>
<h2>Einfache Rezeptideen für jeden leicht zu machen!</h2><br>
<h4>Top Rezepte der Woche</h4>
<table>
<tbody>
<tr>
<th>Nummer</th>
<th>Gericht</th>
<th>Zeit</th>
<th>Bild</th>
</tr>
<tr>
<td>1</td>
<td>Lendchen - herzhaft gefüllt</td>
<td>25 Minuten</td>
<td><img src="lendchenpg.jpg"></td>
</tr>
<tr>
<td>2</td>
<td>Hähnchenkeulen alla Ossobuco</td>
<td>18 Minuten</td>
<td><img src="haehnchenkeulen.jpg"></td>
</tr>
<tr>
<td>3</td>
<td>Filetspitzenragout und Paprika-Pesto-Reis</td>
<td>90 Minuten</td>
<td><img src="filetspitzenragout.jpg"></td>
</tr>
</tbody>
</table>
</main>
</div>
</body>
</html>td 填充：
img 填充：
【问题讨论】：
【参考方案1】：您需要使用border-collapse: collapse;折叠表格边框
/*
************************************************
General-Styling"
************************************************
*/
body,
html
background-color: aquamarine;
background-image: url(../background.jpg);
height: 100%;
overflow-y: hidden;
margin: 0;
#Wrapper
margin-left: 15%;
margin-right: 15%;
height: 100vh;
main
display: flex;
flex-direction: column;
align-items: center;
width: 80%;
height: calc(100vh - 56px);
background-color: white;
margin: 0;
margin-right: auto;
margin-left: auto;
overflow-y: auto;
border: 1px solid Maroon;
border-top: 0px;
main h2
margin: 1em;
font-family: 'Anton', sans-serif;
main h4
font-size: 2em;
/*
************************************************
Hier endet General-Styling"
************************************************
*/
/*
************************************************
Hier beginnt das Header-Styling"
************************************************
*/
header
position: relative;
background-color: blueviolet;
margin: 0;
display: flex;
justify-content: space-between;
align-items: center;
flex: 0 1 60%;
padding: 0 1rem;
border-radius: 0em 0em 1em 1em;
height: 56px;
header img
width: 2.5em;
height: 2.5em;
#branding
position: absolute;
left: 2em;
margin: 0;
margin-left: 0.3em;
font-family: 'Yanone Kaffeesatz', sans-serif;
color: lawngreen;
.nav
display: flex;
flex: 0 1 25%;
justify-content: space-between;
align-items: center;
.navitem
list-style: none;
.navitem a
font-size: 20px;
margin-top: 0;
color: black;
text-decoration: none;
font-family: 'Anton', sans-serif;
.navitem a
.navitem a:hover
color: rgba(0, 0, 0, 0.6);
cursor: pointer;
/*
************************************************
Header-Styling ENDE
************************************************
*/
/*
************************************************
Hier beginnt das Tabellen-Styling"
************************************************
*/
table
padding: 1em;
padding-left: 0em;
padding-right: 0em;
background-color: lightgray;
max-width: 80%;
border-collapse: collapse;
table th
font-size: 1.5em;
table td
padding-bottom: 0em;
font-size: 1.3em;
font-weight: 700;
text-align: center;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
table td:nth-child(2)
width: 30%;
table td:last-child
border-right: 0px;
padding: 0em;
width: 10em;
table td:first-child
width: 0.5em;
padding: 0em;
td img
height: 11em;
width: 11em;
padding: 0em;
margin: 0em;
table tr
padding: 0em;
margin: 0em;
/*
************************************************
Tabellen-Styling ENDE
************************************************
*/
/*
************************************************
Hier beginnt das Formular Styling
************************************************
*/
form
margin: 4em;
padding: 3em;
background-color: slategray;
form div
margin-bottom: 1em;
.forms
display: flex;
align-items: center;
.forms label
display:inline-block;
width: 7em;
font-size: 1.3em;
.centered
display: flex;
width: 100%;
justify-content: center;
.centered h3
font-size: 2em;
/*
************************************************
Formular-Styling ENDE
************************************************
*/<!DOCTYPE html>
<html>
<head>
<title>Einfache-Rezepte</title>
<link href="https://fonts.googleapis.com/css?family=Anton|Baloo+Bhaijaan|Gloria+Hallelujah|PT+Sans+Narrow|Righteous|Titillium+Web|Yanone+Kaffeesatz" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="CSS/normalize.css">
<link rel="stylesheet" href="CSS/style.css">
<meta name="description" content="Diese Seite wird im Laufe der Zeit (hoffentlich) Rezepte beinhalten">
</head>
<body>
<div id="Wrapper">
<header>
<img src="logo.png">
<h1 id="branding">Einfache-Rezepte</h1>
<ul class="nav">
<li class="navitem active"><a href="index.html">Startseite</a></li>
<li class="navitem"><a href="#">Rezepte</a></li>
<li class="navitem"><a href="contact.html">Kontakt</a></li>
</ul>
</header>
<main>
<h2>Einfache Rezeptideen für jeden leicht zu machen!</h2><br>
<h4>Top Rezepte der Woche</h4>
<table>
<tbody>
<tr>
<th>Nummer</th>
<th>Gericht</th>
<th>Zeit</th>
<th>Bild</th>
</tr>
<tr>
<td>1</td>
<td>Lendchen - herzhaft gefüllt</td>
<td>25 Minuten</td>
<td><img src="lendchenpg.jpg"></td>
</tr>
<tr>
<td>2</td>
<td>Hähnchenkeulen alla Ossobuco</td>
<td>18 Minuten</td>
<td><img src="haehnchenkeulen.jpg"></td>
</tr>
<tr>
<td>3</td>
<td>Filetspitzenragout und Paprika-Pesto-Reis</td>
<td>90 Minuten</td>
<td><img src="filetspitzenragout.jpg"></td>
</tr>
</tbody>
</table>
</main>
</div>
</body>
</html>【讨论】：
由于某种原因没有奏效......以上是关于CSS 表 <td> 填充不能完全移除 [重复]的主要内容，如果未能解决你的问题，请参考以下文章