Chrome:隐藏单元格时桌面上缺少边框

时间:2018-01-12 17:58:41

标签: html css google-chrome html-table

我有一个标准的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>

Borders Visible in Firefox

Borders Missing in Chrome

1 个答案:

答案 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")