0

我想增加表格 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>zeb.1234@yahoo.com</td>
            <td>03415174696</td>
        </tr>
        <tr>
            <td>2</td>
            <td class="name">Zeb-ur-Rehman</td>
            <td>zeb.1234@yahoo.com</td>
            <td>03415174696</td>
        </tr>
        <tr>
            <td>3</td>
            <td class="name">Zeb-ur-Rehman</td>
            <td>zeb.1234@yahoo.com</td>
            <td>03415174696</td>
        </tr>
        <tr>
            <td>4</td>
            <td class="name">Zeb-ur-Rehman</td>
            <td>zeb.1234@yahoo.com</td>
            <td>03415174696</td>
        </tr>
        <tr>
            <td>5</td>
            <td class="name">Zeb-ur-Rehman</td>
            <td>zeb.1234@yahoo.com</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 Container中生成了一个表格，该表格具有特定的宽度（150px）和高度（100px）。溢出属性是滚动，所以有左滚动和右滚动条。现在我想将表格单元格的宽度增加到 30%，但它不应用更改。所以请帮我解决问题。

这是解决问题的小提琴：http: //jsfiddle.net/SAD9h/2/

4

1 回答 1

4

我认为您希望该name单元格与最长的名称一样宽，所以就这样做

.name
{
    white-space: nowrap;
}​

jsFiddle在这里

顺便说一句，你width: 30%没有工作，因为你的表包含在div.Container一个固定的width:150px. 如果您评论您的 .Container，那么 30% 应该也可以。

.Container
{
    height:100px;
    /*width:150px;*/
    overflow-x:scroll;
    overflow-y:scroll;
}
于 2012-10-13T07:31:40.343 回答