Question

我有一组复杂的表行，遍布商店的是colspans和rowspans。除了Internet Explorer中的底行，强制它的高度与前一行（设置为"I am a human".replace(" a "," ")）相同，一切正常。我该如何解决这个问题？

此外，布局需要作为表格，因为PDF生成器使用它并且需要表格。理想情况下，HTML布局根本不会改变，但如果需要，它可以改变。

以下是代码。在谷歌浏览器中查看它，看看它应该如何在IE中显示。

rowspan="2"

.MhrPayslipDetail {
  display: block;
  font-family: sans-serif;
  font-size: 16px;
  padding: 20px 60px;
  text-align: center;
}
.MhrPayslipDetail-payslip {
  background-color: #fff;
  border-collapse: separate;
  border-spacing: 10px;
  width: 100%;
}
.MhrPayslipDetail-label {
  background-color: #c1c1c1;
  border: 1px solid #c1c1c1;
  border-radius: 5px;
  font-weight: bold;
  padding: 4px;
  text-align: left;
  vertical-align: middle;
}
.MhrPayslipDetail-cell,
.MhrPayslipDetail-cellRight {
  background-color: #fff;
  border: 1px solid #c1c1c1;
  border-radius: 5px;
  padding: 4px;
  text-align: left;
  vertical-align: middle;
}
.MhrPayslipDetail-cellRight {
  text-align: right;
}
.MhrPayslipDetail-list {
  border: 0;
  border-collapse: collapse;
  width: 100%;
}
.MhrPayslipDetail-listCell,
.MhrPayslipDetail-listLabel,
.MhrPayslipDetail-listCellHeader {
  border: 0;
  padding: 1px;
  text-align: left;
  vertical-align: middle;
}
.MhrPayslipDetail-listCellRight,
.MhrPayslipDetail-listCellHeaderRight {
  border: 0;
  padding: 1px;
  text-align: right;
  vertical-align: middle;
}
.MhrPayslipDetail-listLabel,
.MhrPayslipDetail-listCellHeader {
  font-weight: bold;
  width: 50%;
}
.MhrPayslipDetail-details {
  font-size: .9em;
}
.MhrPayslipDetail-paymentsDetails,
.MhrPayslipDetail-deductionsDetails {
  height: 21em;
  vertical-align: top;
}
.MhrPayslipDetail-thisPeriodDetails,
.MhrPayslipDetail-yearToDateDetails {
  height: 10em;
  vertical-align: top;
}

更新

自提交此问题以来，我尝试使用子表来分隔列，但是我发现当我这样做时，由于边框间距和PDF生成器的缺乏，我无法使它们正确排列能够使用<div class="MhrPayslipDetail"> <table class="MhrPayslipDetail-payslip"> <tbody> <tr> <td colspan="3" rowspan="3" class="MhrPayslipDetail-cell MhrPayslipDetail-paymentsDetails"> <table class="MhrPayslipDetail-details MhrPayslipDetail-list"> <thead> <tr> <th class="MhrPayslipDetail-listCellHeader">Description</th> <th class="MhrPayslipDetail-listCellHeaderRight">U/T</th> <th class="MhrPayslipDetail-listCellHeaderRight">Rate</th> <th class="MhrPayslipDetail-listCellHeaderRight">Cash</th> </tr> </thead> <tbody> <tr> <td class="MhrPayslipDetail-listCell">Test Basic Pay</td> <td class="MhrPayslipDetail-listCellRight"></td> <td class="MhrPayslipDetail-listCellRight"></td> <td class="MhrPayslipDetail-listCellRight">200.00</td> </tr> </tbody> </table> </td> <td colspan="2" rowspan="3" class="MhrPayslipDetail-cell MhrPayslipDetail-deductionsDetails"> <table class="MhrPayslipDetail-details MhrPayslipDetail-list"> <thead> <tr> <th class="MhrPayslipDetail-listCellHeader">Description</th> <th class="MhrPayslipDetail-listCellHeaderRight">Cash</th> </tr> </thead> <tbody> <tr> <td class="MhrPayslipDetail-listCell">Tax</td> <td class="MhrPayslipDetail-listCellRight">25.40</td> </tr> <tr> <td class="MhrPayslipDetail-listCell">NI</td> <td class="MhrPayslipDetail-listCellRight">24.00</td> </tr> </tbody> </table> </td> <td colspan="2" class="MhrPayslipDetail-cell MhrPayslipDetail-thisPeriodDetails"> <table class="MhrPayslipDetail-details MhrPayslipDetail-list"> <thead> <tr> <th class="MhrPayslipDetail-listCellHeader">Description</th> <th class="MhrPayslipDetail-listCellHeaderRight">Cash</th> </tr> </thead> <tbody> <tr> <td class="MhrPayslipDetail-listCell">Taxable Pay</td> <td class="MhrPayslipDetail-listCellRight">200.00</td> </tr> <tr> <td class="MhrPayslipDetail-listCell">Employers National Insurance</td> <td class="MhrPayslipDetail-listCellRight">27.60</td> </tr> <tr> <td class="MhrPayslipDetail-listCell">Niable Pay</td> <td class="MhrPayslipDetail-listCellRight">200.00</td> </tr> </tbody> </table> </td> </tr> <tr> <th colspan="2" class="MhrPayslipDetail-label">Year-to-date</th> </tr> <tr> <td colspan="2" rowspan="2" class="MhrPayslipDetail-cell MhrPayslipDetail-yearToDateDetails"> <table class="MhrPayslipDetail-details MhrPayslipDetail-list"> <tbody> <tr> <td class="MhrPayslipDetail-listCell">Taxable Pay</td> <td class="MhrPayslipDetail-listCellRight">7,200.00</td> </tr> <tr> <td class="MhrPayslipDetail-listCell">NI</td> <td class="MhrPayslipDetail-listCellRight">622.08</td> </tr> <tr> <td class="MhrPayslipDetail-listCell">Tax</td> <td class="MhrPayslipDetail-listCellRight">25.40</td> </tr> <tr> <td class="MhrPayslipDetail-listCell">Niable Pay</td> <td class="MhrPayslipDetail-listCellRight">7,200.00</td> </tr> <tr> <td class="MhrPayslipDetail-listCell">Employers National Insurance</td> <td class="MhrPayslipDetail-listCellRight">713.73</td> </tr> </tbody> </table> </td> </tr> <tr> <th class="MhrPayslipDetail-label">Payments</th> <td class="MhrPayslipDetail-cellRight" colspan="2">200.00</td> <th class="MhrPayslipDetail-label">Deductions</th> <td class="MhrPayslipDetail-cellRight">49.40</td> </tr> </tbody> </table> </div>。

作为一个FYI，this是系统正在使用的PDF生成器。

当前一行有行时，表格单元在IE中扩展？

0 个答案: