当前一行有行时,表格单元在IE中扩展?

时间:2015-11-24 08:57:56

标签: html css internet-explorer

我有一组复杂的表行,遍布商店的是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生成器。

0 个答案:

没有答案