Unexpected Column Sizes When Using Colspan Attribute In An HTML Table
I have problem with colspan attribute in my HTML table, which is not working as it should be working. Here is a picture of the final table version: and my code until this moment:
Solution 1:
Ur top Column has 4 td ( 2 x 2 Colspan ) ; ur Head has Colspan "3" not 4. ur 3rd row has colspan 3 again. and the last row where the error is has 3 cols total. and u didnt set the padding OK.
I did the Code below for u already. i also inserted the missing CSS and fixed the tableerrors for u. Ur welcome :D
* { margin: 0px; padding: 0px; outline: 0; box-sizing: border-box; }
body {
font-family: "Trebuchet MS", sans-serif;
font-size: 12px;
line-height: 1.667;
font-weight: normal;
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; line-height:33px; text-align:center;text-decoration:none;}
.inner-table tr td a {text-decoration:none; color: grey;width;100%;height:100%;display:block;}
.inner-table tr td a:hover {text-decoration:none; color: white;background:black;}
.grey { background:#e6e6e6;}
.padding-table { padding: 15px; }<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html vs psd</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<table class="outer-table">
<thead>
<tr>
<th colspan="4" class="text-header">Cras id leo non nisi semper ultrices a sit amet lectus</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2" class="padding-table">
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.
</td>
<td colspan="2" valign="top">
<table class="inner-table">
<tr>
<td class="grey"><a href="#">1</a></td>
<td class="grey"><a href="#">2</a></td>
<td class="grey"><a href="#">3</a></td>
<td class="grey"><a href="#">4</a></td>
<td class="grey"><a href="#">5</a></td>
<td><a href="#">6</a></td>
<td><a href="#">7</a></td>
</tr>
<tr>
<td class="grey"><a href="#">8</a></td>
<td class="grey"><a href="#">9</a></td>
<td class="grey"><a href="#">10</a></td>
<td class="grey"><a href="#">11</a></td>
<td class="grey"><a href="#">12</a></td>
<td><a href="#">13</a></td>
<td><a href="#">14</a></td>
</tr>
<tr>
<td class="grey"><a href="#">15</a></td>
<td class="grey"><a href="#">16</a></td>
<td class="grey"><a href="#">17</a></td>
<td class="grey"><a href="#">18</a></td>
<td class="grey"><a href="#">19</a></td>
<td><a href="#">20</a></td>
<td><a href="#">21</a></td>
</tr>
<tr>
<td class="grey"><a href="#">22</a></td>
<td class="grey"><a href="#">23</a></td>
<td class="grey"><a href="#">24</a></td>
<td class="grey"><a href="#">25</a></td>
<td class="grey"><a href="#">26</a></td>
<td><a href="#">27</a></td>
<td><a href="#">28</a></td>
</tr>
<tr>
<td class="grey"><a href="#">29</a></td>
<td class="grey"><a href="#">30</a></td>
<td class="grey"><a href="#">31</a></td>
<td class="grey"></td>
<td class="grey"></td>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="4" class="padding-table" style="background: #d0d0d0;">
Phasellus nec adipiscing nulla. Aliquam sit amet malesuada lorem. Praesent erat lorem, hendrerit ac vehicula pellentesque, tristique quis quam.
</td>
</tr>
<tr>
<td colspan="1" width="1" class="padding-table">
<b>Suspendisse</b>
</td>
<td colspan="3" valign="top" class="padding-table">
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.
</td>
</tr>
</tbody>
</table>
</div><!-- /.container -->
</body>
</html>
Post a Comment for "Unexpected Column Sizes When Using Colspan Attribute In An HTML Table"