Question

好吧，所以我遇到了课堂项目的问题。我有一个表设置，并且有一系列图像应该形成为制作背景图像。在所述图像上，该表具有边框。

以下是目前的情况：

Current Table

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

Answer 1

我们走吧！首先，每天应该是<td> 不是 <th>。 <th>仅应用于周一至周日的标题。

更新 - 有一个小提琴 - Fiddle link!

删除桌面背景
将表格包裹在类calendar
将背景应用于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;
}

这就是你想要的吗？

Answer 2

这方面已经有了一些很好的答案，但为了以防万一，我会投入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 / HTML表格中的边框

2 个答案: