How to make a table with equal column widths in CSS?
You can set table-layout: fixed;
on your table. Using this you can override the browser's automatic column resizing. Then your browser sets the column width of first column to all.
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
.
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;
}