thedivkiller
Reputation: 81
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:
* { 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; }<!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="3" class="text-header">Cras id leo non nisi semper ultrices a sit amet lectus</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
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">
<table class="inner-table">
<tr>
<td><a href="#">1</a></td>
<td><a href="#">2</a></td>
<td><a href="#">3</a></td>
<td><a href="#">4</a></td>
<td><a href="#">5</a></td>
<td><a href="#">6</a></td>
<td><a href="#">7</a></td>
</tr>
<tr>
<td><a href="#">8</a></td>
<td><a href="#">9</a></td>
<td><a href="#">10</a></td>
<td><a href="#">11</a></td>
<td><a href="#">12</a></td>
<td><a href="#">13</a></td>
<td><a href="#">14</a></td>
</tr>
<tr>
<td><a href="#">15</a></td>
<td><a href="#">16</a></td>
<td><a href="#">17</a></td>
<td><a href="#">18</a></td>
<td><a href="#">19</a></td>
<td><a href="#">20</a></td>
<td><a href="#">21</a></td>
</tr>
<tr>
<td><a href="#">22</a></td>
<td><a href="#">23</a></td>
<td><a href="#">24</a></td>
<td><a href="#">25</a></td>
<td><a href="#">26</a></td>
<td><a href="#">27</a></td>
<td><a href="#">28</a></td>
</tr>
<tr>
<td><a href="#">29</a></td>
<td><a href="#">30</a></td>
<td><a href="#">31</a></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3">
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">
Suspendisse
</td>
<td colspan="2">
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>I cannot understand why the last one colspan which should be colspan="1" for the text "Suspendisse" and colspan="2" for the text on the right side is not working and the first colspan="1" is stretched way to much...?
Upvotes: 0
Views: 150
Answers (1)
KikiTheOne
Reputation: 523
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>Upvotes: 1
Related Questions
- Why is colspan not applied as expected
- Table css width is broken by colspan attribute
- html table colspan not working as expected
- Issues with colspan in CSS table
- Table column sizing involving colspan
- Colspan not working as expected (without CSS)
- Font Size in Merged Colspan Causes Column Widths in Other Rows to Change
- colspan width issue
- HTML Table Formatting: 2 colspan cell messes up column width
- Same column width under colspan