Removing borders from a table in sphinx documentation - html

Question

I have a table in in an rst file I am hosting on readthedocs that I would like to remove the borders from. Trouble is, nothing I try in the CSS file seems to work. I've looked at several other solutions SO and haven't yet had success.
Here is a (shortened) example of the table in rst (note i've split the columns in the last three rows to create a nesting effect, unsure if this could be causing any complications).
+------------------+-----------------------------+------------+-------------------------------------+
| Parameter | Description | Type | Notes |
+==================+=============================+============+=====================================+
| patrolID | ID of the submitted patrol. | int | Assigned automatically by the patrol|
| | | | app. |
+------------------+-----------------------------+------------+-------------------------------------+
| date | Date the patrol | string | Format is YYYY-MM-DD. |
| | occurred. | | |
+------------------+-----------------------------+------------+-------------------------------------+
| userID | The alias of the individual | string | Matches the user’s Vanguard email |
| | who submitted the patrol. | | alias (For example, MScott). |
+------------------+-----------------------------+------------+-------------------------------------+
| patrolStart | Time the patrol started. | int | Format is 24-hour (Ex: 0700 |
| | | | or 1400). |
+------------------+-----------------------------+------------+-------------------------------------+
| patrolEnd | Time the patrol ended. | int | Format is 24-hour (Ex: 0700 |
| | | | or 1400). |
+------------------+-----------------------------+------------+-------------------------------------+
|perimeterFence | Patrol area. | object | |
+----+-------------+-----------------------------+------------+-------------------------------------+
| |time | Time the area was patrolled.| int | Format is 24-hour (Ex: 0700 |
| | | | | or 1400). |
+----+-------------+-----------------------------+------------+-------------------------------------+
| |incident | Indicates whether anything | boolean | Default value is false. |
| | | unusual was encountered | | |
| | | during the patrol. | | |
+----+-------------+-----------------------------+------------+-------------------------------------+
| |details | Summary of area patrol. | string | When incident is false, the default |
| | | | | value will be "Nothing to report." |
+----+-------------+-----------------------------+------------+-------------------------------------+
Screenshot of how the table looks on readthedocs:
HTML code for the table (I'm unable to change class name or elements with RTD so WYSWG)
<div class="section" id="submit-a-patrol">
<h2><a class="toc-backref" href="#id1">Submit a patrol</a><a class="headerlink" href="#submit-a-patrol" title="Permalink to this headline">¶</a></h2>
<p>URL: POST <a class="reference external" href="https://api.vanguard.com/patrol">https://api.vanguard.com/patrol</a>/{PatrolID}</p>
<p>Adds a patrol report. A successful response requires all listed parameters be included with appropriate values.</p>
<table border="1" class="docutils">
<colgroup>
<col width="4%" />
<col width="14%" />
<col width="31%" />
<col width="13%" />
<col width="39%" />
</colgroup>
<thead valign="bottom">
<tr class="row-odd"><th class="head" colspan="2">Parameter</th>
<th class="head">Description</th>
<th class="head">Type</th>
<th class="head">Notes</th>
</tr>
</thead>
<tbody valign="top">
<tr class="row-even"><td colspan="2">patrolID</td>
<td>ID of the submitted patrol.</td>
<td>int</td>
<td>Assigned automatically by the patrol
app.</td>
</tr>
<tr class="row-odd"><td colspan="2">date</td>
<td>Date the patrol
occurred.</td>
<td>string</td>
<td>Format is YYYY-MM-DD.</td>
</tr>
<tr class="row-even"><td colspan="2">userID</td>
<td>The alias of the individual
who submitted the patrol.</td>
<td>string</td>
<td>Matches the user’s Vanguard email
alias (For example, MScott).</td>
</tr>
<tr class="row-odd"><td colspan="2">patrolStart</td>
<td>Time the patrol started.</td>
<td>int</td>
<td>Format is 24-hour (Ex: 0700
or 1400).</td>
</tr>
<tr class="row-even"><td colspan="2">patrolEnd</td>
<td>Time the patrol ended.</td>
<td>int</td>
<td>Format is 24-hour (Ex: 0700
or 1400).</td>
</tr>
<tr class="row-odd"><td colspan="2">perimeterFence</td>
<td>Patrol area.</td>
<td>object</td>
<td> </td>
</tr>
<tr class="row-even"><td> </td>
<td>time</td>
<td>Time the area was patrolled.</td>
<td>int</td>
<td>Format is 24-hour (Ex: 0700
or 1400).</td>
</tr>
<tr class="row-odd"><td> </td>
<td>incident</td>
<td>Indicates whether anything
unusual was encountered
during the patrol.</td>
<td>boolean</td>
<td>Default value is false.</td>
</tr>
<tr class="row-even"><td> </td>
<td>details</td>
<td>Summary of area patrol.</td>
<td>string</td>
<td>When incident is false, the default
value will be “Nothing to report.”</td>
</tr>
<tr class="row-odd"><td colspan="2">facilityExterior</td>
<td>Patrol area.</td>
<td>object</td>
<td> </td>
</tr>
<tr class="row-even"><td> </td>
<td>time</td>
<td>Time the area was patrolled.</td>
<td>int</td>
<td>Format is 24-hour (Ex: 0700
or 1400).</td>
</tr>
<tr class="row-odd"><td> </td>
<td>incident</td>
<td>Indicates whether anything
unusual was encountered
during the patrol.</td>
<td>boolean</td>
<td>Default value is false.</td>
</tr>
<tr class="row-even"><td> </td>
<td>details</td>
<td>Summary of area patrol.</td>
<td>string</td>
<td>When incident is false, the default
value will be “Nothing to report.”</td>
</tr>
<tr class="row-odd"><td colspan="2">facilityInterior</td>
<td>Patrol area.</td>
<td>object</td>
<td> </td>
</tr>
<tr class="row-even"><td> </td>
<td>time</td>
<td>Time the area was patrolled.</td>
<td>int</td>
<td>Format is 24-hour (Ex: 0700
or 1400).</td>
</tr>
<tr class="row-odd"><td> </td>
<td>incident</td>
<td>Indicates whether anything
unusual was encountered
during the patrol.</td>
<td>boolean</td>
<td>Default value is false.</td>
</tr>
<tr class="row-even"><td> </td>
<td>details</td>
<td>Summary of area patrol.</td>
<td>string</td>
<td>When incident is false, the default
value will be “Nothing to report.”</td>
</tr>
</tbody>
</table>
<p><strong>Responses</strong></p>
<table border="1" class="docutils">
<colgroup>
<col width="21%" />
<col width="79%" />
</colgroup>
<thead valign="bottom">
<tr class="row-odd"><th class="head">Code</th>
<th class="head">Description</th>
</tr>
</thead>
<tbody valign="top">
<tr class="row-even"><td>200</td>
<td>Successful operation.</td>
</tr>
</tbody>
</table>
Finally the CSS I currently have.
div.section table, td
{
white-space: normal !important;
}
div.section tbody, tr, td
{
border: none;
}
div.section thead, th
{
color: #FFFFFF;
background-color: #4472C4;
}
div.section tr.row-odd
{
background-color: #D9E2F3;
}
I've tried targeting table, tbody, .docutils, and other permutation and haven't been able to do anything to effect the border, though all the other CSS entries do what they're supposed to. Any ideas would be welcome.

Answer 1

I cannot replicate the issue in this JSFiddle.
I suspect you have not added your custom CSS file to conf.py.
conf.py
# These folders are copied to the documentation's HTML output
html_static_path = ['_static']
# These paths are either relative to html_static_path
# or fully qualified paths (eg. https://...)
html_css_files = [
'css/custom.css',
]
div.section table, td
{
white-space: normal !important;
}
div.section tbody, tr, td
{
// border: none;
}
div.section thead, th
{
color: #FFFFFF;
background-color: #4472C4;
}
div.section tr.row-odd
{
background-color: #D9E2F3;
}
<div class="section" id="submit-a-patrol">
<h2><a class="toc-backref" href="#id1">Submit a patrol</a><a class="headerlink" href="#submit-a-patrol" title="Permalink to this headline">¶</a></h2>
<p>URL: POST <a class="reference external" href="https://api.vanguard.com/patrol">https://api.vanguard.com/patrol</a>/{PatrolID}</p>
<p>Adds a patrol report. A successful response requires all listed parameters be included with appropriate values.</p>
<table border="1" class="docutils">
<colgroup>
<col width="4%" />
<col width="14%" />
<col width="31%" />
<col width="13%" />
<col width="39%" />
</colgroup>
<thead valign="bottom">
<tr class="row-odd"><th class="head" colspan="2">Parameter</th>
<th class="head">Description</th>
<th class="head">Type</th>
<th class="head">Notes</th>
</tr>
</thead>
<tbody valign="top">
<tr class="row-even"><td colspan="2">patrolID</td>
<td>ID of the submitted patrol.</td>
<td>int</td>
<td>Assigned automatically by the patrol
app.</td>
</tr>
<tr class="row-odd"><td colspan="2">date</td>
<td>Date the patrol
occurred.</td>
<td>string</td>
<td>Format is YYYY-MM-DD.</td>
</tr>
<tr class="row-even"><td colspan="2">userID</td>
<td>The alias of the individual
who submitted the patrol.</td>
<td>string</td>
<td>Matches the user’s Vanguard email
alias (For example, MScott).</td>
</tr>
<tr class="row-odd"><td colspan="2">patrolStart</td>
<td>Time the patrol started.</td>
<td>int</td>
<td>Format is 24-hour (Ex: 0700
or 1400).</td>
</tr>
<tr class="row-even"><td colspan="2">patrolEnd</td>
<td>Time the patrol ended.</td>
<td>int</td>
<td>Format is 24-hour (Ex: 0700
or 1400).</td>
</tr>
<tr class="row-odd"><td colspan="2">perimeterFence</td>
<td>Patrol area.</td>
<td>object</td>
<td> </td>
</tr>
<tr class="row-even"><td> </td>
<td>time</td>
<td>Time the area was patrolled.</td>
<td>int</td>
<td>Format is 24-hour (Ex: 0700
or 1400).</td>
</tr>
<tr class="row-odd"><td> </td>
<td>incident</td>
<td>Indicates whether anything
unusual was encountered
during the patrol.</td>
<td>boolean</td>
<td>Default value is false.</td>
</tr>
<tr class="row-even"><td> </td>
<td>details</td>
<td>Summary of area patrol.</td>
<td>string</td>
<td>When incident is false, the default
value will be “Nothing to report.”</td>
</tr>
<tr class="row-odd"><td colspan="2">facilityExterior</td>
<td>Patrol area.</td>
<td>object</td>
<td> </td>
</tr>
<tr class="row-even"><td> </td>
<td>time</td>
<td>Time the area was patrolled.</td>
<td>int</td>
<td>Format is 24-hour (Ex: 0700
or 1400).</td>
</tr>
<tr class="row-odd"><td> </td>
<td>incident</td>
<td>Indicates whether anything
unusual was encountered
during the patrol.</td>
<td>boolean</td>
<td>Default value is false.</td>
</tr>
<tr class="row-even"><td> </td>
<td>details</td>
<td>Summary of area patrol.</td>
<td>string</td>
<td>When incident is false, the default
value will be “Nothing to report.”</td>
</tr>
<tr class="row-odd"><td colspan="2">facilityInterior</td>
<td>Patrol area.</td>
<td>object</td>
<td> </td>
</tr>
<tr class="row-even"><td> </td>
<td>time</td>
<td>Time the area was patrolled.</td>
<td>int</td>
<td>Format is 24-hour (Ex: 0700
or 1400).</td>
</tr>
<tr class="row-odd"><td> </td>
<td>incident</td>
<td>Indicates whether anything
unusual was encountered
during the patrol.</td>
<td>boolean</td>
<td>Default value is false.</td>
</tr>
<tr class="row-even"><td> </td>
<td>details</td>
<td>Summary of area patrol.</td>
<td>string</td>
<td>When incident is false, the default
value will be “Nothing to report.”</td>
</tr>
</tbody>
</table>
<p><strong>Responses</strong></p>
<table border="1" class="docutils">
<colgroup>
<col width="21%" />
<col width="79%" />
</colgroup>
<thead valign="bottom">
<tr class="row-odd"><th class="head">Code</th>
<th class="head">Description</th>
</tr>
</thead>
<tbody valign="top">
<tr class="row-even"><td>200</td>
<td>Successful operation.</td>
</tr>
</tbody>
</table>