0
我有这个令人讨厌的问题，即相同的表格在不同的分辨率下行为不同。一张作为页面一部分的表格可以正常工作，并且一切都很好。不工作的那个是全宽的，因为它打算打印，所以它在一个单独的页面中。 “技能和语言”部分出现问题，“lorem ipsum”表格单元格与“良好/优秀”单元格没有适当对齐。解决的办法可能是增加“entry_data”类的字体大小，但我希望它的大小更小。你可以建议在这里修改它，因为我希望它能够工作吗？ ：） 谢谢。表格没有正确对齐
HTML代码
<table id="cv_table_p">
<tbody>
<tr>
<td class="cv_head" colspan="4">Education</td>
</tr>
<tr>
<td colspan="2">
<ul>
<li class="entry_head">lorem ipsum</li>
<li class="entry_data">lorem ipsum</li>
<li class="entry_data">lorem ipsum</li>
</ul>
</td>
<td colspan="2">
<ul>
<li class="entry_head">lorem ipsum</li>
<li class="entry_data">lorem ipsum</li>
<li class="entry_data">lorem ipsum</li>
</ul>
</td>
</tr>
<tr>
<td class="cv_head" colspan="4">Experience</td>
</tr>
<tr>
<td colspan="4">
<ul>
<li class="entry_head">lorem ipsum</li>
<li class="entry_data">lorem ipsum</li>
<li class="entry_data">lorem ipsum</li>
</ul>
<p>lorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>
</td>
</tr>
<tr>
<td class="cv_head" colspan="4">Skills<span>Basic/Good/Excellent</span></td>
</tr>
<tr>
<td colspan="1" class="entry_head">
<ul>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
</ul>
</td>
<td colspan="1" class="entry_data">
<ul>
<li>Good</li>
<li>Excellent</li>
<li>Good</li>
<li>Good</li>
<li>Good</li>
<li>Excellent</li>
<li>Excellent</li>
<li>Excellent</li>
</ul>
</td>
<td colspan="1" class="entry_head">
<ul>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
</ul>
</td>
<td colspan="1" class="entry_data">
<ul>
<li>Excellent</li>
<li>Excellent</li>
<li>Good</li>
<li>Excellent</li>
<li>Excellent</li>
<li>Basic</li>
<li>Good</li>
<li>Excellent</li>
</ul>
</td>
</tr>
<tr>
<td class="cv_head" colspan="4">Languages<span>Basic/Good/Fluent</span></td>
</tr>
<tr>
<td colspan="1" class="entry_head">
<ul>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
</ul>
</td>
<td colspan="1" class="entry_data">
<ul>
<li>Fluent</li>
<li>Good</li>
<li>Basic</li>
</ul>
</td>
<td colspan="1" class="entry_head">
<ul>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li> </li>
</ul>
</td>
<td colspan="1" class="entry_data">
<ul>
<li>Basic</li>
<li>Basic</li>
<li> </li>
</ul>
</td>
</tr>
<tr>
<td class="cv_head" colspan="4">Awards</td>
</tr>
<tr>
<td colspan="4">
<ul>
<li class="entry_head">lorem ipsumlorem ipsumlorem ipsum</li>
<li class="entry_data">lorem ipsumlorem ipsumlorem ipsumlorem ipsum</li>
<li class="entry_data">lorem ipsumlorem ipsumlorem ipsumlorem ipsum</li>
</ul>
<p>lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>
</td>
</tr>
</tbody>
</table>
CSS代码
body {
margin:0px;
}
h3 {
margin-top:10px;
}
#cv_table_p {
border-collapse:collapse;
width:100%;
border: 1px solid #DCDCDC;
margin-top:10px;
float:left;
margin-bottom:50px;
}
#cv_table_p td {
width:25%;
padding:0;
border: 1px solid #DCDCDC;
}
#cv_table_p .cv_head {
background:#DCDCDC;
font-size:1.125em;
padding:5px;
}
#cv_table_p .cv_head span{
font-size:0.75em;
float:right;
}
#cv_table_p ul {
list-style:none;
padding:0;
margin:0;
}
#cv_table_p ul li {}
#cv_table_p .entry_head {
background: #EEEEEE;
padding:5px;
}
#cv_table_p .entry_data {
font-size:0.825em;
padding-left:5px;
color:#4D4D4D;
padding:3px 3px 3px 5px;
}
#cv_table_p p {
line-height:150%;
padding:0 5px 0 5px;
font-size:0.9375em;
}
最根本的问题是，你要使用表格布局。别。你有标题和列表。 – Quentin 2012-07-25 11:01:49
你是什么意思？如果你的意思是整个网站的布局，那么没有。即时通讯使用div来划分我的网站内容。这部分只是一张简单易用的表格简历表。 – Stein 2012-07-25 11:13:14
我必须同意@Quentin。表格只能用于显示数据。您所展示的简历内容可以通过div，sections，uls等简单地进行布局。管理您做这件事的方式可能会更容易，但这并不意味着它是正确的。 – 2012-07-25 11:17:51