表格未正确对齐

时间:2012-07-25 10:59:59

标签: html css html-table

我有这个恼人的问题,即同一个表在不同的分辨率下表现不同。一个页面是页面的一部分工作正常,一切都很好地对齐。不起作用的是全宽,因为它是打印的,所以它在一个单独的页面中。问题出现在技能和语言部分,“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>&nbsp;</li>
                    </ul>
                </td>                   
                <td colspan="1" class="entry_data">
                    <ul>
                        <li>Basic</li>
                        <li>Basic</li>
                        <li>&nbsp;</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;
}

1 个答案:

答案 0 :(得分:1)

#cv_table_p .entry_head {
    background: #EEEEEE;
    padding:5px;
    line-height:21px;

}
#cv_table_p .entry_data {
    font-size:0.825em;
    padding-left:5px;
    color:#4D4D4D;
    padding:3px 3px 3px 5px;
    vertical-align:top;
    line-height:21px;
}