CODEWITHSUNDEEP
htmlcsshtml-table
Village
Village

Reputation: 24373

How to make a table with equal column widths in CSS?

I have a document containing a table like this:

<table>
    <tr>
        <td>
            Word
        </td>
        <td>
            Definition
        </td>
    </tr>
    <tr>
        <td>
            Word
        </td>
        <td>
            Definition
        </td>
    </tr>
    <tr>
        <td>
            Word
        </td>
        <td>
            Definition
        </td>
    </tr>
</table>

Using CSS, I need to set all of the cells to 50% width, with text in the left "column" being right-aligned and text in the left column being left-aligned. I've tried many different options, e.g. width: 50%; text-align: left, but the results are always unusual. The results should look like this:

 _________________________
|       word | definition |
|____________|____________|
|       word | definition |
|____________|____________|

How can I set equal-width cells in a two-column table in CSS with everything aligned to the middle?

Upvotes: 90

Views: 159221

Answers (3)

TechGuy
TechGuy

Reputation: 4560

You can set table-layout: fixed; on your table. Using this you can override the browser's automatic column resizing. Then column widths will be set based on the widths that you assign to the cells in the first row.

Upvotes: 176

Mazhar MIK
Mazhar MIK

Reputation: 1172

I had the same issue in one of my projects, however it got fixed when I combined both the solutions above (Thanks to them). Here is my code snippet :

.Table{
    width: 100%;
    table-layout: fixed;
}

Upvotes: 49

Itay Gal
Itay Gal

Reputation: 10834

The table should have width: 100% property. See example here

table{
    width: 100%;
    border-collapse:collapse;
}

td{
    width: 50%;
    text-align: left;
    border: 1px solid black;
}

About the text alignment you said two different things:

Using CSS, I need to set all of the cells to 50% width, with text in the left "column" being right-aligned and text in the left column being left-aligned.

and then

How can I set equal-width cells in a two-column table in CSS with everything aligned to the middle?

If the first is what you want and you cannot change your HTML you can use td:first-child to style your first column differently.

If the second is your best option, just change the text-align value to center.

Upvotes: 31

Related Questions