Fatal编程技术网
  • python/
  • Python 使用DIV标记动态构建结构化HTML表时出现问题

Python 使用DIV标记动态构建结构化HTML表时出现问题

python html css

Python 使用DIV标记动态构建结构化HTML表时出现问题,python,html,css,wsgi,dynamically-generated,Python,Html,Css,Wsgi,Dynamically Generated,我有一个Python程序，可以将数据输出到网页中。数据是分层的，但不一致。表1行可能只有2个孩子，表2行可能有1个孩子，其中有2个孩子，每个孩子有3个。每个父代仅限3代（例如，4列输出）。我已经编写了在DIV方法中使用动态DIV构建输出的代码，但是我很难让列一致地排列起来。无论数据点的数量如何，我都需要将每一列排列起来，并将其显示为一个没有空格的一致表。每个“cell”DIV需要保持一致的宽度，较宽的容器需要跨越整个表的宽度 以下是我当前的样式表： <style>

我有一个Python程序，可以将数据输出到网页中。数据是分层的，但不一致。表1行可能只有2个孩子，表2行可能有1个孩子，其中有2个孩子，每个孩子有3个。每个父代仅限3代（例如，4列输出）。我已经编写了在DIV方法中使用动态DIV构建输出的代码，但是我很难让列一致地排列起来。无论数据点的数量如何，我都需要将每一列排列起来，并将其显示为一个没有空格的一致表。每个“cell”DIV需要保持一致的宽度，较宽的容器需要跨越整个表的宽度

以下是我当前的样式表：

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

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


贝勒曼先生{
显示：表格；
宽度：90%；
边界：无；
保证金：自动；
}
.rTable{
显示：表格；
宽度：100%
}
布尔特罗先生{
显示：表格行；
高度：50px；
}
.标题{
显示：表头组；
背景色：#ddd；
}
.rTableCell、.rTableHead{
显示：表格单元格；
填充：3px 3px；
宽度：250px；
//浮动：左；
垂直对齐：中间对齐；
//边框：1px实心#999999；
}
布尔塞尔夫先生{
显示：表格单元格；
填充：10px 10px；
宽度：200px；
最大宽度：200px；
//浮动：左；
垂直对齐：中间对齐；
字体大小：粗体；
字号：28px；
颜色：#ffff99；
背景色：#25274d；
边框：1px实心#999999；
}
布尔塞尔特先生{
显示：表格单元格；
填充：3x10px；
宽度：200px；
最大宽度：200px；
//浮动：左；
垂直对齐：中间对齐；
字体大小：22px；
颜色：#6699CC；
背景色：#464866；
边框：1px实心#ffffff；
}
塔布利塞尔姆先生{
显示：表格单元格；
填充：3px 3px；
宽度：200px；
最大宽度：200px；
//浮动：左；
垂直对齐：中间对齐；
字号：18px；
颜色：#000044；
背景色：#aaabb8；
边框：1px实心#ffffff；
}
布勒塞斯特先生{
显示：表格单元格；
填充：3px 3px；
宽度：200px；
最大宽度：200px；
//浮动：左；
垂直对齐：中间对齐；
字体大小：12px；
颜色：#000055；
背景色：#2e9cca；
边框：1px实心#ffffff；
}
.标题{
显示：表头组；
背景色：#ddd；
字体大小：粗体；
}
布勒福特先生{
显示：表尾组；
字体大小：粗体；
背景色：#ddd；
}
.可移植体{
显示：表格行组；
}
以下是生成的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>


知识是一种美德，是一种美德，是一种美德，是一种美德。
Lorem ipsum dolor sit amet，是一位杰出的献身者。
Lorem ipsum dolor sit amet，是一位杰出的献身者。
知识是一种美德，是一种美德，是一种美德，是一种美德。
Lorem ipsum dolor sit amet，是一位杰出的献身者。
Lorem ipsum dolor sit amet。
Lorem ipsum dolor sit amet。
Lorem ipsum dolor sit amet。
Lorem ipsum dolor sit amet。
Lorem ipsum dolor sit amet。
Lorem ipsum dolor sit amet，是一位杰出的献身者。
很明显，我不是一个非常熟练的CSS程序员，所以我很欣赏这些技巧。请记住，HTML来自对数据进行迭代的Python源代码。如果我在开始构建表格之前知道确切的内容，我会做得非常不同。我非常感谢（以后可能会要求）关于生成器代码的帮助，现在，我只是在寻找CSS/HTML帮助

提前谢谢！我无法告诉你stackoverflow上的每个人都帮了多少忙。你们都是忘恩负义的英雄，他们帮助我们实现了我们开始时在程序上似乎不可能实现的目标

好吧，很明显，这个问题既不值得问，也不容易理解。我确实发现了是否有其他人也有类似的问题。这实际上归结于更好地管理我的DIV标签和设置大小

以下是更新后的样式表：

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

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


贝勒曼先生{
显示：表格；
//宽度：90%；
边界：无；
边缘：左；
}
.rTable{
显示：表格；
浮动：左；
//宽度：100%
}
布尔特罗先生{
显示：表格行；
高度：50px；
}
.标题{
显示：表头组；
背景色：#ddd；
}
.rTableCell、.rTableHead{
显示：表格单元格；
填充：3px 3px；
//宽度：250px；
浮动：左；
垂直对齐：中间对齐；
//边框：1px实心#999999；
}
布尔塞尔夫先生{
显示：表格单元格；
填充：10px 10px；
宽度：250px；
//最小宽度：200px；
对齐：左；
垂直对齐：中间对齐；
字体大小：粗体；
字号：28px；
颜色：#ffff99；
背景色：#25274d；
边框：1px实心#999999；
}
布尔塞尔特先生{
显示：表格单元格；
填充：3x10px；
宽度：250px；
//最小宽度：200px；
//浮动：左；
垂直对齐：中间对齐；
字体大小：22px；
颜色：#6699CC；
背景色：#464866；
边框：1px实心#ffffff；
}
塔布利塞尔姆先生{
显示：表格单元格；
填充物：3px 5px；
宽度：250px；
//最小宽度：200