我有一个标准的HTML表格,其中一些边框出现在大多数浏览器中,例如Firefox,但在Chrome中,当其中一个单元格被隐藏时,边框就会消失。单元格设置为显示:none,边框不在tds上,而是在tr和table元素上。无论如何,Chrome将其视为不存在而只是跳过它。是否有任何特定于-webkit的东西我可以用来解决这个问题?我已经尝试将边框应用到基本上我可以使用的任何元素,但到目前为止还没有任何运气。有没有其他人经历过这个?
CSS:
.hide-dm, .hidden, .hide-training, table.hide-dm, table.hide-training, .hide-ca {
display: none;
}
.table {
border: 1px solid #ddd;
border-collapse: collapse;
}
.table > tbody > tr {
border-top: 1px solid #ddd;
}
.table-bordered > tbody > tr > td.border-bottom, .table > tbody > tr > td.border-bottom, tr.border-bottom {
border-bottom: 3px solid #000;
}
tr.hide-training + tr.backup_border, tr.hidden + tr.backup_border, tr.hide-dm + tr.backup_border {
border-top: 3px solid #000;
}
.table-bordered > tbody > tr > td.border-left, .table > tbody > tr > td.border-left, .table-bordered > thead > tr > th.border-left {
border-left: 3px solid #000;
}
.table-bordered > tbody > tr > td.border-right, .table > tbody > tr > td.border-right {
border-right: 3px solid #000;
}
<table class="table table-condensed">
<thead>
<tr>
<th class="text-center active" colspan="3">Current</th>
<th class="text-center border-left" colspan="3">New</th>
</tr>
</thead>
<tbody>
<tr class="border-bottom">
<td class="active" colspan="3">
<div class="manager-header manager-header-current manager-header-print form-horizontal col-sm-3">
<span id="current_selector_label" class="text-bold">Store:</span>
<span id="current-store-parent">240</span>
</div>
<div class="manager-header manager-header-current manager-header-print col-sm-3">
<strong>Role:</strong>
<span id="old_role_label">DM</span>
</div>
<div class="manager-header manager-header-print col-sm-6">
<strong>Manager:</strong>
<span class="mgr-header-name" id="current-mgr-header-name">
Rob Tufts (184101)
</span>
</div>
</td>
<td class="border-left" colspan="3">
<div class="form-horizontal d-inline-block align-middle manager-header manager-header-print" style="width: 28%;">
<label id="new_selector_label" for="" class="col-sm-4 control-label">Store</label>
<div class="col-sm-8">
<div id="new-store-parent">
<div class="dijit dijitReset dijitInline dijitLeft form-control text-center dm-hidden dijitTextBox dijitComboBox dijitValidationTextBox" id="widget_newLocationNumber" role="combobox" aria-haspopup="true" data-dojo-attach-point="_popupStateNode" widgetid="newLocationNumber" lang="en"><div class="dijitReset dijitRight dijitButtonNode dijitArrowButton dijitDownArrowButton dijitArrowButtonContainer" data-dojo-attach-point="_buttonNode" role="presentation" style="display: none;"><input class="dijitReset dijitInputField dijitArrowButtonInner" value="▼ " tabindex="-1" readonly="readonly" role="button presentation" aria-hidden="true" type="text"></div><div class="dijitReset dijitValidationContainer"><input class="dijitReset dijitInputField dijitValidationIcon dijitValidationInner" value="Χ " tabindex="-1" readonly="readonly" role="presentation" type="text"></div><div class="dijitReset dijitInputField dijitInputContainer"><input class="dijitReset dijitInputInner" autocomplete="off" data-dojo-attach-point="textbox,focusNode" role="textbox" aria-autocomplete="both" id="newLocationNumber" maxlength="4" tabindex="6" data-original="2569" aria-required="true" placeholder="" value="" aria-invalid="false" type="text"><input name="store" value="2569" type="hidden"></div></div>
<div class="dijit dijitReset dijitInline dijitLeft dijitTextBox dijitComboBox dijitValidationTextBox form-control text-center hidden" id="widget_newDistrictSearch" role="combobox" aria-haspopup="true" data-dojo-attach-point="_popupStateNode" widgetid="newDistrictSearch" lang="en"><div class="dijitReset dijitRight dijitButtonNode dijitArrowButton dijitDownArrowButton dijitArrowButtonContainer" data-dojo-attach-point="_buttonNode" role="presentation" style="display: none;"><input class="dijitReset dijitInputField dijitArrowButtonInner" value="▼ " tabindex="-1" readonly="readonly" role="button presentation" aria-hidden="true" type="text"></div><div class="dijitReset dijitValidationContainer"><input class="dijitReset dijitInputField dijitValidationIcon dijitValidationInner" value="Χ " tabindex="-1" readonly="readonly" role="presentation" type="text"></div><div class="dijitReset dijitInputField dijitInputContainer"><input class="dijitReset dijitInputInner" autocomplete="off" data-dojo-attach-point="textbox,focusNode" role="textbox" aria-autocomplete="both" tabindex="0" id="newDistrictSearch" maxlength="4" data-original="2569" aria-required="false" placeholder="" value="" aria-invalid="false" type="text"><input name="district" value="" type="hidden"></div></div>
</div>
</div>
</div>
<div class="manager-header manager-header-print d-inline-block align-middle form-horizontal" style="width: 25%;">
<label class="control-label" style="padding-right: 3px;">Role</label>
<table class="dijit dijitReset dijitInline dijitLeft dijitDownArrowButton form-control width-forty text-center dijitSelect dijitValidationTextBox" data-dojo-attach-point="_buttonNode,tableNode,focusNode,_popupStateNode" role="listbox" aria-haspopup="true" style="-moz-user-select: none;" tabindex="0" data-value="SMIT" data-original="SMIT" id="manager_role" widgetid="manager_role" aria-expanded="false" aria-invalid="false" cellspacing="0" cellpadding="0" lang="en"><tbody role="presentation"><tr role="presentation"><td class="dijitReset dijitStretch dijitButtonContents" role="presentation"><div class="dijitReset dijitInputField dijitButtonText" data-dojo-attach-point="containerNode,textDirNode" role="presentation"><span role="option" aria-selected="true" class="dijitReset dijitInline dijitSelectLabel dijitValidationTextBoxLabel ">SMIT</span></div><div class="dijitReset dijitValidationContainer"><input class="dijitReset dijitInputField dijitValidationIcon dijitValidationInner" value="Χ " tabindex="-1" readonly="readonly" role="presentation" type="text"></div><input name="role" data-dojo-attach-point="valueNode" value="SMIT" aria-hidden="true" type="hidden"></td><td class="dijitReset dijitRight dijitButtonNode dijitArrowButton dijitDownArrowButton dijitArrowButtonContainer" data-dojo-attach-point="titleNode" role="presentation"><input class="dijitReset dijitInputField dijitArrowButtonInner" value="▼ " tabindex="-1" readonly="readonly" role="presentation" type="text"></td></tr></tbody></table>
</div>
<div class="manager-header manager-header-print d-inline-block align-middle" style="width: 45%;">
<strong>Manager:</strong>
<span class="mgr-header-name" id="new-mgr-header-name">
Rob Tufts (184101)
</span>
</div>
</td>
</tr>
<tr>
<td class="active text-center border-bottom" colspan="3">
<div class="manager-header col-sm-6 current-adjust hide-dm">
<div><strong>Sales %</strong></div>
<span class="" id="mgr-sales-percent-current">0.00%</span>
</div>
<div class="manager-header col-sm-6 current-adjust ">
<div><strong>ICP %</strong></div>
<span class="" id="mgr-icp-percent-current">1.00%</span>
</div>
<div id="current_hourly_rate_wrapper" class="col-sm-6 hidden current-adjust hide-dm">
<div><strong>Hourly Rate</strong></div>
<div class="dijit dijitReset dijitInline dijitLeft dijitTextBox dijitNumberTextBox dijitValidationTextBox form-control text-center center-block width-reset decimal-value" id="widget_current_hourly_rate" role="presentation" widgetid="current_hourly_rate" lang="en"><div class="dijitReset dijitValidationContainer"><input class="dijitReset dijitInputField dijitValidationIcon dijitValidationInner" value="Χ " tabindex="-1" readonly="readonly" role="presentation" type="text"></div><div class="dijitReset dijitInputField dijitInputContainer"><input class="dijitReset dijitInputInner" data-dojo-attach-point="textbox,focusNode" autocomplete="off" tabindex="1" data-value="" id="current_hourly_rate" size="9" data-original="" value="" aria-invalid="false" type="text"><input name="current_hourly_rate" value="" type="hidden"></div></div>
</div>
<div class="col-sm-6 current-adjust hidden">
<div><strong>Alt Rate</strong></div>
<div class="dijit dijitReset dijitInline dijitLeft dijitTextBox dijitNumberTextBox dijitValidationTextBox form-control text-center center-block width-reset decimal-value" id="widget_current_alt_rate" role="presentation" widgetid="current_alt_rate" lang="en"><div class="dijitReset dijitValidationContainer"><input class="dijitReset dijitInputField dijitValidationIcon dijitValidationInner" value="Χ " tabindex="-1" readonly="readonly" role="presentation" type="text"></div><div class="dijitReset dijitInputField dijitInputContainer"><input class="dijitReset dijitInputInner" data-dojo-attach-point="textbox,focusNode" autocomplete="off" tabindex="2" data-value="" id="current_alt_rate" size="9" data-original="" value="" aria-invalid="false" type="text"><input name="oldAltRate" value="" type="hidden"></div></div>
</div>
</td>
<td class="text-center border-left border-bottom" colspan="3">
<div id="new_sales_percent_wrapper" class="manager-header col-sm-6 new-adjust dm-hidden hide-training training-hidden">
<div><strong>Sales %</strong></div>
<table class="dijit dijitReset dijitInline dijitLeft dijitSelect dijitValidationTextBox dijitDownArrowButton form-control width-two-third text-center dm-hidden hide-training training-hidden" data-dojo-attach-point="_buttonNode,tableNode,focusNode,_popupStateNode" role="listbox" aria-haspopup="true" style="-moz-user-select: none;" tabindex="0" data-value="1.00" data-original="1.00" id="mgr-sales-percent-new" widgetid="mgr-sales-percent-new" aria-expanded="false" aria-invalid="false" cellspacing="0" cellpadding="0" lang="en"><tbody role="presentation"><tr role="presentation"><td class="dijitReset dijitStretch dijitButtonContents" role="presentation"><div class="dijitReset dijitInputField dijitButtonText" data-dojo-attach-point="containerNode,textDirNode" role="presentation"><span role="option" aria-selected="true" class="dijitReset dijitInline dijitSelectLabel dijitValidationTextBoxLabel ">1.00%</span></div><div class="dijitReset dijitValidationContainer"><input class="dijitReset dijitInputField dijitValidationIcon dijitValidationInner" value="Χ " tabindex="-1" readonly="readonly" role="presentation" type="text"></div><input name="salesIncentivePercent" data-dojo-attach-point="valueNode" value="1.00" aria-hidden="true" type="hidden"></td><td class="dijitReset dijitRight dijitButtonNode dijitArrowButton dijitDownArrowButton dijitArrowButtonContainer" data-dojo-attach-point="titleNode" role="presentation"><input class="dijitReset dijitInputField dijitArrowButtonInner" value="▼ " tabindex="-1" readonly="readonly" role="presentation" type="text"></td></tr></tbody></table>
<div id="read-mgr-sales-percent-new"></div>
</div>
<div id="new_icp_percent_wrapper" class="manager-header col-sm-6 new-adjust hide-training training-hidden">
<div id="manager_new_icp_label"><strong>ICP %</strong></div>
<table class="dijit dijitReset dijitInline dijitLeft dijitSelect dijitValidationTextBox dijitDownArrowButton form-control width-two-third text-center hide-training training-hidden hidden" data-dojo-attach-point="_buttonNode,tableNode,focusNode,_popupStateNode" role="listbox" aria-haspopup="true" style="-moz-user-select: none;" tabindex="0" data-original="1.00" data-value="1.00" id="mgr-icp-percent-new" widgetid="mgr-icp-percent-new" aria-expanded="false" aria-invalid="false" cellspacing="0" cellpadding="0" lang="en"><tbody role="presentation"><tr role="presentation"><td class="dijitReset dijitStretch dijitButtonContents" role="presentation"><div class="dijitReset dijitInputField dijitButtonText" data-dojo-attach-point="containerNode,textDirNode" role="presentation"><span role="option" aria-selected="true" class="dijitReset dijitInline dijitSelectLabel dijitValidationTextBoxLabel ">1.00%</span></div><div class="dijitReset dijitValidationContainer"><input class="dijitReset dijitInputField dijitValidationIcon dijitValidationInner" value="Χ " tabindex="-1" readonly="readonly" role="presentation" type="text"></div><input name="icpIncentivePercent" data-dojo-attach-point="valueNode" value="1.00" aria-hidden="true" type="hidden"></td><td class="dijitReset dijitRight dijitButtonNode dijitArrowButton dijitDownArrowButton dijitArrowButtonContainer" data-dojo-attach-point="titleNode" role="presentation"><input class="dijitReset dijitInputField dijitArrowButtonInner" value="▼ " tabindex="-1" readonly="readonly" role="presentation" type="text"></td></tr></tbody></table>
<div id="read-mgr-icp-percent-new">
1.00%
</div>
</div>
<div id="new_hourly_rate_wrapper" class="col-sm-3 hidden ca-hidden ca-hidden-new new-adjust dm-hidden">
<div><strong>Hourly Rate</strong></div>
<div class="dijit dijitReset dijitInline dijitLeft dijitTextBox dijitNumberTextBox dijitValidationTextBox form-control text-center center-block width-reset hidden ca-hidden ca-hidden-new dm-hidden decimal-value" id="widget_new_hourly_rate" role="presentation" widgetid="new_hourly_rate" lang="en"><div class="dijitReset dijitValidationContainer"><input class="dijitReset dijitInputField dijitValidationIcon dijitValidationInner" value="Χ " tabindex="-1" readonly="readonly" role="presentation" type="text"></div><div class="dijitReset dijitInputField dijitInputContainer"><input class="dijitReset dijitInputInner" data-dojo-attach-point="textbox,focusNode" autocomplete="off" tabindex="7" id="new_hourly_rate" size="9" data-original="" value="" aria-invalid="false" type="text"><input name="new_hourly_rate" value="" type="hidden"></div></div>
</div>
</td>
</tr>
<tr>
<td class="text-center col-sm-2 active border-bottom"></td>
<td class="text-center active border-bottom col-sm-2"><strong>Monthly</strong></td>
<td class="text-center active border-bottom col-sm-2"><strong>Yearly</strong></td>
<td class="text-center col-sm-2 border-bottom border-left"></td>
<td class="text-center border-bottom col-sm-2"><strong>Monthly</strong></td>
<td class="text-center border-bottom col-sm-2"><strong>Yearly</strong></td>
</tr>
<tr class="">
<td class="active width-cell-label">Base Salary</td>
<td class="text-center active" id="current_salary_month" data-value="833.3333333333334">$833.33</td>
<td class="text-center active decimal-value" data-original="10,000" id="current_salary_year" data-value="10000">$10,000.00</td>
<td class="border-left width-cell-label">Base Salary</td>
<td class="text-center">
<div class="dijit dijitReset dijitInline dijitLeft form-control text-center center-block width-reset decimal-value dijitTextBox dijitNumberTextBox dijitValidationTextBox" id="widget_new_salary_month" role="presentation" widgetid="new_salary_month" lang="en"><div class="dijitReset dijitValidationContainer"><input class="dijitReset dijitInputField dijitValidationIcon dijitValidationInner" value="Χ " tabindex="-1" readonly="readonly" role="presentation" type="text"></div><div class="dijitReset dijitInputField dijitInputContainer"><input class="dijitReset dijitInputInner" data-dojo-attach-point="textbox,focusNode" autocomplete="off" tabindex="8" id="new_salary_month" size="9" aria-required="true" data-value="1966.67" value="" aria-invalid="false" type="text"><input name="new_salary_month" value="1966.67" type="hidden"></div></div>
</td>
<td class="text-center updated_field updated_field_new" data-original="23,600.04" id="new_salary_year" data-value="23600.04">$23,600.04</td>
</tr>
<tr>
<td class="active width-cell-label">Sales</td>
<td class="text-center active " id="current_sales_month" data-value="">
<div class="dijit dijitReset dijitInline dijitLeft dijitTextBox dijitNumberTextBox dijitValidationTextBox form-control text-center center-block width-reset" id="widget_current_sales_month" role="presentation" widgetid="current_sales_month" lang="en"><div class="dijitReset dijitValidationContainer"><input class="dijitReset dijitInputField dijitValidationIcon dijitValidationInner" value="Χ " tabindex="-1" readonly="readonly" role="presentation" type="text"></div><div class="dijitReset dijitInputField dijitInputContainer"><input class="dijitReset dijitInputInner" data-dojo-attach-point="textbox,focusNode" autocomplete="off" tabindex="3" id="current_sales_month" size="9" aria-required="true" data-original="208,754" value="208,754" aria-invalid="false" type="text"><input name="oldMonthlySales" value="208754" type="hidden"></div></div>
</td>
<td class="text-center active updated_field border-right " id="current_sales_year" data-value="2505048">$2,505,048</td>
<td class="width-cell-label border-left hide-training training-hidden">Sales</td>
<td class="text-center hide-training training-hidden">
<div class="dijit dijitReset dijitInline dijitLeft dijitTextBox dijitNumberTextBox dijitValidationTextBox form-control text-center center-block width-reset" id="widget_new_sales_month" role="presentation" widgetid="new_sales_month" lang="en"><div class="dijitReset dijitValidationContainer"><input class="dijitReset dijitInputField dijitValidationIcon dijitValidationInner" value="Χ " tabindex="-1" readonly="readonly" role="presentation" type="text"></div><div class="dijitReset dijitInputField dijitInputContainer"><input class="dijitReset dijitInputInner" data-dojo-attach-point="textbox,focusNode" autocomplete="off" tabindex="9" id="new_sales_month" size="9" value="" aria-invalid="false" type="text"><input name="monthlySales" value="" type="hidden"></div></div>
</td>
<td class="text-center updated_field updated_field_new hide-training training-hidden" id="new_sales_year">-</td>
</tr>
<tr>
<td class="width-cell-label active">ICP %</td>
<td class="text-center active ">
<div class="dijit dijitReset dijitInline dijitLeft dijitTextBox dijitNumberTextBox dijitValidationTextBox form-control text-center center-block width-reset decimal-value" id="widget_current_icp_month" role="presentation" widgetid="current_icp_month" lang="en"><div class="dijitReset dijitValidationContainer"><input class="dijitReset dijitInputField dijitValidationIcon dijitValidationInner" value="Χ " tabindex="-1" readonly="readonly" role="presentation" type="text"></div><div class="dijitReset dijitInputField dijitInputContainer"><input class="dijitReset dijitInputInner" data-dojo-attach-point="textbox,focusNode" autocomplete="off" tabindex="4" id="current_icp_month" size="9" aria-required="true" data-value="25.11" data-original="25.11" value="25.11" aria-invalid="false" type="text"><input name="oldIcpPercent" value="25.11" type="hidden"></div></div>
</td>
<td class="text-center active updated_field border-right " id="current_icp_year"></td>
<td class="width-cell-label border-left hide-training training-hidden">ICP %</td>
<td class="text-center hide-training training-hidden">
<div class="dijit dijitReset dijitInline dijitLeft dijitTextBox dijitNumberTextBox dijitValidationTextBox form-control text-center center-block width-reset decimal-value hide-training training-hidden" id="widget_new_icp_month" role="presentation" widgetid="new_icp_month" lang="en"><div class="dijitReset dijitValidationContainer"><input class="dijitReset dijitInputField dijitValidationIcon dijitValidationInner" value="Χ " tabindex="-1" readonly="readonly" role="presentation" type="text"></div><div class="dijitReset dijitInputField dijitInputContainer"><input class="dijitReset dijitInputInner" data-dojo-attach-point="textbox,focusNode" autocomplete="off" tabindex="10" id="new_icp_month" size="9" data-value="" data-original="" value="" aria-invalid="false" type="text"><input name="icpPercent" value="" type="hidden"></div></div>
</td>
<td class="text-center hide-training training-hidden" id="new_icp_year"></td>
</tr>
<tr class="">
<td class="width-cell-label active border-bottom">Incentive Threshold</td>
<td class="text-center active border-bottom updated_field " id="current_incentive_month"></td>
<td class="text-center active border-bottom updated_field border-right " id="current_incentive_year"></td>
<td class="width-cell-label border-bottom border-left hide-training training-hidden">Incentive Threshold</td>
<td class="text-center border-bottom hide-training training-hidden">
<div class="dijit dijitReset dijitInline dijitLeft dijitTextBox dijitNumberTextBox dijitValidationTextBox form-control text-center center-block width-reset" id="widget_new_incentive_month" role="presentation" widgetid="new_incentive_month" lang="en"><div class="dijitReset dijitValidationContainer"><input class="dijitReset dijitInputField dijitValidationIcon dijitValidationInner" value="Χ " tabindex="-1" readonly="readonly" role="presentation" type="text"></div><div class="dijitReset dijitInputField dijitInputContainer"><input class="dijitReset dijitInputInner" data-dojo-attach-point="textbox,focusNode" autocomplete="off" tabindex="11" id="new_incentive_month" size="9" data-value="0" value="0" aria-invalid="false" type="text"><input name="incentiveThreshold" value="0" type="hidden"></div></div>
</td>
<td class="text-center border-bottom hide-training training-hidden" id="new_incentive_year"></td>
</tr>
<tr class=" hidden ca-hidden ca-hidden-new">
<td class="width-cell-label active ot_title_cell" id="current_ot_title" colspan="3">
</td>
<td class="active text-center hidden hide-dm updated_field" id="current_ot_month"></td>
<td class="active text-center hidden hide-dm updated_field border-right" id="current_ot_year">-</td>
<td class="width-cell-label border-left hidden ca-hidden ca-hidden-new dm-hidden">Overtime (8 hr/week)</td>
<td class="text-center updated_field updated_field_new hidden ca-hidden ca-hidden-new dm-hidden" id="new_ot_month"></td>
<td class="text-center updated_field updated_field_new hidden ca-hidden ca-hidden-new dm-hidden" id="new_ot_year">-</td>
</tr>
<tr class=" hidden ca-hidden ca-hidden-new">
<td id="current_ot_premium_title" class="width-cell-label active ot_title_cell" colspan="3">
</td>
<td class="active text-center hidden hide-dm updated_field" id="current_ot_premium_month"></td>
<td class="active text-center hidden hide-dm updated_field border-right" id="current_ot_premium_year">-</td>
<td class="width-cell-label border-left hidden ca-hidden ca-hidden-new dm-hidden hide-training training-hidden">OT Premium</td>
<td class="text-center updated_field updated_field_new hidden ca-hidden ca-hidden-new dm-hidden hide-training training-hidden" id="new_ot_premium_month"></td>
<td class="text-center updated_field updated_field_new hidden ca-hidden ca-hidden-new dm-hidden hide-training training-hidden" id="new_ot_premium_year">-</td>
</tr>
<tr class="backup_border ">
<td class="width-cell-label active" colspan="3">
</td>
<td class="text-center active updated_field hide-dm " id="current_sales_incentive_month">$0</td>
<td class="text-center active updated_field border-right hide-dm " id="current_sales_incentive_year">-</td>
<td class="width-cell-label border-left dm-hidden hide-training training-hidden">Sales Incentive</td>
<td class="text-center updated_field updated_field_new dm-hidden hide-training training-hidden" id="new_sales_incentive_month">$1,451</td>
<td class="text-center updated_field updated_field_new dm-hidden hide-training training-hidden" id="new_sales_incentive_year">-</td>
</tr>
<tr class="">
<td class="width-cell-label active">ICP Incentive</td>
<td class="text-center active updated_field " id="current_icp_incentive_month" data-value="524.181294">$524</td>
<td class="text-center active updated_field border-right " id="current_icp_incentive_year" data-value="6290.175528">$6,290</td>
<td class="width-cell-label border-left hide-training training-hidden">ICP Incentive</td>
<td class="text-center updated_field updated_field_new hide-training training-hidden" id="new_icp_incentive_month">$0</td>
<td class="text-center updated_field updated_field_new hide-training training-hidden" id="new_icp_incentive_year">-</td>
</tr>
<tr class=" hidden">
<td class="width-cell-label active">Incentive Offset</td>
<td class="text-center active ca-hidden hidden updated_field " id="current_incentive_offset_month">
$0
</td>
<td class="text-center active ca-hidden hidden updated_field" id="current_incentive_offset_year">
$0
</td>
<td class="border-left" colspan="3"></td>
</tr>
<tr class="">
<td class="active width-cell-label">Total Incentive</td>
<td class="text-center active updated_field" id="current_total_incentive_month" data-value="524.181294">$524</td>
<td class="text-center active updated_field border-right" id="current_total_incentive_year" data-value="6290.175528">$6,290</td>
<td class="width-cell-label border-left hide-training training-hidden">Total Incentive</td>
<td class="text-center updated_field updated_field_new hide-training training-hidden" id="new_total_incentive_month">$0</td>
<td class="text-center updated_field updated_field_new hide-training training-hidden" id="new_total_incentive_year">-</td>
</tr>
<tr>
<td class="width-cell-label border-bottom active">Three Check Compensation</td>
<td class="border-bottom active " id="current_three_check_month"></td>
<td class="border-bottom active text-center updated_field " id="current_three_check_year" data-value="419.3450352">$419</td>
<td class="width-cell-label border-bottom border-left">Three Check Compensation</td>
<td class="border-bottom text-center" id="new_three_check_month"></td>
<td class="border-bottom text-center updated_field updated_field_new" id="new_three_check_year" data-value="1200">$1,200</td>
</tr>
</tbody>
</table>
答案 0 :(得分:0)
我认为你必须在包装元素上将CSS隐藏类放在表格单元格内容而不是单元格本身上。
.hidden:not(td), td.hidden * {
display: none;
}
或者,如果您可以保证表格单元格中只包含元素(没有纯文本节点),您可以执行以下操作:
.hidden {
display: none;
}
$("td.hidden").removeClass("hidden").wrapInner("<div class='hidden'></div>");
或者如果您不介意使用JavaScript,您可以编写一些JavaScript来遍历所有表格单元格,并在其上定义类,使用隐藏类动态创建包装器div,并从表中删除隐藏类细胞
@SuppressWarnings("InstanceVariableMayNotBeInitialized")