好吧，所以我在上课项目时遇到了问题。我设置了一张桌子，并且准备了一系列图像以构成背景图像。在上述图像上，桌子上有边框。
这是当前的样子：
但是，我需要在日历的每个日期周围都有一个正方形边框。因此，每个日期之间应该有一个1px的边框，例如台湾杂技演员地点周围的边框。但是，我正在获得图像周围的边界。
这是我目前的样式规则：
table.calendar {
border: 1px solid black;
border-spacing: 5px;
font-size: 8px;
margin-top: 20px;
margin-bottom: 5px;
margin-left: auto;
margin-right: auto;
padding: 40px;
width: 650px;
background-image: url(topleft.jpg), url(topright.jpg), url(bottomleft.jpg), url(bottomright.jpg),
url(top.jpg), url(left.jpg), url(right.jpg), url(bottom.jpg);
background-position: left top, right top, left bottom, right bottom, left top, left top, right top, left bottom;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-x, repeat-y, repeat-y, repeat-x;
}
这是表格：
<table class="calendar">
<caption>Events in Feburary at the CCC</caption>
<colgroup>
<col class="weekdays" span="5" />
<col class="weekends" span="2" />
</colgroup>
<thead>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
</thead>
<tbody>
<tr>
<th>26</th>
<th>27</th>
<th>28</th>
<th>29</th>
<th>30</th>
<th>31</th>
<th>1
<dl>
<div>
<dt>Taiwan Acrobats</dt>
<dd>8 pm</dd>
<dd>$16/$24/$36</dd>
</div>
</dl>
</th>
</tr>
<tr>
<th>2
<dl>
<div>
<dt>Carson Quartet</dt>
<dd>1 pm</dd>
<dd>$8</dd>
</div>
</dl>
</th>
<th>3</th>
<th>4</th>
<th>5
<dl>
<div>
<dt>Joey Gallway</dt>
<dd>8 pm</dd>
<dd>$16/$24/$36</dd>
</div>
</dl>
</th>
<th>6</th>
<th>7
<dl>
<div>
<dt>West Side Story</dt>
<dd>7 pm</dd>
<dd>$24/$36/$64</dd>
</div>
</dl>
</th>
<th>8
<dl>
<div>
<dt>West Side Story</dt>
<dd>7 pm</dd>
<dd>$24/$36/$64</dd>
</div>
</dl>
</th>
</tr>
<tr>
<th>9
<dl>
<div>
<dt>Carson Quartet</dt>
<dd>1 pm</dd>
<dd>$8</dd>
</div>
</dl>
</th>
<th>10
<dl>
<div>
<dt>Jazz Masters</dt>
<dd>8 pm</dd>
<dd>$18/$24/$32</dd>
</div>
</dl>
</th>
<th>11</th>
<th>12</th>
<th>13
<dl>
<div>
<dt>Harlem Choir</dt>
<dd>8 pm</dd>
<dd>$18/$24/$32</dd>
</div>
</dl>
</th>
<th>14
<dl>
<div>
<dt>Chamberlain Symphony</dt>
<dd>8 pm</dd>
<dd>$18/$24/$32</dd>
</div>
</dl>
</th>
<th>15
<dl>
<div>
<dt>Edwin Drood</dt>
<dd>8 pm</dd>
<dd>$24/$36/$44</dd>
</div>
</dl>
</th>
</tr>
<tr>
<th>16
<dl>
<div>
<dt>Carson Quartet</dt>
<dd>1 pm</dd>
<dd>$8</dd>
</div>
</dl>
</th>
<th>17</th>
<th>18</th>
<th>19
<dl>
<div>
<dt>The Yearling</dt>
<dd>7 pm</dd>
<dd>$8/$14/$18</dd>
</div>
</dl>
</th>
<th>20</th>
<th>21
<dl>
<div>
<dt>An Ellington Tribute</dt>
<dd>8 pm</dd>
<dd>$24/$32/$48</dd>
</div>
</dl>
</th>
<th>22
<dl>
<div>
<dt>Othello</dt>
<dd>8 pm</dd>
<dd>$18/$28/$42</dd>
</div>
</dl>
</th>
</tr>
<tr>
<th>23
<dl>
<div>
<dt>Carson Quartet</dt>
<dd>1 pm</dd>
<dd>$8</dd>
</div>
</dl>
</th>
<th>24</th>
<th>25
<dl>
<div>
<dt>Madtown Jugglers</dt>
<dd>8 pm</dd>
<dd>$12/$16/$20</dd>
</div>
</dl>
</th>
<th>26</th>
<th>27</th>
<th>28
<dl>
<div>
<dt>Ralph Williams</dt>
<dd>8 pm</dd>
<dd>$32/$48/$64</dd>
</div>
</dl>
</th>
<th>1
<dl>
<div>
<dt>Othello</dt>
<dd>8 pm</dd>
<dd>$18/$28/$42</dd>
</div>
</dl>
</th>
</tr>
</tbody>
最佳答案
开始了！首先，每天应该是<td>而不是<th>。 <th>仅应用于星期一至星期日的标题。
更新-摆弄-Fiddle link!
删除桌子上的背景
用calendar类将表包装在div中
将背景应用于div，并为div提供与背景图片相同的高度填充
的HTML
<div class="calendar">
<table>
<!-- (Remove class from table) -->
<!-- This is the contents of the table -->
</table>
</div>
的CSS
.calendar {
background: #CCC; /* This is where your background image should go */
padding: 20px 0 0; /* same height as the background image */
}
.calendar table {
border-collapse: collapse;
background: #FFF;
}
.calendar th, .calendar td {
border: solid 1px #CCC;
}
那是你要的吗？
关于html - CSS/HTML表中的边框，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22419198/