fix the table td width

Question

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.

score 3 · Accepted Answer · answered Dec 13 '13 at 09:42

3

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

answered Dec 13 '13 at 09:42

Advocation

578
3
14

am just using this when i increasing the width to 500px the text is not come to up. it stays there only. what is the use of width ?http://jsfiddle.net/Pv3Zk/487/ – SivaRajini Dec 13 '13 at 10:13
It depends on the overall width of the table, if you want it to be _exactly_ 500px, set the min-width as well - http://jsfiddle.net/Pv3Zk/488/ – Advocation Dec 13 '13 at 12:38

Grey · Answer 2 · 2013-12-13T09:53:28.780

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.

score 0 · Answer 3 · answered Dec 13 '13 at 09:37

0

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>

answered Dec 13 '13 at 09:37

Nambi

11,944
3
37
49

i want to text to be wrap for longer length not to be hidden state. – SivaRajini Dec 13 '13 at 10:14

Kryssthanel · Answer 4 · 2013-12-13T10:39:10.160

0

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.

edited Dec 13 '13 at 10:39

answered Dec 13 '13 at 09:39

Kryssthanel

33
4

this will not simlar too like above design. i need design like which i was pasted the layout in my question – SivaRajini Dec 13 '13 at 09:43

score 0 · Answer 5 · answered Dec 13 '13 at 09:41

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.

score 0 · Answer 6 · edited May 23 '17 at 10:32

0

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

edited May 23 '17 at 10:32

Community

1
1

answered Dec 13 '13 at 09:43

smnbbrv

23,502
9
78
109

score 0 · Answer 7 · answered Dec 13 '13 at 09:44

0

Just add in your css

#cssTable td
{
 padding:0 20px;
}

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

answered Dec 13 '13 at 09:44

ArchFever

382
1
3
12

fix the table td width

7 Answers7