I created a grid table like the one below in reStructuredText and I'm using Sphinx and the ReadtheDocs theme to generate documentation. However when I render in HTML, the cells in Columns A and B vertically align in the center (because of the row height in column C) instead of remaining at the top of the cell.
+------------------+---------------+-------------------+
| Column A |Column B |Column C |
+------------------+---------------+-------------------+
|Identify the whole|Read the |Prices are a good |
|and fractional |decimal number |representation of |
|parts of a decimal|as two |decimals. |
|number. |separate whole | |
| |numbers. |[CONCEPT] What |
| | |does the dot mean |
| | |in this number? |
| | |(Show a price in |
| | |dollars and cents.)|
| | | |
| | |[Explanation: Since|
| | |a dollar is made up|
| | |of 100 cents, we |
| | |use a dot to |
| | |separate the two. |
| | |In this case, the |
| | |price is *x* |
| | |dollars and *y* |
| | |cents.] |
+------------------+---------------+-------------------+
This is how it looks in HTML:
This appears to be a bug specifically with ReadtheDocs as with other themes I can see the cell text in Columns A and B vertically aligned at the top as it should be.
I tried overriding the CSS by setting a vertical-align: top property in the CSS file I have under the _static folder. This is what I did:
.wy-table-responsive table td {
vertical-align: top;
}
But this didn't work. (And I have used the same CSS file for overriding other things with success so it is set up correctly.)
What am I doing wrong? Any idea how to get all my table cell content aligned at the top of the cell?