含有间距的td处理方式

含有间距的td处理方式:

一、如图:

含有间距的td处理方式_第1张图片

二、html:


<table cellpadding="0" cellspacing="0" class="score_point">
    <tr class="th">
        <td><span>Technical Skills</span></td>
        <td><span>Business Skills</span></td>
        <td><span>People Skills</span></td>
        <td><span>Leadership Skills</span></td>
        <td><span>Integration</span></td>
    </tr>
    <tr class="descri">
        <td><span>Ability to make sensible/informed sugges</span></td>
        <td><span>Ability to make sensible/informed sugges</span></td>
        <td><span>Ability to make sensible/informed sugges</span></td>
        <td><span>Ability to make sensible/informed suggesAbility to make sensible/informed sugges</span></td>
        <td><span>Ability to make sensible/informed sugges</span></td>
    </tr>
    <tr class="score">
        <td>
            <input type="text" placeholder="score (full mark :5) ">
        </td>
        <td>
            <input type="text" placeholder="score (full mark :5) " class="ok" value="5">
        </td>
        <td>
            <input type="text" placeholder="score (full mark :5) ">
        </td>
        <td>
            <input type="text" placeholder="score (full mark :5) ">
        </td>
        <td>
            <input type="text" placeholder="score (full mark :5) ">
        </td>
    </tr>
</table>

三、css:


.score_point{font-family: 'Arial';}
.score_point .th td, .score_point .score input{text-align: center;}
.score_point .th td{background-color: #E3E3E3;color: #333;}
.score_point td span, .score_point .score input{border: 1px #eee solid;display: block; margin:1px;padding: 5px;width: 164.5px;}
.score_point .descri{color: #666;}
.score_point .descri span{height: 90px;overflow: auto;word-break: break-all;}
.score_point .score input{line-height: 24px;background-color: transparent;}
.score_point .score input:focus{box-shadow: 0 0 2px 1px #1FA0E2 inset;color: #1FA0E2;font-weight: bold;}
.score_point .score .ok{color: #1FA0E2;}

四、解析:

由于td的margin无效,所以在td内容再添加一层dom,然后用margin做间距。

ps:鉴于个人经验有限,所有观点,如有异议,请直接回复讨论(请勿发表攻击言论)。
加入QQ群209952809(需回答问题,答案为csdn);群聊更快解决问题,更happy。

你可能感兴趣的:(html,table,表格处理)