Given the following HTML document containing a table:
<!DOCTYPE html>
<html dir="ltr">
<head>
<style>
body {
/* text-align: left; */
}
th, td {
border: 1px solid black;
width: 200px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Row 1 Column 1</th>
<th>Row 1 Column 2</th>
</tr>
<tr>
<td>Row 2 Column 1</td>
<td>Row 2 Column 2</td>
</tr>
</table>
</body>
</html>
This will show a 2x2 table, where the contents of the first row are centered, and the contents of the second row are left-aligned. This is due to the user-agent stylesheets, which on chrome sets text-align: -internal-center; on th elements, and does not set an alignment for td-elements, so that these use the default left-alignment.
If we uncomment the text-align: left; styling for the body element in the code snippet above, the th-elements will inherit this style from the body-element, and all the contents of the table will be left-aligned.
However, if we change it to text-align: start;, the first row will be centered again. How can that be? According to MDN, the values start and left should behave identical if the direction is ltr (left-to-right), which is the case since we put dir="ltr" on the html element.
Using text-align: end or right both shifts the contents to the right, while using left shifts the contents to the left. The only value which does not work is start.
I see this behaviour on both Firefox and Chrome, on MacOS.
Note that I am not asking for workarounds, but want to understand why this happens!
