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%;
}

コードの詳細な理解: 上記のコードでは、特定の幅 (150px) と高さ (100px) を持つテーブルが div Containerに生成されます。オーバーフロー プロパティはスクロールなので、左スクロール バーと右スクロール バーがあります。今、表のセルの幅を 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 に答える