CODEWITHSUNDEEP
htmlcss
SivaRajini
SivaRajini

Reputation: 7375

fix the table td width

enter image description here

I want to design like above table

I have implemented like this. Please check my JSFiddle.

HTML:

<table border="0" id="cssTable">
    <tr>
        <td>eredgb</td>
        <td><a href="self">04-Milwaukee</a></td>
        <td>705</td>
        <td>sdfdfdfed</td>
        <td>298</td>
    </tr>
    <tr>
        <td>sdfsdfsdfsdfsdf</td>
        <td><a href="self">04-Milwaukee</a></td>
        <td>705</td>
        <td>content2</td>
        <td>298</td>
    </tr>
    <tr>
        <td>sdfsdfsdfsdfsdf</td>
        <td><a href="self">04-Milwaukee edh walkohnykuohbnbd</a></td>
        <td>705</td>
        <td>content1</td>
        <td>298</td>
    </tr>
</table>

CSS:

#cssTable{
    margin-left:20px;
}

How can I make this like the screenshot above? I need to provide equal spacing and some fixed width for each table td content.

Upvotes: 1

Views: 2316

Answers (7)

smnbbrv
smnbbrv

Reputation: 24581

The problem here is that the table never forces td to use specified width until you use

table { table-layout: fixed; }

and make a first row of table with

td { height: 0; }

and specify width for every td in this row.

By standard you can also use <col> but in some browsers this does not work, td works everywhere.

This kind of questions is asked many times in different places, e.g. here

Upvotes: 0

Kryssthanel
Kryssthanel

Reputation: 33

Like this ? (updated inspired by @Grey 's code)

#cssTable td {
    padding: 0px 10px;
}

#cssTable a {
    color:red;
}

#cssTable td:nth-child(1) {
    width:20px;
}
#cssTable td:nth-child(2) {
    width:200px;
}
#cssTable td:nth-child(3),#cssTable td:nth-child(5) {
    width:30px;
    font-weight:bold;
}
#cssTable td:nth-child(4) {
    width:20px;
}

You need to insert a fix width for every td of one line. The others just copy the ones who have width. You can add a Class to each cell in function of its column. You can too insert width in % so your display is going to increse if you have big resolution.

Upvotes: 0

Grey
Grey

Reputation: 316

If you want to space each td differently you can use the nth-child selector:

#cssTable{margin-left:20px;}  
#cssTable tr td:nth-child(1){width: 100px; padding-right: 10px;}
#cssTable tr td:nth-child(2){width: 300px; padding-right: 10px;}
#cssTable tr td:nth-child(3){width: 50px; padding-right: 10px;}
#cssTable tr td:nth-child(4){width: 100px; padding-right: 10px;}
#cssTable tr td:nth-child(5){width: 50px;}

http://jsfiddle.net/mLpH9/2/

If your table gets bigger you can of course set the padding-right for all columns and set it for last-child to 0.

Upvotes: 3

ArchFever
ArchFever

Reputation: 392

Just add in your css 

#cssTable td
{
 padding:0 20px;
}

It will add padding to left and right. http://jsfiddle.net/Pv3Zk/484/

Upvotes: 0

Advocation
Advocation

Reputation: 578

Take a look at this.

You can use the css selector :nth-child()to target a specific column.

#cssTable td {
    padding: 5px 15px;
}

#cssTable td:nth-child(2) {
    width: 100px;
}

Upvotes: 3

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

You could use <colgroup> and <col>. You won't need to give every <td> a separate class this way.

<table border="0" id="cssTable">
    <colgroup>
        <col width="100px" />
        <col width="100px" />
        <col width="50px" />
        <col width="75px" />
        <col width="50px" />
    </colgroup>
    <tr>
        ...

Also check the updated Fiddle.

Upvotes: 0

Nambi
Nambi

Reputation: 12042

try this

set css to the table td tag.

table td {
    width: 60px;
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
}

or create class and set the name .

<td class="special_column">...</td>

Upvotes: 0

Related Questions