Question

我确实像表格数据底部那样添加了一个填充像素。我试图将每个填充都设置为零，我认为这可能与表中的图像有关，但是在使用Firefox附加组件检查了标签的填充后，它与io.UnsupportedOperation: not writable有点相似标签。

我添加了两张图片，显示了插件的含义（红色边框）。

<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
************************************************
*/

td填充：

img填充：

Answer 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表格填充无法完全移除

1 个答案: