我的CSS/HTML表格中的边框

好吧，我对一个课堂项目有点意见。我设置了一个表格，有一系列的图像，应该形成一个背景图像。在所述图像上，桌子有边框

以下是它当前的样子：

但是，我需要在日历的每个日期周围有一个正方形边框。因此，每个日期都应该有一个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>

2月CCC的活动
太阳
周一
星期二
结婚
清华大学
星期五
坐
26
27
28
29
30
31
1.
台湾杂技演员
晚上8点
$16/$24/$36
2.
卡森四重奏
下午1点
$8
3.
4.
5.
乔伊·盖尔韦
晚上8点
$16/$24/$36
6.
7.
西区故事
晚上7点
$24/$36/$64
8.
西区故事
晚上7点
$24/$36/$64
9
卡森四重奏
下午1点
$8
10
爵士名人录
晚上8点
$18/$24/$32
11
12
13
哈莱姆合唱团
晚上8点
$18/$24/$32
14
张伯伦交响乐团
晚上8点
$18/$24/$32
15
埃德温·德洛德
晚上8点
$24/$36/$44
16
卡森四重奏
下午1点
$8
17
18
19
一岁
晚上7点
$8/$14/$18
20
21
艾灵顿贡品
晚上8点
$24/$32/$48
22
奥赛罗
晚上8点
$18/$28/$42
23
卡森四重奏
下午1点
$8
24
25
疯人院杂耍演员
晚上8点
$12/$16/$20
26
27
28
拉尔夫·威廉姆斯
晚上8点
$32/$48/$64
1.
奥赛罗
晚上8点
$18/$28/$42

我们开始了！首先，每天都应该是一个

而不是
<代码>
只能用于周一到周日的标题

更新-拉小提琴-

去掉桌子上的背景
用一个类
calendar
将背景应用于div，并给div一些与背景图像相同高度的填充
HTML

这就是你想要的吗？
关于这一点，已经有一些很好的答案了，但我会拿出我的2美分以防万一

我通常通过以下CSS来实现这一点

/* Put a border on the top and right of the table */
table {border:solid black;border-width:1px 1px 0 0;}
/* And a border on the bottom and left of each cell */
table th, table td {border:solid black;border-width:0 0 1px 1px;}

结果是每个单元格周围都有一个边框。
更改为肯定有助于改进格式。然而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;
}

/* Put a border on the top and right of the table */
table {border:solid black;border-width:1px 1px 0 0;}
/* And a border on the bottom and left of each cell */
table th, table td {border:solid black;border-width:0 0 1px 1px;}