内表内容与外表不对齐答案

【问题标题】：Inner table content not aligned with outer table内表内容与外表不对齐
【发布时间】：2018-06-27 04:52:06
【问题描述】：

我正在另一个表中创建一个表。我已将列划分为与外部表完全相同的比率。但是，这些列未与外部表列对齐。谁能告诉我我错过了什么？

<html>
	<div style="overflow:scroll;height:140px;width:100%;overflow:auto"  style="background-color:black">
		<table width="100%" style="padding:0; margin:0;"  cellpadding="0">
			<tr class="tbl_header"  cellpadding="0">
				<td width="3%">test1</td>
				<td width="7%">test2</td>
				<td width="3%">test3</td>                               
				<td width="12%">test4</td>
				<td width="7%">test5</td>
				<td width="10%"test6</td>                               
				<td width="7%">test7</td>  
			</tr>
			<tr  style="background-color:yellow">
				<td colspan="7" style="background-color:yellow">
					<div style="overflow:scroll;height:110px;width:100%;overflow:auto;border:none;background-color:green">
						<table width="100%" style="border:none;background-color:red" cellpadding="0">
							<tr class="even">
								<td width="3%">2</td>
								<td width="7%" class="tdAlign">Testing </td>
								<td width="3%" class="tdAlign">Testing </td>
								<td width="12%" class="tdAlign">Testing Testing Testing</td>                     
								<td width="7%">Testing_1</td>
								<td width="10%">Testing_2</td>  			
								<td width="7%">Testing_3</td>
							</tr>
						</table>
					</div>
				</td>
			</tr>
		</table>
	</div>
</html>

【问题讨论】：

您将宽度设置为td，而不是使用colgroup

标签： html css html-table border cellpadding

【解决方案1】：

当我使用 chromes web kit 检查表格时。由于文本长度，我看到应该是 3% 的表格。您可以通过将 table-layout: fixed 添加到您的两个 <table> 元素来解决此问题。

如果你想使用表头，我建议使用<th> (see here)

【讨论】：

【解决方案2】：

<html>
	<div style="overflow:scroll;height:140px;width:100%;overflow:auto"  style="background-color:black">
		<table width="100%" style="padding:0; margin:0;"  cellpadding="0">
			<tr class="tbl_header"  cellpadding="0">
				<td width="3%">test1</td>
				<td width="7%">test2</td>
				<td width="3%">test3</td>                               
				<td width="12%">test4</td>
				<td width="7%">test5</td>
				<td width="10%">test6</td>                               
				<td width="7%">test7</td>  
			</tr>
			<tr  style="background-color:yellow">
				<td colspan="7" style="background-color:yellow">
					<div style="overflow:scroll;height:110px;width:100%;overflow:auto;border:none;background-color:green">
						<table width="100%" style="border:none;background-color:red" cellpadding="0">
							<tr class="even">
								<td width="3%">2</td>
								<td width="7%" class="tdAlign">Testing </td>
								<td width="3%" class="tdAlign">Testing </td>
								<td width="12%" class="tdAlign">Testing Testing Testing</td>                     
								<td width="7%">Testing_1</td>
								<td width="10%">Testing_2</td>  			
								<td width="7%">Testing_3</td>
							</tr>
						</table>
					</div>
				</td>
			</tr>
		</table>
	</div>
</html>

您似乎错过了<TD>(<td width="10%">test6</td>) 的结束标记。希望这可以帮助。告诉我

【讨论】：