我有一个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] 删除。
我来说两句