Search code examples
csshtml-tablemarkdowncenteringdocusaurus

How to center all markdown tables in docusaurus?

I specify tables in docusaurus documents with markdown (this way my markdown editor inserts tables), as shown below:

text text text text text text text text text text text text text text text text text text 

| a   | b   | c   |
| --- | --- | --- |
| 1   | 10  | 30  |
|     |     |     |
| 2   | 20  | 40  |

text text text text text text text text text text text text text text text text text text

Currently markdown tables appear left-justified within the page. I would like to have all tables in all documents to be centered by default. I believe I have to modify Site/src/css/custom.css for that. I've tried

table {
    margin:0 auto;
}

and

table {
  display: block;
  float: none;
  margin-left: auto;
  margin-right: auto;
  border: 3px solid green;  /* just for demonstration */
}

The latter did work for images, but for tables it only adds a green border around my tables, but does not center them within the page.

see visualization

How could I center all tables as well?

Solution

  • In your custom.css, add the following:

    table {
    display: table;
    width: initial;
    margin: 0 auto;
}