3

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:

enter image description here

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?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Audrey Tavares
  • 31
  • 3
  • 1
    Can you please share your generated HTML? Assuming you're generating HTML Tables and not using a CSS-based grid layout, the solution to your problem is probably found here: https://stackoverflow.com/questions/8986260/how-to-align-center-the-text-in-html-table-row – TylerH Oct 14 '19 at 19:10
  • Thanks for updating, but that doesn't appear to be the markup but rather the visual outcome. We need to see the HTML *code*, to be specific (sorry for any confusion earlier). Though seeing the visual representation of how it looks is good as a contrast vs how you want it to look. – TylerH Oct 14 '19 at 19:36
  • @TylerH I added an image link just below the grid table that shows the HTML output. I already tried the solutions in that post with the `vertical-align` attribute to no avail. `.wy-table-responsive table td { white-space: normal !important; vertical-align: top; } .wy-table-responsive { overflow: visible !important; } }` – Audrey Tavares Oct 14 '19 at 19:38
  • Ugh sorry first-time contributor issues. Ignore the above - I thought I already mentioned the HTML code in my original post above? (when I said what I'm doing with my CSS file) – Audrey Tavares Oct 14 '19 at 19:45
  • You've said you are generating a grid of table cells (which is a little confusing since there's a CSS 'grid' layout that is a modern way to layout things people used to always use HTML tables for--though it's also not something everyone's aware of), but you haven't show the actual markup. For reference, I'm looking for something that looks like `...
    ...
    `; in other words, the code that the browser sees and uses to generate the page, which your CSS then applies its styles to.     – TylerH Oct 14 '19 at 19:49
  • @TylerH I'm not writing in HTML though, I'm using the reStructuredText (.rst) markup language as I mentioned. What you see there (with the + and - signs) _is_ the markup. That's what I input in my text file - and Sphinx take the rst markup and outputs the table in HTML. I wouldn't use HTML tags in reStructuredText. Hope this clarifies things a bit... – Audrey Tavares Oct 14 '19 at 20:46
  • Ah, that clarifies things, thanks! I thought it was just an ASCII drawing of your desired outcome. I'm (clearly) not familiar with reStructuredText, so it looks like I won't be able to help much beyond this point, unfortunately. I will say, however, that no matter what language you're writing in, it has to be converted to HTML before a web browser can understand it and display it. If there's any way you can see *that* step in Sphinx somehow, it may help more people in assisting you, as I'm thinking many more folks know HTML than reStructuredText here on SO. Either way, good luck! – TylerH Oct 14 '19 at 21:08
  • I got it working with: `.wy-table-responsive table td { vertical-align: top !important; }` – Hari Apr 30 '21 at 00:32

0 Answers0