Home > Web Front-end > HTML Tutorial > td style in css_html/css_WEB-ITnose

td style in css_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 12:16:51
Original
1247 people have browsed it


Requirement: Align the lines of the new lines in the picture below

Current rendering:
[img=http://t2.qpic.cn/mblogpic/67ee2fa0e025de5fd5b8 /2000][/img]
Please give some advice
This is the code:

<!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>
Copy after login


Reply to the discussion (solution)

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

It is recommended that if the format of each td is the same, it is better to put the format on its parent element The best in tr

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template