如何在表格顶部设置表格标题？

Question

我试图在表格结构中设置日历，但我不知道如何在表格顶部设置标题。

\n\n

我也无法更改表结构。我希望它看起来像下面这样：

\n\n

\r\n

\r\n

.calendar_wrap table {\r\n    width: 100%;\r\n}\r\n.calendar_wrap #wp-calendar thead th {\r\n    font-weight: 500;\r\n    color: #45515a;\r\n    font-size: 20px;\r\n    line-height: 28px;\r\n}\r\n.calendar_wrap #wp-calendar tbody td {\r\n    font-weight: 400;\r\n    font-size: 24px;\r\n    line-height: 36px;\r\n    color: #5b666f;\r\n}\r\n.calendar_wrap #wp-calendar tfoot td a {\r\n    color: #3d9596;\r\n    font-weight: 500;\r\n    margin-top: 10px;\r\n    display: inline-block;\r\n    font-size: 22px;\r\n    line-height: 32px;\r\n}\r\n.calendar_wrap #wp-calendar tbody td a {\r\n    color: #EF9950;\r\n}\r\n.calender-box {\r\n    padding: 15px;\r\n    border: 1px solid #d4d9dd;\r\n    border-radius: 8px;\r\n}\r\ncaption {\r\n    font-size: 30px;\r\n    line-height: 36px;\r\n    color: #007ab0;\r\n}

\r\n

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">\r\n<section class="calendar_wrap mt-5">\r\n  <div class="container">\r\n    <div class="row justify-content-center">\r\n      <div class="col-4 mt-4 calender-box">\r\n        <table id="wp-calendar">\r\n          <caption>February 2019</caption>\r\n          <thead>\r\n            <tr>\r\n              <th scope="col" title="Monday">M</th>\r\n              <th scope="col" title="Tuesday">T</th>\r\n              <th scope="col" title="Wednesday">W</th>\r\n              <th scope="col" title="Thursday">T</th>\r\n              <th scope="col" title="Friday">F</th>\r\n              <th scope="col" title="Saturday">S</th>\r\n              <th scope="col" title="Sunday">S</th>\r\n            </tr>\r\n          </thead>\r\n          <tfoot>\r\n            <tr>\r\n              <td colspan="3" id="prev"><a href="//192.168.1.37:8000/silk-insurance/2018/10/">\xc2\xab Oct</a></td>\r\n              <td class="pad">&nbsp;</td>\r\n              <td colspan="3" id="next" class="pad">&nbsp;</td>\r\n            </tr>\r\n          </tfoot>\r\n          <tbody>\r\n            <tr>\r\n              <td colspan="4" class="pad">&nbsp;</td><td>1</td><td>2</td><td>3</td>\r\n            </tr>\r\n            <tr>\r\n              <td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>\r\n            </tr>\r\n            <tr>\r\n              <td>11</td><td>12</td><td>13</td><td><a href="//192.168.1.37:8000/silk-insurance/2019/02/14/" aria-label="Posts published on February 14, 2019">14</a></td><td>15</td><td>16</td><td>17</td>\r\n            </tr>\r\n            <tr>\r\n              <td><a href="//192.168.1.37:8000/silk-insurance/2019/02/18/" aria-label="Posts published on February 18, 2019">18</a></td><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td>\r\n            </tr>\r\n            <tr>\r\n              <td id="today">25</td><td>26</td><td>27</td><td>28</td>\r\n              <td class="pad" colspan="3">&nbsp;</td>\r\n            </tr>\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  </div>            \r\n</section>

\r\n

\r\n

\r\n

\n

Answer 1

添加caption-side: top- 对于样式特异性，可以创建选择器#wp-calendar caption或添加!important到样式 - 请参阅下面的演示：

\n\n

\r\n

\r\n

.calendar_wrap table {\r\n    width: 100%;\r\n}\r\n.calendar_wrap #wp-calendar thead th {\r\n    font-weight: 500;\r\n    color: #45515a;\r\n    font-size: 20px;\r\n    line-height: 28px;\r\n}\r\n.calendar_wrap #wp-calendar tbody td {\r\n    font-weight: 400;\r\n    font-size: 24px;\r\n    line-height: 36px;\r\n    color: #5b666f;\r\n}\r\n.calendar_wrap #wp-calendar tfoot td a {\r\n    color: #3d9596;\r\n    font-weight: 500;\r\n    margin-top: 10px;\r\n    display: inline-block;\r\n    font-size: 22px;\r\n    line-height: 32px;\r\n}\r\n.calendar_wrap #wp-calendar tbody td a {\r\n    color: #EF9950;\r\n}\r\n.calender-box {\r\n    padding: 15px;\r\n    border: 1px solid #d4d9dd;\r\n    border-radius: 8px;\r\n}\r\ncaption {\r\n    font-size: 30px;\r\n    line-height: 36px;\r\n    color: #007ab0;\r\n}\r\n\r\n#wp-calendar caption { /* ADDED */\r\n  caption-side: top;\r\n}

\r\n

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">\r\n<section class="calendar_wrap mt-5">\r\n  <div class="container">\r\n    <div class="row justify-content-center">\r\n      <div class="col-4 mt-4 calender-box">\r\n        <table id="wp-calendar">\r\n          <caption>February 2019</caption>\r\n          <thead>\r\n            <tr>\r\n              <th scope="col" title="Monday">M</th>\r\n              <th scope="col" title="Tuesday">T</th>\r\n              <th scope="col" title="Wednesday">W</th>\r\n              <th scope="col" title="Thursday">T</th>\r\n              <th scope="col" title="Friday">F</th>\r\n              <th scope="col" title="Saturday">S</th>\r\n              <th scope="col" title="Sunday">S</th>\r\n            </tr>\r\n          </thead>\r\n          <tfoot>\r\n            <tr>\r\n              <td colspan="3" id="prev"><a href="//192.168.1.37:8000/silk-insurance/2018/10/">\xc2\xab Oct</a></td>\r\n              <td class="pad">&nbsp;</td>\r\n              <td colspan="3" id="next" class="pad">&nbsp;</td>\r\n            </tr>\r\n          </tfoot>\r\n          <tbody>\r\n            <tr>\r\n              <td colspan="4" class="pad">&nbsp;</td><td>1</td><td>2</td><td>3</td>\r\n            </tr>\r\n            <tr>\r\n              <td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>\r\n            </tr>\r\n            <tr>\r\n              <td>11</td><td>12</td><td>13</td><td><a href="//192.168.1.37:8000/silk-insurance/2019/02/14/" aria-label="Posts published on February 14, 2019">14</a></td><td>15</td><td>16</td><td>17</td>\r\n            </tr>\r\n            <tr>\r\n              <td><a href="//192.168.1.37:8000/silk-insurance/2019/02/18/" aria-label="Posts published on February 18, 2019">18</a></td><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td>\r\n            </tr>\r\n            <tr>\r\n              <td id="today">25</td><td>26</td><td>27</td><td>28</td>\r\n              <td class="pad" colspan="3">&nbsp;</td>\r\n            </tr>\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  </div>            \r\n</section>

\r\n

\r\n

\r\n

\n