CODEWITHSUNDEEP
htmlcsshtml-tablewidth
Zeb-ur-Rehman
Zeb-ur-Rehman

Reputation: 1209

CSS increase Width of table cell

I want to increase the width of td of the table. This table is within the div which has specified width and height. Now when I try to increase the width of td it doesn't show any change. The table is given below (HTML Code):

<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>

​

The CSS code for the above HTML is below

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

Detail Understanding of Code: In above code a table is generated in the div Container, which has specific width (150px) and height (100px). Overflow property is scroll, so left scroll and right scroll bars there. Now I want to increase the width of table cell to 30%, but it doesn't apply changes. So please help me to resolve the problem.

Here is the fiddle for the problem: http://jsfiddle.net/SAD9h/2/

Upvotes: 0

Views: 5552

Answers (1)

Jose Rui Santos
Jose Rui Santos

Reputation: 15319

I think you want that name cell to be as wide as the longest name, so just do this

.name
{
    white-space: nowrap;
}​

jsFiddle here

BTW, your width: 30% was not working, because your table is contained inside a div.Container with a fixed width:150px. If you comment your .Container, then the 30% should work as well.

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

Upvotes: 4

Related Questions