0

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:

enter image description here

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>&#160;</td>
</tr>
<tr class="row-even"><td>&#160;</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>&#160;</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>&#160;</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>&#160;</td>
</tr>
<tr class="row-even"><td>&#160;</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>&#160;</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>&#160;</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>&#160;</td>
</tr>
<tr class="row-even"><td>&#160;</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>&#160;</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>&#160;</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.

Dez M
  • 57
  • 5

1 Answers1

0

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>&#160;</td>
</tr>
<tr class="row-even"><td>&#160;</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>&#160;</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>&#160;</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>&#160;</td>
</tr>
<tr class="row-even"><td>&#160;</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>&#160;</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>&#160;</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>&#160;</td>
</tr>
<tr class="row-even"><td>&#160;</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>&#160;</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>&#160;</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>
Steve Piercy
  • 13,693
  • 1
  • 44
  • 57
  • My conf.py file looks exactly like that, with the addition of `def setup(app): app.add_stylesheet('css/custom.css')`. The full path the css file is doc/_static/css/custom.css – Dez M Jun 28 '20 at 20:08
  • 1
    Does the path in the HTML match the path in your `conf.py`? Does the CSS load in the browser? – Steve Piercy Jun 28 '20 at 20:14
  • The HTML has `` in it, this is listed twice for some reason. Other parts of the CSS do load, such as the shading for the tables and text color for the header row. – Dez M Jun 28 '20 at 21:13
  • Use your web browser's Inspector feature to view styles that are applied to the inspected element. It sounds like your styles get overridden by another style in another style sheet. You can use `!important` after style attributes to prevent later overrides. Otherwise, please edit your question to include the complete HTML and fully qualified URLs to static assets so we can provide further assistance. – Steve Piercy Jun 29 '20 at 05:20