使用 DIV 标签动态构建结构化 HTML table 时出现问题

Question

我有一个 Python 程序可以将其数据输出到网页中。数据是分层的但不一致。 Table 第一行可能只有 2 children 而 table 第二行可能有 1 child 谁有 2 children 谁有 3 child任各。每个 parent 只有 3 代的约束（例如 4 列输出）。我已经编写代码以在 DIV 方法中使用动态 DIV 构建输出，但我正在努力让列始终对齐。无论数据点的数量有多少，我都需要每一列都排成一行，并且看起来好像是一个一致的 table，没有空格。每个 "cell" DIV 需要保持一致的宽度并且更宽的容器需要跨越 table.

的整个宽度

这是我现在的风格sheet:

    <style>


    .rTableMain {
       display: table;
       width: 90%;
       border: none;
       margin: auto;
    }
    .rTable {
       display: table;
       width: 100%
    }
    .rTableRow {
       display: table-row;
       height: 50px;
    }
    .rTableHeading {
       display: table-header-group;
       background-color: #ddd;
    }
    .rTableCell, .rTableHead {
       display: table-cell;
       padding: 3px 3px;
       width: 250px;
       //float: left;
       vertical-align: middle;
       //border: 1px solid #999999;
    }
    .rTableCellLF {
       display: table-cell;
       padding: 10px 10px;
       width: 200px;
       max-width: 200px;
       //float: left;
       vertical-align: middle;
       font-weight: bold;
       font-size: 28px;
       color: #ffff99;
       background-color: #25274d;
       border: 1px solid #999999;
    }
    .rTableCellLT {
       display: table-cell;
       padding: 3px 10px;
       width: 200px;
       max-width: 200px;
       //float: left;
       vertical-align: middle;
       font-size: 22px;
       color: #6699CC;
       background-color: #464866;
       border: 1px solid #ffffff;
    }
    .rTableCellMT {
       display: table-cell;
       padding: 3px 3px;
       width: 200px;
       max-width: 200px;
       //float: left;
       vertical-align: middle;
       font-size: 18px;
       color: #000044;
       background-color: #aaabb8;
       border: 1px solid #ffffff;
    }
    .rTableCellST {
       display: table-cell;
       padding: 3px 3px;
       width: 200px;
       max-width: 200px;
       //float: left;
       vertical-align: middle;
       font-size: 12px;
       color: #000055;
       background-color: #2e9cca;
       border: 1px solid #ffffff;
    }

    .rTableHeading {
       display: table-header-group;
       background-color: #ddd;
       font-weight: bold;
    }
    .rTableFoot {
       display: table-footer-group;
       font-weight: bold;
       background-color: #ddd;
    }
    .rTableBody {
       display: table-row-group;
    }
</STYLE>

这是生成的 HTML 代码示例：

<DIV class="rTableMain">
<DIV class="rTableRow">
<DIV class="rTableCellLF">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</DIV>
<DIV class="rTableCell">
<DIV class="rTable">
<DIV class="rTableRow">
<DIV class="rTableCellLT">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</DIV>
</DIV>
<DIV class="rTableRow">
<DIV class="rTableCellLT">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</DIV>
</DIV>
</DIV>
</DIV>
</DIV>
</DIV>
<DIV class="rTableMain">
<DIV class="rTableRow">
<DIV class="rTableCellLF">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</DIV>
<DIV class="rTableCell">
<DIV class="rTable">
<DIV class="rTableRow">
<DIV class="rTableCellLT">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</DIV>
<DIV class="rTableCell">
<DIV class="rTable">
<DIV class="rTableRow">
<DIV class="rTableCellMT">Lorem ipsum dolor sit amet.</DIV>
<DIV class="rTableCell">
<DIV class="rTable">
</DIV>
</DIV>
</DIV>
<DIV class="rTableRow">
<DIV class="rTableCellMT">Lorem ipsum dolor sit amet.</DIV>
<DIV class="rTableCell">
<DIV class="rTable">
</DIV>
</DIV>
</DIV>
<DIV class="rTableRow">
<DIV class="rTableCellMT">Lorem ipsum dolor sit amet.</DIV>
<DIV class="rTableCell">
<DIV class="rTable">
<DIV class="rTableRow">
<DIV class="rTableCellST">Lorem ipsum dolor sit amet.</DIV>
</DIV>
<DIV class="rTableRow">
<DIV class="rTableCellST">Lorem ipsum dolor sit amet.</DIV>
</DIV>
</DIV>
</DIV>
</DIV>
</DIV>
</DIV>
</DIV>
<DIV class="rTableRow">
<DIV class="rTableCellLT">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</DIV>
</DIV>
</DIV>
</DIV>
</DIV>
</DIV>

很明显我不是一个非常熟练的 CSS 程序员，所以我很感谢一路上的提示。请记住，HTML 来自迭代数据的 Python 来源。如果我在开始构建 table 之前就知道确切的内容，我会采取非常不同的做法。尽管我很感激（并且可能稍后会要求）有关生成器代码的帮助，但现在，只是在寻找 CSS / HTML 帮助。

提前致谢！我无法告诉您每个人对 Whosebug 的帮助有多大。你们都是吃力不讨好的英雄，他们帮助我们所有人实现了我们开始时在编程上似乎不可能实现的目标！

Answer 1

好吧，显然这不是一个值得问或容易理解的问题。我确实弄清楚是否还有其他人有类似的问题。这真的归结为更好地管理我的 DIV 标签和设置大小。

这是更新后的样式sheet：

 <style>


        .rTableMain {
           display: table;
           //width: 90%;
           border: none;
           margin: left;
        }
        .rTable {
           display: table;
           float: left;
           //width: 100%
        }
        .rTableRow {
           display: table-row;
           height: 50px;
        }
        .rTableHeading {
           display: table-header-group;
           background-color: #ddd;
        }
        .rTableCell, .rTableHead {
           display: table-cell;
           padding: 3px 3px;
           //width: 250px;
           float: left;
           vertical-align: middle;
           //border: 1px solid #999999;
        }
        .rTableCellLF {
           display: table-cell;
           padding: 10px 10px;
           width: 250px;
           //min-width: 200px;
           align: left;
           vertical-align: middle;
           font-weight: bold;
           font-size: 28px;
           color: #ffff99;
           background-color: #25274d;
           border: 1px solid #999999;
        }
        .rTableCellLT {
           display: table-cell;
           padding: 3px 10px;
           width: 250px;
           //min-width: 200px;
           //float: left;
           vertical-align: middle;
           font-size: 22px;
           color: #6699CC;
           background-color: #464866;
           border: 1px solid #ffffff;
        }
        .rTableCellMT {
           display: table-cell;
           padding: 3px 5px;
           width: 250px;
           //min-width: 200px;
           //float: left;
           vertical-align: middle;
           font-size: 18px;
           color: #000044;
           background-color: #aaabb8;
           border: 1px solid #ffffff;
        }
        .rTableCellST {
           display: table-cell;
           padding: 3px 5px;
           width: 250px;
           //min-width: 200px;
           //float: left;
           vertical-align: middle;
           font-size: 12px;
           color: #000055;
           background-color: #2e9cca;
           border: 1px solid #ffffff;
        }

        .rTableHeading {
           display: table-header-group;
           background-color: #ddd;
           font-weight: bold;
        }
        .rTableFoot {
           display: table-footer-group;
           font-weight: bold;
           background-color: #ddd;
        }
        .rTableBody {
           display: table-row-group;
        }
    </STYLE>

使用 DIV 标签动态构建结构化 HTML table 时出现问题

Problem dynamically building a structured HTML table using DIV tags

python

html

css

wsgi

dynamically-generated