mirror of
https://github.com/ansible-collections/community.general.git
synced 2025-07-30 08:31:28 -07:00
Use colspan on td instead of divs for hierarchical tables (#39948)
Address Firefox table-rendering issues in docs. Refactor to use colspan to provide table cells which can vary in width and indentation; the outermost has the greatest colspan, and each nested key has a colspan of one less than the parent, with padding cells for indentation. Apply styling to table cells to get the table height to work without hacks or browser-specific styling. Simplify the markup and CSS by removing extra divs. Use two passes over the options, return values, and return facts in the Jinja2 module-docs template: one to determine the maximum nesting depth to compute the maximum colspan needed, plus one to lay out the rows.
This commit is contained in:
parent
91fd98a2bd
commit
fa5c0282a4
3 changed files with 162 additions and 215 deletions
|
@ -421,51 +421,17 @@ table {
|
|||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.outer-elbow-container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.elbow-placeholder {
|
||||
.documentation-table td.elbow-placeholder {
|
||||
border-left: 1px solid #000;
|
||||
height: 100%;
|
||||
border-top: 0px;
|
||||
width: 30px;
|
||||
min-width: 30px;
|
||||
}
|
||||
|
||||
.elbow-key {
|
||||
height: 100%;
|
||||
padding: 4px;
|
||||
border-top: 1px solid #000;
|
||||
flex-grow: 1;
|
||||
border-left: 1px solid #000;
|
||||
}
|
||||
|
||||
.elbow-blocker {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.return-value-column {
|
||||
height: 1px
|
||||
}
|
||||
|
||||
.return-value-column td {
|
||||
height: inherit
|
||||
}
|
||||
|
||||
@-moz-document url-prefix() {
|
||||
.return-value-column td {
|
||||
height: 100%
|
||||
}
|
||||
}
|
||||
|
||||
.cell-border {
|
||||
.documentation-table th, .documentation-table td {
|
||||
padding: 4px;
|
||||
border-left: 1px solid #000;
|
||||
border-top: 1px solid #000;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.documentation-table {
|
||||
|
|
|
@ -4867,50 +4867,17 @@ table {
|
|||
}
|
||||
}
|
||||
|
||||
.outer-elbow-container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.elbow-placeholder {
|
||||
.documentation-table td.elbow-placeholder {
|
||||
border-left: 1px solid #000;
|
||||
height: 100%;
|
||||
border-top: 0px;
|
||||
width: 30px;
|
||||
min-width: 30px;
|
||||
}
|
||||
|
||||
.elbow-key {
|
||||
height: 100%;
|
||||
padding: 4px;
|
||||
border-top: 1px solid #000;
|
||||
flex-grow: 1;
|
||||
border-left: 1px solid #000;
|
||||
}
|
||||
|
||||
.elbow-blocker {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.return-value-column {
|
||||
height: 1px
|
||||
}
|
||||
|
||||
.return-value-column td {
|
||||
height: inherit
|
||||
}
|
||||
|
||||
@-moz-document url-prefix() {
|
||||
.return-value-column td {
|
||||
height: 100%
|
||||
}
|
||||
}
|
||||
|
||||
.cell-border {
|
||||
.documentation-table th, .documentation-table td {
|
||||
padding: 4px;
|
||||
border-left: 1px solid #000;
|
||||
border-top: 1px solid #000;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.documentation-table {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue