CSS增加表格单元格的宽度答案

【问题标题】：CSS increase Width of table cellCSS增加表格单元格的宽度
【发布时间】：2012-10-03 23:15:25
【问题描述】：

我想增加表格 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 中生成了一个表格，该表格具有特定的宽度（150 像素）和高度（100 像素）。溢出属性是滚动，所以有左滚动和右滚动条。现在我想将表格单元格的宽度增加到 30%，但它不应用更改。所以请帮我解决这个问题。

这是解决问题的方法： http://jsfiddle.net/SAD9h/2/

【问题讨论】：

那么您是说要调整单元格的大小以适应表格大小，以便没有滚动条？
不需要滚动条。我想要的是在不干扰任何其他元素的情况下增加应用类名的表格单元格的大小。

标签： html css html-table width

【解决方案1】：

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

.name
{
    white-space: nowrap;
}

jsFiddle here

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

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

【讨论】：