给定一个简单的表格,它是一篇文章的子项。
表格的宽度为 100%,因此适合其父级文章。 我希望桌子以对称的方式向左和向右横向扩展一点。
在我的代码中,表格确实在left侧很好地展开,但是它不会对我在CSS中在right侧设置的任何内容做出反应。
(请注意,尽管表格设置了边距,但左侧文本与表格外部的文本很好地对齐。)
左侧工作正常,但右侧则不行。 我想要实现的是表格的右侧以相同的方式向外和向右扩展几个像素。
我在这里忽略了什么?
body,
html {
background: #EEE;
margin: 60px;
width: auto
}
article {
background: #DDD;
width: auto
}
table {
border-collapse: collapse;
width: 100%;
border-spacing: 0;
margin: 0 -10px 0 -10px;
/* Expand the Table on both left and right side */
}
th,
td {
padding: .5em 5px;
text-align: left;
border-bottom: 1px solid #ddd;
border-color: black;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
}
table td {}
table th {
font-weight: bold;
}
.today {
background-color: #FFD700
}
tr:hover {
background-color: #FFD700
}
<html>
<body>
<article>
Start<br> Start
<br> Start
<br>
<br>
<table>
<tbody id="weekdagtabel">
<tr id="day-1">
<td>Maandag</td>
<td>08:00 tot 20:00</td>
</tr>
<tr id="day-2">
<td>Dinsdag</td>
<td>08:00 tot 20:00</td>
</tr>
<tr id="day-3">
<td>Woensdag</td>
<td>08:00 tot 20:00</td>
</tr>
<tr id="day-4">
<td>Donderdag</td>
<td>08:00 tot 20:00</td>
</tr>
<tr id="day-5">
<td>Vrijdag</td>
<td>08:00 tot 20:00</td>
</tr>
<tr id="day-6">
<td>Zaterdag</td>
<td>Gesloten.</td>
</tr>
<tr id="day-0">
<td>Zondag</td>
<td>Gesloten.</td>
</tr>
</tbody>
</table>
<br> End
<br> End
<br> End
<br>
</article>
</body>
</html>
您实际上并不希望表格为 100% 宽度。您想要 100% 加上您添加到父级的任何负边距。
body,
html {
background: #EEE;
margin: 60px;
width: auto
}
article {
background: #DDD;
width: auto
}
table {
border-collapse: collapse;
width: calc(100% + 10px + 10px); /* Add the negative margins from below */
border-spacing: 0;
margin: 0 -10px 0 -10px; /* Expand the Table on both left and right side */
}
th,
td {
padding: .5em 5px;
text-align: left;
border-bottom: 1px solid #ddd;
border-color: black;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
}
table td {}
table th {
font-weight: bold;
}
.today {
background-color: #FFD700
}
tr:hover {
background-color: #FFD700
}
<html>
<body>
<article>
Start<br> Start
<br> Start
<br>
<br>
<table>
<tbody id="weekdagtabel">
<tr id="day-1">
<td>Maandag</td>
<td>08:00 tot 20:00</td>
</tr>
<tr id="day-2">
<td>Dinsdag</td>
<td>08:00 tot 20:00</td>
</tr>
<tr id="day-3">
<td>Woensdag</td>
<td>08:00 tot 20:00</td>
</tr>
<tr id="day-4">
<td>Donderdag</td>
<td>08:00 tot 20:00</td>
</tr>
<tr id="day-5">
<td>Vrijdag</td>
<td>08:00 tot 20:00</td>
</tr>
<tr id="day-6">
<td>Zaterdag</td>
<td>Gesloten.</td>
</tr>
<tr id="day-0">
<td>Zondag</td>
<td>Gesloten.</td>
</tr>
</tbody>
</table>
<br> End
<br> End
<br> End
<br>
</article>
</body>
</html>