Блог

Главная - Вопросы по программированию - Неожиданные размеры столбцов при использовании атрибута colspan в таблице HTML

Неожиданные размеры столбцов при использовании атрибута colspan в таблице HTML

#html #css

#HTML #css

Вопрос:

У меня проблема с атрибутом colspan в моей таблице HTML, который работает не так, как должен работать. Вот изображение окончательной версии таблицы:

исходное изображение

и мой код до этого момента:

 * { 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>

Я не могу понять, почему последний colspan, который должен быть colspan = «1» для текста «Suspendisse» и colspan = «2» для текста с правой стороны, не работает, а первый colspan = «1» сильно растянут …?

Комментарии:

1. вы проверили ответ?

2. да, спасибо 🙂

Ответ №1:

В верхнем столбце у вас 4 td (2 x 2 Colspan ); в заголовке у вас Colspan «3», а не 4. в 3-й строке у вас снова colspan 3. и последняя строка, в которой ошибка, имеет всего 3 столбца. и вы не установили заполнение нормально.

Я уже сделал приведенный ниже код для u. я также вставил отсутствующий CSS и исправил ошибки таблицы для u. Приветствую вас: 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>