0
我的HTML表格中存在colspan屬性的問題，該問題不起作用，因爲它應該工作。下面是決賽桌的版本圖片：在HTML表格中使用colspan屬性時出現意外的列大小
，我的代碼，直到這一刻：
* { margin: 0px; padding: 0px; outline: 0; box-sizing: border-box; }
body {
\t font-family: "Trebuchet MS", sans-serif;
\t font-size: 12px;
\t line-height: 1.667;
\t font-weight: normal;
\t color: #585858;
}
.container { width: 960px; margin: 0 auto; padding: 40px 20px; }
.outer-table { width: 701px; margin: 0 auto; display: block; }
table { border-collapse: collapse; }
table,
table tr,
table th,
table td { border: 1px solid #9d9d9d; }
.text-header { font-family: "Georgia", sans-serif; font-size: 17px; line-height: 21px; font-weight: normal; color: #2c2c2c; padding: 8px 14px; text-align: left; background: #d0d0d0; }
.inner-table tr td { width: 281px; }<!DOCTYPE html>
<html lang="en">
<head>
\t <meta charset="UTF-8">
\t <title>html vs psd</title>
\t <link rel="stylesheet" href="css/style.css">
</head>
<body>
\t <div class="container">
\t \t <table class="outer-table">
\t \t \t <thead>
\t \t \t \t <tr>
\t \t \t \t \t <th colspan="3" class="text-header">Cras id leo non nisi semper ultrices a sit amet lectus</th>
\t \t \t \t </tr>
\t \t \t </thead>
\t \t \t <tbody>
\t \t \t \t <tr>
\t \t \t \t \t <td colspan="2">
\t \t \t \t \t \t Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempus mollis metus, a imperdiet mauris dapibus ac. Phasellus nec adipiscing nulla. Aliquam sit amet malesuada lorem. Praesent erat lorem, hendrerit ac vehicula pellentesque, tristique quis quam. Suspendisse at ligula enim. Cras id leo non nisi semper ultrices a sit amet lectus.
\t \t \t \t \t </td>
\t \t \t \t \t <td colspan="2">
\t \t \t \t \t \t <table class="inner-table">
\t \t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t \t <td><a href="#">1</a></td>
\t \t \t \t \t \t \t \t <td><a href="#">2</a></td>
\t \t \t \t \t \t \t \t <td><a href="#">3</a></td>
\t \t \t \t \t \t \t \t <td><a href="#">4</a></td>
\t \t \t \t \t \t \t \t <td><a href="#">5</a></td>
\t \t \t \t \t \t \t \t <td><a href="#">6</a></td>
\t \t \t \t \t \t \t \t <td><a href="#">7</a></td>
\t \t \t \t \t \t \t </tr>
\t \t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t \t <td><a href="#">8</a></td>
\t \t \t \t \t \t \t \t <td><a href="#">9</a></td>
\t \t \t \t \t \t \t \t <td><a href="#">10</a></td>
\t \t \t \t \t \t \t \t <td><a href="#">11</a></td>
\t \t \t \t \t \t \t \t <td><a href="#">12</a></td>
\t \t \t \t \t \t \t \t <td><a href="#">13</a></td>
\t \t \t \t \t \t \t \t <td><a href="#">14</a></td>
\t \t \t \t \t \t \t </tr>
\t \t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t \t <td><a href="#">15</a></td>
\t \t \t \t \t \t \t \t <td><a href="#">16</a></td>
\t \t \t \t \t \t \t \t <td><a href="#">17</a></td>
\t \t \t \t \t \t \t \t <td><a href="#">18</a></td>
\t \t \t \t \t \t \t \t <td><a href="#">19</a></td>
\t \t \t \t \t \t \t \t <td><a href="#">20</a></td>
\t \t \t \t \t \t \t \t <td><a href="#">21</a></td>
\t \t \t \t \t \t \t </tr>
\t \t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t \t <td><a href="#">22</a></td>
\t \t \t \t \t \t \t \t <td><a href="#">23</a></td>
\t \t \t \t \t \t \t \t <td><a href="#">24</a></td>
\t \t \t \t \t \t \t \t <td><a href="#">25</a></td>
\t \t \t \t \t \t \t \t <td><a href="#">26</a></td>
\t \t \t \t \t \t \t \t <td><a href="#">27</a></td>
\t \t \t \t \t \t \t \t <td><a href="#">28</a></td>
\t \t \t \t \t \t \t </tr>
\t \t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t \t <td><a href="#">29</a></td>
\t \t \t \t \t \t \t \t <td><a href="#">30</a></td>
\t \t \t \t \t \t \t \t <td><a href="#">31</a></td>
\t \t \t \t \t \t \t \t <td></td>
\t \t \t \t \t \t \t \t <td></td>
\t \t \t \t \t \t \t \t <td></td>
\t \t \t \t \t \t \t \t <td></td>
\t \t \t \t \t \t \t </tr>
\t \t \t \t \t \t </table>
\t \t \t \t \t </td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td colspan="3">
\t \t \t \t \t \t Phasellus nec adipiscing nulla. Aliquam sit amet malesuada lorem. Praesent erat lorem, hendrerit ac vehicula pellentesque, tristique quis quam.
\t \t \t \t \t </td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td colspan="1">
\t \t \t \t \t \t Suspendisse
\t \t \t \t \t </td>
\t \t \t \t \t <td colspan="2">
\t \t \t \t \t \t Praesent erat lorem, hendrerit ac vehicula pellentesque, tristique quis quam. Suspendisse at ligula enim. Cras id leo non nisi semper ultrices a sit amet lectus.
\t \t \t \t \t </td>
\t \t \t \t </tr>
\t \t \t </tbody>
\t \t </table>
\t </div><!-- /.container -->
</body>
</html>我不明白爲什麼最後一列跨度應該是對於文本「Suspendisse」，colspan =「1」和colspan =「2」對於右側文本不起作用，並且第一個colspan =「1」被延伸到很多...？
沒有ü檢查答案嗎？ – KikiTheOne
是的，謝謝:) – thedivkiller