sphinx-needs datatable is rendered into a header column

[JochenKienzle]

Problem

The table of a sphinx-needs datatable is rendered into one column of the header which leads to a high horizontal width. In other themes the header is rendered on top of the table.

Reproducible Project

The following rst file is used to render the error image.

==========
Test Specs
==========

Summary
-------

.. needtable::
   :types: test-spec
   :style: datatable
   :columns: id, title, status, tags

.. test-spec:: Test 1
   :id: TEST_SPEC_1
   :status: failed
   :tags: tag1

   Test 1

.. test-spec:: Test 2
   :id: TEST_SPEC_2
   :status: failed
   :tags: tag1

   Test 2

.. test-spec:: Test 3
   :id: TEST_SPEC_3
   :status: failed
   :tags: tag1

   Test 3

.. test-spec:: Test 4
   :id: TEST_SPEC_4
   :status: failed
   :tags: tag1

   Test 4

Error Logs/Results

The picture below shows that the table is rendered as column of the header.

Expected Results

Header columns of data table is rendered as a separate row and don't interfere with the table below. (Alabaster theme with the same code)

Environment Info

• Python Version: 3.10
• Sphinx Version: 4.3.1
• RTD Theme Version: 1.0.0

[danwos]

There is already a PR to fix this problem a little bit #1218

Sphinx-Needs already has the needed, rtd specific code.
All we need is this PR, so that the rtd specific table handling can be deactivated for tables under the control of extensions.

[JochenKienzle]

@danwos

Many thanks for your feedback.
Is there any short-term solution available like a patch or a theme-option?

I have tried to change the line
$("table.docutils:not(.field-list,.footnote,.citation,.rtd-exclude-wy-table)")
in my theme.js but it wasn't fixing the issue.

[danwos]

I haven't tested it a while, as the sphinx-needs related fix is already part of the releases since ~6 months.
So it should work, if you fix the related line.
Please make sure that it's a clean sphinx build and that you open the page in incongito/private mode of your browser, so that no caches are used.

Your method is also the only workaround I know.

To continue the Sphinx-Needs related discussion, please open a new issue in our Sphinx-Needs project, so that this discussion covers the rtd-related part only.

[JochenKienzle]

@danwos
What works for me is to unset the overflow property for wy-table-responsive for datatables as a customization.

custom.css:

.dataTables_wrapper.no-footer .wy-table-responsive {
    overflow: unset;
}

[abhishek21kt]

this is fixing up the issue but now the table horizontal scroll is gone