It seems align
is not working for the th element. Here is my HTML:
<div style="width: 100%; height: 175px; overflow: auto;">_x000D_
<table class="grid" id="table">_x000D_
<thead>_x000D_
<tr>_x000D_
<th class="not_mapped_style" style="display: none;" align="center">id</th>_x000D_
<th class="not_mapped_style" align="center">DisplayName</th>_x000D_
<th align="center">PrimaryEmail</th>_x000D_
<th align="center">Age</th>_x000D_
<th align="center">Phone</th>_x000D_
</tr>_x000D_
</thead>_x000D_
<caption>Contacts</caption>_x000D_
<tbody>_x000D_
<tr>_x000D_
<td style="display: none;" property_value="0" property_name="id" align="center">0</td>_x000D_
<td property_value="rpcuser" property_name="DisplayName" align="center">rpcuser</td>_x000D_
<td property_value="[email protected]" property_name="PrimaryEmail" align="center">[email protected]</td>_x000D_
<td property_value="69" property_name="Age" align="center">69</td>_x000D_
<td property_value="+722616807" property_name="Hand_Phone" align="center">+18007</td>_x000D_
</tr>_x000D_
</tbody>_x000D_
</table>_x000D_
</div>
_x000D_
Text aligning is working just fine for the td
elements but fails for the th
. Why?
This question is related to
html
html-table
If you want to center the th of all tables:
table th{ text-align: center; }
If you only want to center the th of a table with a determined id:
table#tableId th{ text-align: center; }
In HTML5, the easiest, and fastest, way to center your <th>THcontent</th>
is to add a colspan
like this:
<th colspan="3">Thcontent</th>
This will work if your table is three columns. So if you have a four-column table, add a colspan
of 4, etc.
You can manage the location furthermore in the CSS file while you have put your colspan
in HTML like I said.
th {
text-align: center; /* Or right or left */
}
Try to use text-align in style attribute to align center.
<th class="not_mapped_style" style="text-align:center">DisplayName</th>
HTML:
<tr>
<th>Language</th>
<th>Skill Level</th>
<th> </th>
</tr>
CSS:
tr, th {
padding: 10px;
text-align: center;
}
For me none of the above worked. I think it is because I have two levels of header and a fixed width on level 1. So I couldn't align the text inside the corresponding columns on level 2.
+---------------------------+
| lvl 1 |
+---------------------------+
| lvl 2 col a | lvl 2 col b |
+---------------------------+
I had to use the combination of width:auto and text:align-center :
<th style="width:auto;text-align:center">lvl 2 col a</th>
<th style="width:auto;text-align:center">lvl 2 col b</th>
Try using style for th
th {text-align:center}
Your code works, but it uses deprecated methods to do so. You should use the CSS text-align
property to do this rather than the align property. Even so, it must be your browser or something else affecting it. Try this demo in Chrome (I had to disable normalize.css to get it to render).
Source: Stackoverflow.com