html - CSS增加表格单元格的宽度

我想增加表格的td宽度。该表在具有指定宽度和高度的div内。现在，当我尝试增加td的宽度时，它没有显示任何更改。该表如下（HTML代码）所示：

<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>[e-mail]</td>
            <td>03415174696</td>
        </tr>
        <tr>
            <td>2</td>
            <td class="name">Zeb-ur-Rehman</td>
            <td>[e-mail]</td>
            <td>03415174696</td>
        </tr>
        <tr>
            <td>3</td>
            <td class="name">Zeb-ur-Rehman</td>
            <td>[e-mail]</td>
            <td>03415174696</td>
        </tr>
        <tr>
            <td>4</td>
            <td class="name">Zeb-ur-Rehman</td>
            <td>[e-mail]</td>
            <td>03415174696</td>
        </tr>
        <tr>
            <td>5</td>
            <td class="name">Zeb-ur-Rehman</td>
            <td>[e-mail]</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/

最佳答案

我认为您希望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;
}