6

Is it possible to change the layour of a table using markdown under docfx?

For example, the following table is not very good readable, because of the spacing between the columns. Event there is no alternating row color:

| Property | Description |
|---|---|
| URL | `/api/<version>/auth/login` |
| Method | `post` |
| Success | Http status *200* |
| Failure | Http-status *400/500* |
| Content/Media-Type | `application/json` |
| Authorization | *no* |
| Roles | - |

That is how it is looking in doxfx:

MD-Table

Some kind of expected behaviour:

Expected

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
BendEg
  • 20,098
  • 17
  • 57
  • 131

1 Answers1

7

We will extend the default template:

Create a file: (Project Folder)\template\styles\main.js

The default DocFX template uses Bootstrap and JQuery, so in main.js put the following:

$(document).ready(function ()
{
   $("table").addClass("table table-bordered table-striped table-condensed");
})

This makes the markdown tables identical to those in Api documentation. To play with Bootstrap table styles, see http://www.w3schools.com/bootstrap/bootstrap_tables.asp

Now, we add this template to docfx.json:
In docfx.json, Replace "template": ["default"] with "template": ["default", "template"].

Sander
  • 25,685
  • 3
  • 53
  • 85
Mathew Sachin
  • 1,429
  • 1
  • 15
  • 20
  • 3
    This issue has been fixed with [#957](https://github.com/dotnet/docfx/pull/957) and does not happen with the current version of docfx (2.15.3.0). So the above workaround should not be necessary anymore. – bitbonk Mar 29 '17 at 20:49