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

邮箱头

我有一个Python程序,可将其数据输出到网页中。数据是分层的,但不一致。第一排表可能只有2个孩子,第二排表可能有1个孩子,其中2个孩子各有3个孩子。每个父级只有3代的约束(例如,输出的4列)。我已经编写了用于在DIV方法中使用动态DIV构建输出的代码,但是我正在努力使各列一致地排列。无论数据点有多少,我都需要将每一列对齐并显示为一个没有空格的一致表。每个“单元格” 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>

这是生成的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数据源,该数据对数据进行迭代。如果我在开始构建表之前就知道确切的内容,那么我将以完全不同的方式进行操作。正如我所欣赏的(可能以后会问到)有关生成器代码的帮助一样,现在,只是在寻找CSS / HTML帮助。

提前致谢!我无法告诉您每个人对stackoverflow的帮助。你们都是无可救药的英雄,他们帮助我们所有人实现了我们开始时在编程上似乎不可能实现的目标!

邮箱头

好吧,显然不是一个值得提出或易于理解的问题。我确实弄清楚是否还有其他人有类似的问题。真正归结为更好地管理我的DIV标签和设置尺寸。

这是更新的样式表:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在C中的结构化列表中将stdin作为文件读取时出现问题

来自分类Dev

使用jsoup在div中选择标签时出现问题

来自分类Dev

使用JQuery删除动态创建的Div时出现问题

来自分类Dev

使用JQuery删除动态创建的Div时出现问题

来自分类Dev

使用jsoup解析HTML表时出现问题

来自分类Dev

使用构造函数初始化列表初始化结构时出现问题

来自分类Dev

使用GWT插件构建Eclipse项目时出现问题

来自分类Dev

使用iOS SDK 8.3构建GMP时出现问题

来自分类Dev

使用iOS SDK 8.3构建MPFR时出现问题

来自分类Dev

使用iOS SDK 8.3构建GMP时出现问题

来自分类Dev

使用iOS SDK 8.3构建MPFR时出现问题

来自分类Dev

标准化后创建表时出现问题

来自分类Dev

在动态数组上使用指针时出现问题

来自分类Dev

使用jquery显示动态内容时出现问题?

来自分类Dev

使用jQuery动态创建按钮时出现问题

来自分类Dev

使用Python将HTML表保存到Excel中时出现问题

来自分类Dev

使用ajax和php将数据显示到html表时出现问题

来自分类Dev

使用MySQL和PHP创建表时出现问题

来自分类Dev

使用MySQL和PHP创建表时出现问题

来自分类Dev

使用jQuery更改Div颜色时出现问题

来自分类Dev

HTML Agility Pack-在选择带有选择标签的HTML选择标签时出现问题

来自分类Dev

使用Curl下载HTML进行解析时出现问题

来自分类Dev

使用 SCSS/CSS 定位 HTML 元素时出现问题

来自分类Dev

水平对齐div时出现问题

来自分类Dev

如何使用Apache Pig构建非结构化数据

来自分类Dev

在使用多个表单时更新标签文本时出现问题

来自分类Dev

CI中php和html的分段/结构化问题

来自分类Dev

使用Redis进行Spark结构化流式动态查找

来自分类Dev

构建使用C ++ 11功能的Python扩展时出现问题

Related 相关文章

  1. 1

    在C中的结构化列表中将stdin作为文件读取时出现问题

  2. 2

    使用jsoup在div中选择标签时出现问题

  3. 3

    使用JQuery删除动态创建的Div时出现问题

  4. 4

    使用JQuery删除动态创建的Div时出现问题

  5. 5

    使用jsoup解析HTML表时出现问题

  6. 6

    使用构造函数初始化列表初始化结构时出现问题

  7. 7

    使用GWT插件构建Eclipse项目时出现问题

  8. 8

    使用iOS SDK 8.3构建GMP时出现问题

  9. 9

    使用iOS SDK 8.3构建MPFR时出现问题

  10. 10

    使用iOS SDK 8.3构建GMP时出现问题

  11. 11

    使用iOS SDK 8.3构建MPFR时出现问题

  12. 12

    标准化后创建表时出现问题

  13. 13

    在动态数组上使用指针时出现问题

  14. 14

    使用jquery显示动态内容时出现问题?

  15. 15

    使用jQuery动态创建按钮时出现问题

  16. 16

    使用Python将HTML表保存到Excel中时出现问题

  17. 17

    使用ajax和php将数据显示到html表时出现问题

  18. 18

    使用MySQL和PHP创建表时出现问题

  19. 19

    使用MySQL和PHP创建表时出现问题

  20. 20

    使用jQuery更改Div颜色时出现问题

  21. 21

    HTML Agility Pack-在选择带有选择标签的HTML选择标签时出现问题

  22. 22

    使用Curl下载HTML进行解析时出现问题

  23. 23

    使用 SCSS/CSS 定位 HTML 元素时出现问题

  24. 24

    水平对齐div时出现问题

  25. 25

    如何使用Apache Pig构建非结构化数据

  26. 26

    在使用多个表单时更新标签文本时出现问题

  27. 27

    CI中php和html的分段/结构化问题

  28. 28

    使用Redis进行Spark结构化流式动态查找

  29. 29

    构建使用C ++ 11功能的Python扩展时出现问题

热门标签

归档