Welcome to Software Development on Codidact!
Will you help us build our independent community of developers helping developers? We're small and trying to grow. We welcome questions about all aspects of software development, from design to code to QA and more. Got questions? Got answers? Got code you'd like someone to review? Please join us.
Comments on How to set text-align for whole column of HTML table?
Parent
How to set text-align for whole column of HTML table?
To start off, here is the complete HTML of a simple example table:
<html lang="en-US">
<head>
<title>Title</title>
<style>
table {
width: 20em;
table-layout: fixed;
border-collapse: collapse;
text-align: center;
}
td {
border: black solid 0.1em;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>A
<th>B
<th>C
</thead>
<tbody>
<tr>
<td>aardvark
<td>bale
<td>crab
<tr>
<td>apple
<td>blade
<td>crib
</tbody>
</table>
</body></html>
This results in the following table, as expected:
W3SCHOOLS says the following about the <col> tag:
The tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.
That makes sense. As an example, I inserted the following HTML after TABLE and before THEAD:
<colgroup>
<col>
<col style="background-color:red">
<col>
</colgroup>
That caused the background of the whole second column to be red, as expected:
However, when I try to set the text-align attribute for the same column as a whole
<col style="text-align:left;background-color:red">
it doesn't work. I get the same display as above. The second column is still red, so the COL tag isn't getting ignored. To make sure there wasn't a typo, I copied and pasted the text alignment into the TD tag of one of the table entries:
<td style="text-align:left">bale
The text for that one cell did get left-aligned:
I tried various things, but couldn't get a different default alignment for a whole column without having to set it individually for each cell in that column. That seems to be exactly what COLGROUP and COL are for. It works for background color, but not text alignment. What is going on? How does one set default text alignment in one place for a whole column?
In case it matters, these tests were done with Edge on Windows 10.
Post
You cannot set text-align on a column element
(Well, you can, but it won't have any effect)
There are only a couple of properties that have an effect, namely border, background, width, and visibility.
If you need to style a column outside of those attributes, MDN notes some possible workarounds.
- To achieve the same effect as the
left,center,rightorjustifyvalues:
- Do not try to set the text-align property on a selector giving a
<col>element. Because<td>elements are not descendant of the<col>element, they won't inherit it.- If the table doesn't use a
colspanattribute, use thetd:nth-child(an+b)CSS selector. Setato zero andbto the position of the column in the table, e.g.td:nth-child(2) { text-align: right; }to right-align the second column.- If the table does use a
colspanattribute, the effect can be achieved by combining adequate CSS attribute selectors like[colspan=n], though this is not trivial.
Eg.
table {
width: 20em;
table-layout: fixed;
border-collapse: collapse;
text-align: center;
}
td {
border: black solid 0.1em;
}
td:nth-child(2) {
text-align: left;
}
If you have greater control over the HTML generation, however, it is probably better to just add a class to the cells in question and style those.
0 comment threads