Question

为什么这个样本表，第一列扩展得太多而其他列缩小了？

<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>

enter image description here

Answer 1

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

Demo

应该是

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 */
}

Answer 2

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

<强>解决方案：

http://jsfiddle.net/XAZKT/

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

th { width: 25% }

Answer 3

分别放入th和td宽度

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

th { width: 25% } 
td { width:25%}

为什么第一列在此表中展开？

3 个答案: