CSS增加表格單元的寬度

我想增加表格的td寬度。此表位於具有指定寬度和高度的div內。現在，當我嘗試增加td的寬度時，它不會顯示任何更改。下面（HTML代碼）表中給出：CSS增加表格單元的寬度

<div class="Container"> 
<div class="Content"> 
    <table> 
     <tr> 
      <th>ID</th> 
      <th class="name">Name</th> 
      <th>EMail Address</th> 
      <th>Phone no</th> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td class="name">Zeb-ur-Rehman</td> 
      <td>[email protected]</td> 
      <td>03415174696</td> 
     </tr> 
     <tr> 
      <td>2</td> 
      <td class="name">Zeb-ur-Rehman</td> 
      <td>[email protected]</td> 
      <td>03415174696</td> 
     </tr> 
     <tr> 
      <td>3</td> 
      <td class="name">Zeb-ur-Rehman</td> 
      <td>[email protected]</td> 
      <td>03415174696</td> 
     </tr> 
     <tr> 
      <td>4</td> 
      <td class="name">Zeb-ur-Rehman</td> 
      <td>[email protected]</td> 
      <td>03415174696</td> 
     </tr> 
     <tr> 
      <td>5</td> 
      <td class="name">Zeb-ur-Rehman</td> 
      <td>[email protected]</td> 
      <td>03415174696</td> 
     </tr> 
    </table> 
</div>

用於上述HTML的CSS代碼低於代碼的

.Container 
{ 
    height:100px; 
    width:150px; 
    overflow-x:scroll; 
    overflow-y:scroll; 
} 

.Content 
{ 

} 
table,tr,td,th 
{ 
    border:1px solid black; 
    padding:2px; 
} 

.name 
{ 
    width:30%; 
}

詳細理解：在上述代碼中表格生成在div 容器中，其具有特定寬度（150px）和高度（100px）。溢出屬性是滾動的，所以在那裏向左滾動和向右滾動條。現在我想將表格單元格的寬度增加到30％，但不適用更改。所以請幫我解決問題。

下面是該問題的小提琴： http://jsfiddle.net/SAD9h/2/

來源

2012-10-13 Zeb-ur-Rehman

那麼你是說你想調整單元格大小以適應表格大小，因此沒有滾動條？ –

不需要滾動條。我想要的是增加應用類名的表格單元的大小，而不會干擾任何其他元素。 –

我想你想的是name細胞一樣寬最長的名字，所以才這樣做

.name 
{ 
    white-space: nowrap; 
}

jsFiddle here

順便說一句，您的width: 30%無法正常工作，因爲您的表格包含在div.Container內，並帶有固定的width:150px。如果你評論你的.Container，那麼30％也應該工作。

.Container 
{ 
    height:100px; 
    /*width:150px;*/ 
    overflow-x:scroll; 
    overflow-y:scroll; 
}

來源

2012-10-13 07:31:40

哦，你是冠軍！謝謝Jose！它確實有效。 –

CSS增加表格單元的寬度

回答

相關問題