0

为什么这个示例表，第一列扩大了这么多，而其他列缩小了？ 

<html>  
<head>  
   <style type="text/css">
      table,th, td,{
    width:100%;   
    border: 4px, solid;   
    border-collapse:collapse;   
       }    
   </style>  
</head>  
<body>  

<table>  
<tr>  
    <th>First Name</th>   
    <th>Last Name</th>   
    <th>Date</th>   
    <th>Notes</th>   
</tr>   
<tr>   
    <td>Jill</td>   
    <td>Smith</td>  
    <td>20-12-2013</td>  
    <td>AAAa</td>  
</tr>  

<tr>  
    <td>Jill</td>  
    <td>Smith</td>   
    <td>20-12-2013</td>  
    <td>AAAa</td>  
</tr>  

<tr>  
    <td>Eve </td>  
    <td>Jackson</td>  
    <td>20-12-2013</td>  
    <td>AAAa</td>   
</tr>  

<tr>  
    <td>John </td>  
    <td>Doe</td>  
    <td>20-12-2013</td>  
    <td>AAAa</td>  
</tr>  

<tr>  
    <td>Adam </td>  
    <td>Johnson</td>  
    <td>20-12-2013</td>  
    <td>AAAa</td>  
</tr>  


</table>  



</body>  
</html>

在此处输入图像描述

4

3 回答 3

3

您正在使用width: 100%;- td>table,th, td

演示

它应该是

table {
    width:100%;
    border-collapse:collapse;   
}

table, th, td {   
    border: 4px solid #aaa;   /* You were wrong here too */

}

旁注：您,在此选择器中有一个流浪者table,th, td,。这也将选择文档中的所有元素table th，因此请考虑提供一个类并使用类似的选择器td

.class_name table, .class_name table th, .class_name table td {
   /* Styles goes here */
}
于 2013-05-11T19:50:27.347 回答
1

如果您希望每列具有相同的宽度，则必须将列的宽度设置为 25%。

解决方案：

http://jsfiddle.net/XAZKT/

table {
    width:100%;   
    border: 4px, solid;   
    border-collapse:collapse;   
}

th { width: 25% }
于 2013-05-11T19:50:24.977 回答
0

分别放置 th 和 td 宽度

table {
  width:100%;   
  border: 4px, solid;   
  border-collapse:collapse;   
}

th { width: 25% } 
td { width:25%}
于 2013-05-11T19:55:49.427 回答