Question

我有两张桌子，如下：

#reference
{
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	margin: 0px 10px 0px 15px;
	text-align: left;
	border-collapse: collapse;
	color: navy;
}

#reference th
{
	padding: 8px;
	font-size: 16px;
	font-weight: normal;
	background: yellow;
	border-top: 2px solid #000;
	border-bottom: 1px solid #000;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	color: navy;
	text-align: center;
}

#reference td
{
	padding: 8px;
	border-bottom: 1px solid #000;
	border-top: 1px solid #000;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	color: #669;
}

#reference tbody tr:hover td
{
	background: pink;
	color: #339;
}

#copy
{
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	margin: 0px 10px 0px 15px;
	text-align: left;
	border-collapse: collapse;
	color: navy;
}

#copy th
{
	padding: 8px;
	font-size: 16px;
	font-weight: normal;
	background: yellow;
	border-top: 2px solid #000;
	border-bottom: 1px solid #000;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	color: navy;
	text-align: center;
}

#copy td
{
	padding: 8px;
	border-bottom: 1px solid #000;
	border-top: 1px solid #000;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	color: #669;
}

#copy tbody tr:hover td
{
	background: pink;
	color: #339;
}

<!DOCTYPE html>
<html>
	<head>
		<title>Tables test</title>
		<link href="style.css" rel="stylesheet" type="text/css">
		<meta charset="utf-8">
	</head>
	<body>
		<table id="reference">
			<thead>
				<th style="width: 100px;">t1 - header 1</th>
				<th style="width: 200px;">t1 - header 2</th>
				<th style="width: 250px;">t1 - header 3</th>
			</thead>
		<tbody>
			<tr>
				<td>t1 - value 1</td>
				<td>t1 - value 2</td>
				<td>t1 - value 3</td>
			</tr>
			<tr>
				<td>t1 - value 4</td>
				<td>t1 - value 5</td>
				<td>t1 - value 6</td>
			</tr>
			<tr>
				<td>t1 - value 7</td>
				<td>t1 - value 8</td>
				<td>t1 - value 9</td>
			</tr>
		</tbody>
		</table>

		<table id="copy">
			<thead>
				<th style="width: 300px; height: 0;">t2 - header 1</th>
				<th style="width: 250px; height: 0;">t2 - header 2</th>
			</thead>
			<tbody>
				<tr>
					<td style="width: 300px;">t2 - value 1</td>
					<td style="width: 250px;">t2 - value 2</td>
				</tr>
				<tr>
					<td style="width: 300px;">t2 - value 3</td>
					<td style="width: 250px;">t2 - value 4</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

我需要“t2 - header 1”与“t1 - header 1”+“t1 - header 2”具有完全相同的宽度。我在互联网上运行了几次搜索，找到了相同的解决方案，但是所有搜索都适用于具有相同宽度的列，而我需要预定义的列宽。有任何想法吗？

Answer 1

您需要做的就是修改＆＃34; t2 - 标题1＆＃34;

的宽度

<th style="width: 317px; height: 0;">t2 - header 1</th>

Answer 2

为什么不使用百分比？

如果您坚持使用550px，只需在代码中设置并使用550px的百分比或将来使用的任何表格来保持相同。

您可以查看引导表以获得对表操作的高级查看（精简表，响应表等）。

table {
  width:550px;
 }

#reference
{
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	margin: 0px 10px 0px 15px;
	text-align: left;
	border-collapse: collapse;
	color: navy;
}

#reference th
{
	padding: 8px;
	font-size: 16px;
	font-weight: normal;
	background: yellow;
	border-top: 2px solid #000;
	border-bottom: 1px solid #000;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	color: navy;
	text-align: center;
}

#reference td
{
	padding: 8px;
	border-bottom: 1px solid #000;
	border-top: 1px solid #000;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	color: #669;
}

#reference tbody tr:hover td
{
	background: pink;
	color: #339;
}

#copy
{
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	margin: 0px 10px 0px 15px;
	text-align: left;
	border-collapse: collapse;
	color: navy;
}

#copy th
{
	padding: 8px;
	font-size: 16px;
	font-weight: normal;
	background: yellow;
	border-top: 2px solid #000;
	border-bottom: 1px solid #000;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	color: navy;
	text-align: center;
}

#copy td
{
	padding: 8px;
	border-bottom: 1px solid #000;
	border-top: 1px solid #000;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	color: #669;
}

#copy tbody tr:hover td
{
	background: pink;
	color: #339;
}

<!DOCTYPE html>
<html>
	<head>
		<title>Tables test</title>
		<link href="style.css" rel="stylesheet" type="text/css">
		<meta charset="utf-8">
	</head>
	<body>
		<table id="reference">
			<thead>
				<th style="width: 20%;">t1 - header 1</th>
				<th style="width: 35%;">t1 - header 2</th>
				<th style="width: 45%;">t1 - header 3</th>
			</thead>
		<tbody>
			<tr>
				<td>t1 - value 1</td>
				<td>t1 - value 2</td>
				<td>t1 - value 3</td>
			</tr>
			<tr>
				<td>t1 - value 4</td>
				<td>t1 - value 5</td>
				<td>t1 - value 6</td>
			</tr>
			<tr>
				<td>t1 - value 7</td>
				<td>t1 - value 8</td>
				<td>t1 - value 9</td>
			</tr>
		</tbody>
		</table>

		<table id="copy">
			<thead>
				<th style="width: 55%;">t2 - header 1</th>
				<th style="width: 45%;">t2 - header 2</th>
			</thead>
			<tbody>
				<tr>
					<td>t2 - value 1</td>
					<td>t2 - value 2</td>
				</tr>
				<tr>
					<td>t2 - value 3</td>
					<td>t2 - value 4</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

两个表的垂直对齐

2 个答案: