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:
Brian Campbell 2018-05-31 13:58:33 -04:00 committed by Alicia Cozine
commit fa5c0282a4
3 changed files with 162 additions and 215 deletions

View file

@ -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 {

View file

@ -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 {