How to make TDs inside a table of equal width

Question

I have a following layout. I want all the TDs of equal width and extra space around them.

If I use float:left; over TDs all get equally sized but then vertical-align: middle; stops working.

Is there a way I can do it without using float:left;?

<table class="student_table">
    <tr>
        <th class="class_box" colspan="4">Batch 2012</th>
    </tr>
    <tr class="batch_header">
        <td> Hi </td> <!--Have to center this-->
        <td> Hi </td>
        <td> Hi </td>
        <td> Hi </td>
    </tr>

.batch_header{
    width: 245px;
    display: inline-block;
}
.batch_header td{
    width:30px;
    height:30px;
    background-color:#EEE;
    margin:0px;
    padding:2.5px;
    border:0px;
    <!-- float:left; --> <!-- < equally sized with this but not vertically aligned is not working-->
    font-weight: bold;
    font-size: smaller;
    text-align:center;
    vertical-align: middle; <!-- < This is not working-->
}

It makes no sense to float a `` tag. Why don't you just use `width: nnpx`? — Jonathan Wood, Mar 05 '15 at 07:31
if you have a static number of columns just use `width:25 %;` — Max Novich, Mar 05 '15 at 07:35
Same question has been posted twice. [http://stackoverflow.com/questions/28871696/unable-to-vertically-align-text-inside-a-td] — Ganesh Salunkhe, Mar 05 '15 at 07:36

Kamikaza · Accepted Answer · 2015-03-05T07:53:49.117

No CSS needed because you are using tables and tables own sometimes

Here is the table for you

<table>
<tr>
    <th colspan="4" align="center" valign="middle" bgcolor="#CCCCCC">Batch 2012</th>
</tr>
<tr>
    <td align="center" valign="middle" bgcolor="#666666" style="width:100px; margin-left:10px;margin-right:10px;"> Hi </td> 
    <td align="center" valign="middle" bgcolor="#666666" style="width:100px; margin-left:10px;margin-right:10px;"> Hi </td>
    <td align="center" valign="middle" bgcolor="#666666" style="width:100px; margin-left:10px;margin-right:10px;"> Hi </td>
    <td align="center" valign="middle" bgcolor="#666666" style="width:100px; margin-left:10px;margin-right:10px;"> Hi </td>
</tr>
</table>

Here is a updated demo for you

https://jsfiddle.net/1zhdLb55/3/

EDIT If you now dont want fixed width just delete the width:100px; and it will still give you space on left and right. If you dont want borders just add border:0 cellspacing:0 etc

I am sure it did worked so please mark the question as correct so we show the CSS DIVS guys with complex CSS code that tables still rule in this world and will keep ruling forever — Kamikaza, Mar 05 '15 at 07:41
Thankyou. But my this questions is how to make TDs of equal width without using float not about aligning text inside it. — Maven, Mar 05 '15 at 07:46

score 0 · Answer 2 · answered Mar 05 '15 at 07:35

Add line-height: 1.9; to .batch_header td{}

.batch_header{
    width: 140px;
    float: left;
}
.batch_header td{
    width:30px;
    height:25px;
    background-color:#EEE;
    margin:0px auto;
    float:left;
    padding:2.5px;
    border:0px;
    font-weight: bold;
    font-size: smaller;
    text-align:center;    
    vertical-align: middle;
    line-height: 1.9;
}

<table class="student_table" border = 1>
    <tr>
        <th class="class_box" colspan="4">Batch 2012</th>
    </tr>
    <tr class="batch_header">
        <td> Hi </td> <!--Have to center this-->
        <td> Hi </td>
        <td> Hi </td>
        <td> Hi </td>
    </tr>
</table>

See Demo

score 0 · Answer 3 · answered Mar 05 '15 at 07:57

using only HTML

<table width="100%">
<tr>
    <th colspan="4" align="center" valign="middle">Batch 2012</th>
</tr>
<tr>
    <td width="25%" align="center" valign="middle"> Hi </td> 
    <td width="25%" align="center" valign="middle"> Hi </td>
    <td width="25%" align="center" valign="middle"> Hi </td>
    <td width="25%" align="center" valign="middle"> Hi </td>
</tr>
</table>

score 0 · Answer 4 · answered Mar 05 '15 at 08:03

Try adding the style: table-layout:fixed to your table css style (.student_table) and make sure the table has a set width. Remove the float:left and the td width (it will calculate equal width to all cells) and remove the display: inline-block on the <tr> tag.

How to make TDs inside a table of equal width

4 Answers4