Maison > interface Web > tutoriel HTML > le corps du texte

css中td样式_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 12:16:51
original
1218 Les gens l'ont consulté


要求:将下图中新增行的线条对齐

目前做出的效果图:
[img=http://t2.qpic.cn/mblogpic/67ee2fa0e025de5fd5b8/2000][/img]
请高手指点
这是代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><script type="text/javascript" src="/TemplateFile/htmllayout/js/ld.js"></script><style>.tables{	border-color:#616161; border-width:1px; border-style:solid;	}.tds{	border:#999; border-width:1px 1px 1px 1px; border-style:solid;	}	.tdsts{	border:#999; border-width:1px 1px 1px 1px; border-style:solid;    background-color:#eff6ff;	}.mingxiTable {	width:98%;	background-color:#fff;}.mingxiTable, .mingxiTable td {	border-spacing:0;	border-collapse:collapse;	border:1px #c0c0c0 solid;}.mingxitd {	background-color:#fff;	text-align:center;	height:28px;	padding:0;}.mingxitd table, .mingxitd td {	background-color:#FFF;	border-spacing:0;	border-collapse:collapse;	border-left:0;	border-top:0;	border-right:0;	border-bottom:0;}.mingxitd .detailAddTd {	background-color:#FFF;	text-align:left;	height:28px;	border-bottom:#c0c0c0 solid 1px;}.mingxitd .inputstyle {	margin-left:5px;}.mingxitd .field {	background-color:#FFF;	text-align:left;	height:28px;	border-top:#c0c0c0 solid 1px;}.mingxitd .header td {	text-align:left;	border-top:#c0c0c0 solid 1px;	text-align:left;	height:28px;}.mingxitdC1 {}.fujian table, .fujian td {	border:0;	text-align:left;	height:28px;}input{ border:0px none;}</style><body>    <div align="center">    <!--2行一列的表格里嵌套了一个20行13列的表格-->    <table width="90%" height="439" border="0" style="font-family:'宋体'; font-size:12px;">      <tr>        <td height="26" align="center" style="font-family:'宋体'; font-size:22px; FONT-WEIGHT: bold;">岗位工资制月度考核平衡记分卡</td>      </tr>      <tr>        <td><table width="100%" border="0" cellspacing="1" cellpadding="2" class="tables">          <tr>            <td class="tds" width="4%">被考核人</td>            <td colspan="2" class="tds"> </td>            <td class="tds" width="6%">部门</td>            <td colspan="4" class="tds"> </td>            <td width="6%" class="tds">考核周期</td>            <td colspan="4" class="tds"> </td>          </tr>          <tr>            <td class="tdsts" width="4%">类型</td>            <td colspan="12" align="center" class="tdsts"><b>A财务类10%</b></td>          </tr>          <tr>            <td colspan="11" > </td>            <td width="12%" ><div id="div0button"><button class="BtnFlow" id="$addbutton0$" accesskey="A" name="addbutton0" onclick="addRow0(0)"><u>A</u>-添加</button></div></td>            <td width="28%" ><div><button class="BtnFlow" id="$delbutton0$" accesskey="E" name="delbutton0" onclick="if(isdel()){deleteRow0(0);}"><u>E</u>-删除</button></div></td>          </tr>          <tr>            <td colspan="13">             <table class="mingxiTable" width="100%">             <tr>                <td class="tds" width="4%">序号</td>            <td width="4%" class="tds">具体指标</td>            <td width="5%"    class="tds">权重</td>            <td    class="tds">指标说明</td>            <td width="6%"    class="tds">基本目标</td>            <td width="6%"    class="tds">最高目标</td>            <td width="7%"    class="tds">基本权分</td>            <td width="6%"    class="tds">最高权分</td>            <td    class="tds">计分方法</td>            <td width="5%"    class="tds">数据来源</td>            <td width="5%"    class="tds">完成情况</td>            <td    class="tds">评分</td>            <td    class="tds">支持文件</td>          </tr>          <tr>            <td width="4%"  > </td>            <td class="mingxitd"   > </td>            <td class="mingxitd"   > </td>            <td class="mingxitd"   > </td>            <td class="mingxitd"   > </td>            <td class="mingxitd"   > </td>            <td class="mingxitd"  > </td>            <td class="mingxitd"   > </td>            <td class="mingxitd"   > </td>            <td class="mingxitd"   > </td>            <td class="mingxitd"   > </td>            <td class="mingxitd"   > </td>            <td class="mingxitd"  > </td>             </tr>             </table>            </td>          </tr>          <tr>            <td class="tdsts"   >类型</td>            <td colspan="12" align="center" class="tdsts"><b>B类内部营运类70</b>%</td>          </tr>          <tr>            <td colspan="11" > </td>            <td width="12%" ><div id="div0button2"><button class="BtnFlow" id="$addbutton2$" accesskey="A" name="addbutton2" onclick="addRow2(2)"><u>A</u>-添加</button></div></td>            <td width="28%" ><div><button class="BtnFlow" id="$delbutton2$" accesskey="E" name="delbutton2" onclick="if(isdel()){deleteRow2(2);}"><u>E</u>-删除</button></div></td>          </tr>          <tr>          <td colspan="13" >            <table class="mingxiTable" width="100%">            <tr>                <td class="tds">序号</td>                <td class="tds">具体指标</td>                <td class="tds">权重</td>                <td class="tds">指标说明</td>                <td class="tds">基本目标</td>                <td class="tds">最高目标</td>                <td class="tds">基本权分</td>                <td class="tds">最高权分</td>                <td class="tds">计分方法</td>                <td class="tds">数据来源</td>                <td class="tds">完成情况</td>                <td class="tds">评分</td>                <td class="tds">支持文件</td>              </tr>              <tr>                <td> </td>                <td class="mingxitd"> </td>                <td class="mingxitd"> </td>                <td class="mingxitd"> </td>                <td class="mingxitd"> </td>                <td class="mingxitd"> </td>                <td class="mingxitd"> </td>                <td class="mingxitd"> </td>                <td class="mingxitd"> </td>                <td class="mingxitd"> </td>                <td class="mingxitd"> </td>                <td class="mingxitd"> </td>                <td class="mingxitd"> </td>            </tr>            </table>            </td>          </tr>          <tr>            <td class="tdsts">类型</td>            <td colspan="12" align="center" class="tdsts"><b>C客户类10%</b></td>          </tr>          <tr>            <td colspan="11" > </td>            <td width="12%" ><div id="div0button3"><button class="BtnFlow" id="$addbutton3$" accesskey="A" name="addbutton3" onclick="addRow3(3)"><u>A</u>-添加</button></div></td>            <td width="28%" ><div><button class="BtnFlow" id="$delbutton3$" accesskey="E" name="delbutton3" onclick="if(isdel()){deleteRow3(3);}"><u>E</u>-删除</button></div></td>          </tr>          <tr>            <td colspan="13">             <table class="mingxiTable" width="100%">              <tr>                <td class="tds">序号</td>                <td class="tds">具体指标</td>                <td class="tds">权重</td>                <td class="tds">指标说明</td>                <td class="tds">基本目标</td>                <td class="tds">最高目标</td>                <td class="tds">基本权分</td>                <td class="tds">最高权分</td>                <td class="tds">计分方法</td>                <td class="tds">数据来源</td>                <td class="tds">完成情况</td>                <td class="tds">评分</td>                <td class="tds">支持文件</td>              </tr>              <tr>                <td> </td>                <td class="mingxitd"> </td>                <td class="mingxitd"> </td>                <td class="mingxitd"> </td>                <td class="mingxitd"> </td>                <td class="mingxitd"> </td>                <td class="mingxitd"> </td>                <td class="mingxitd"> </td>                <td class="mingxitd"> </td>                <td class="mingxitd"> </td>                <td class="mingxitd"> </td>                <td class="mingxitd"> </td>                <td class="mingxitd"> </td>              </tr>             </table>            </td>          </tr>          <tr>            <td class="tdsts">类型</td>            <td colspan="12" align="center" class="tdsts"><b>D创新成长类10</b>%</td>          </tr>    </div></body></html>
Copier après la connexion


回复讨论(解决方案)

图片:
[img=http://t2.qpic.cn/mblogpic/67ee2fa0e025de5fd5b8/2000][/img]

建议如果对于每个td的格式相同的话,还是把格式放在其父元素tr中的好

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal