首页 > 求助~单元格<td>样式,写到div上就出问题了?

求助~单元格<td>样式,写到div上就出问题了?

我想要的效果如下

我实现的代码如下

<!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> Zung版本的SDS量表</title>
  
  <style type="text/css">

     table{border: 2px solid black}
     td{border: 1px solid black}

     .mytitle{padding-top:2cm;padding-bottom:1cm;font-weight:bold;font-size:23px;}

  </style> 

 </head>

 <body>

<center>
          <p class="mytitle">SDS抑郁自评量表(Zung版本)</p> 
     
          <table border="0" cellpadding="0" cellspacing="0" width="780" >              
            <tr>
                      <td width="50%" height='44' rowspan="2" align="center">项目</td>
                      <td width="50%" height='22' colspan="4" align="center">状态</td>
            </tr> 
            <tr>
                      <td width="13%" height="22" align="center">无/ 偶尔有</td>       
                      <td width="13%" height="22" align="center">有时有</td>
                      <td width="13%" height="22" align="center">经常有</td>
                      <td width="13%" height="22" align="center">总是如此</td>
            </tr>
          </table>  

</center>
</body>
</html>

问题- 我想要把每个<TD>的公共部分样式
width="13%" height="22" align="center"
放到上面的div里面的td,也就是写成这样子

<!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> Zung版本的SDS量表</title>
  
  <style type="text/css">

     table{border: 2px solid black}
     td{border: 1px solid black,width:13%,height:22,align:center}

     .mytitle{padding-top:2cm;padding-bottom:1cm;font-weight:bold;font-size:23px;}

  </style> 
 </head>
 <body>

<center>
          <p class="mytitle">SDS抑郁自评量表(Zung版本)</p> 
     
          <table border="0" cellpadding="0" cellspacing="0" width="780" >              
            <tr>
                      <td width="50%" height='44' rowspan="2" align="center">项目</td>
                      <td width="50%" height='22' colspan="4" align="center">状态</td>
            </tr> 
            <tr>
                      <td>无/ 偶尔有</td>       
                      <td>有时有</td>
                      <td>经常有</td>
                      <td>总是如此</td>
            </tr>
          </table>  

</center>
</body>
</html>

单元格中间的线条竟然没有了,为什么会这样子呢?求助


因为CSS语法不同于HTML语法:
width="13%" height="22" align="center"

你看看,你的分隔符号呢?怎么是空格分隔呢?

.mytitle的样式你会写分号,怎么这里就不写了呢?


 <style type="text/css">

     table{border: 2px solid black;border-collapse:collapse;}
     td{border: 1px solid black; width:13%; height:22; text-align:center;}

     .mytitle{padding-top:2cm;padding-bottom:1cm;font-weight:bold;font-size:23px;}

  </style> 

你没弄明白CSS语法格式,把我这个粘贴进你的第二个文档,替换下,就是你要的效果了


td{border: 1px solid black;width="13%";height="22";align="center"}

【热门文章】
【热门文章】