-
|
I have an issue with the theme table settings, that prevent me to control the table column width. The example is from one of the reference sites generated automatically from Doxygen output, so I have no control on the input, occasionally some content is very large. A simple functional example, extracted as a separate html page is: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
table.testTreeTable {
table-layout: fixed;
width: 100%;
}
td.testTreeItemLeft {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 40%;
}
td.testTreeItemRight {
width: 100%;
}
</style>
</head>
<body>
<table class="testTreeTable">
<colgroup>
<col style="width: 40%" />
<col />
</colgroup>
<tbody>
<tr class="testTreeItem">
<td class="testTreeItemLeft" valign="top" style="text-align: left">
<span style="width: 12px; display: inline-block"></span>
<span class="testTreeIconBox"
><span class="doxyTreeIcon">S</span></span
>
<a
href="/micro-test-plus-xpack/docs/api/structs/micro-os-plus/micro-test-plus/type-traits/function-traits-c8ae4832b74f8fe701e29e20410c0d5a/"
>function_traits<R(*)(Args_T...)></a
>
</td>
<td class="testTreeItemRight" valign="top" style="text-align: left">
Struct template specialisation for extracting function traits from
function pointer types
</td>
</tr>
<tr class="testTreeItem">
<td class="testTreeItemLeft" valign="top" style="text-align: left">
<span style="width: 24px; display: inline-block"></span>
<span class="testTreeIconBox"
><span class="doxyTreeIcon">S</span></span
>
<a
href="/micro-test-plus-xpack/docs/api/structs/micro-os-plus/micro-test-plus/type-traits/value-dae7771377f0087abbec46abf87b329e/"
>value<T, type_traits::requires_t<
type_traits::is_floating_point_v< T > >></a
>
</td>
<td class="testTreeItemRight" valign="top" style="text-align: left">
Struct template representing a floating point value with precision
control
</td>
</tr>
<tr class="testTreeItem">
<td class="testTreeItemLeft" valign="top" style="text-align: left">
<span style="width: 12px; display: inline-block"></span>
<span class="testTreeIconBox"
><span class="doxyTreeIcon">S</span></span
>
<a
href="/micro-test-plus-xpack/docs/api/structs/micro-os-plus/micro-test-plus/type-traits/requires-/"
>requires_<bool></a
>
</td>
<td class="testTreeItemRight" valign="top" style="text-align: left">
Struct template for SFINAE requirements
</td>
</tr>
<tr class="testTreeItem">
<td class="testTreeItemLeft" valign="top" style="text-align: left">
<span style="width: 12px; display: inline-block"></span>
<span class="testTreeIconBox"
><span class="doxyTreeIcon">C</span></span
>
<a
href="/micro-test-plus-xpack/docs/api/classes/micro-os-plus/micro-test-plus/test-suite-base/"
>test_suite_base</a
>
</td>
<td class="testTreeItemRight" valign="top" style="text-align: left">
Base class for all test suites
</td>
</tr>
<tr class="testTreeItem">
<td class="testTreeItemLeft" valign="top" style="text-align: left">
<span style="width: 24px; display: inline-block"></span>
<span class="testTreeIconBox"
><span class="doxyTreeIcon">C</span></span
>
<a
href="/micro-test-plus-xpack/docs/api/classes/micro-os-plus/micro-test-plus/test-suite/"
>test_suite</a
>
</td>
<td class="testTreeItemRight" valign="top" style="text-align: left">
Represents a named group of test cases that self-register to the
runner
</td>
</tr>
</tbody>
</table>
</body>
</html>The long lines are correctly clipped and
If I use the same code in a docs .md page, the result is:
It looks like there are some theme definitions that interfere with my CSS definitions, making them ineffective. I tried to do some debugging in the Safari debug page, and visually compare the two pages element CSSs; unfortunately, at least from what I can tell, the CSSs seem applied the same in both cases. :-( I don't know how Docusaurus generates the final styles.css and how to disable parts of it, in order to diagnose the problem. I prepared a public repro at: The changes to the original content are:
I remember some time ago I faced a similar problem when I tried to make the sidebar content be clipped, but something prevented me getting any results and I had no time to further investigate, so I found a workaround to shorten the sidebar entries. This time I need to solve the issue, since I really cannot control the width of the input text. Any suggestions how to proceed? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 2 replies
-
|
It looks like this is because Docusaurus applies Also in v3.8 we give you a way to isolate your code from the global CSS rules applied by Docusaurus: https://docusaurus.io/blog/releases/3.8#css-cascade-layers |
Beta Was this translation helpful? Give feedback.
-
Ah, right, I missed this. I added I saw this, but I still have to understand how to use it, the documentation is quite cryptic for me. :-( Thank you! |
Beta Was this translation helpful? Give feedback.
-
|
It's a CSS feature, we can't document it exhaustively, but there are plenty of resources online to understand how it works. Unfortunately, you can't understand how this works under 2 minutes, but reading that long article is worth it: |
Beta Was this translation helpful? Give feedback.
It looks like this is because Docusaurus applies
display: blockby default to tables. You can override/revert that built-in CSS rule.Also in v3.8 we give you a way to isolate your code from the global CSS rules applied by Docusaurus: https://docusaurus.io/blog/releases/3.8#css-cascade-layers