从HTML表中删除2个垂直边框 - 如何？

时间：2015-02-10 16:42:04

标签： html css html5

＆＃13;
＆＃13; 
table {
    border-collapse: collapse;
}
table td, table th {
    border: 1px solid black;
    text-align: center;  
	font-size: 18px;  
	font-weight: bold;
	color: black;
}
table tr:first-child th {
    border-top: 0;
}
table tr:last-child td {
    border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
    border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
    border-right: 0;
}
td.left {
	text-align: left;
	font-color: black;
}
td.left2 {
	text-align: left;
	font-color: black;
	border: 0;
vertical-align: middle;
}
td.noborder {
	border: 0; 
}
th.noborder {
	border: 0;
vertical-align: middle;
}
tr.noborder td, th {
	border: 0;
}
th.mini {
	background-color: #3a6179;
	color: #ffffff;
    font-size: 18px;
}
td.workbooks {
	background-color: #15125f;
	color: #ffffff;
	border-left: none;
}
td.salesforce {
	background-color: #019cdc;
	color: #ffffff;
	border-right: none;
#left { 
    display: none; 
    float: left; 
    width: 212px;
}
#right { 
    display: block;
    float: right;
    width: 100%;
＆＃13; 
<table>
	<tbody>
		<tr class="noborder">
			<td>
				&nbsp;</td>
			<th class="noborder" colspan="2">
				<img src="http://www.workbooks.com/sites/default/files/image/workbooks-logo.png" style="height: 66px; width: 250px;" /></th>
			<th class="noborder" colspan="2">
				<img src="http://www.workbooks.com/sites/default/files/image/SalesForce-Logo-web.png" style="height: 89px; width: 130px;" /></th>
		</tr>
		<tr class="noborder">
			<td class="left2">
				Independant user reviews</td>
			<td colspan="2">
				<img src="http://www.workbooks.com/sites/default/files/image/workbooks-stars_0.png" /></td>
			<td colspan="2">
				<img src="http://www.workbooks.com/sites/default/files/image/Salesforce-stars.png" /></td>
		</tr>
		<tr>
			<td class="left">
				Edition version</td>
			<td class="workbooks">
				CRM Edition</td>
			<td class="workbooks">
				Business</td>
			<td class="salesforce">
				Professional</td>
			<td class="salesforce">
				Enterprise</td>
		</tr>
		<tr>
			<td class="left">
				Typical cost per user per month</td>
			<td class="workbooks">
				£19</td>
			<td class="workbooks">
				£42</td>
			<td class="salesforce">
				£45</td>
			<td class="salesforce">
				£85</td>
		</tr>
		<tr>
			<td class="left">
				Contact Management</td>
			<td class="workbooks">
				<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td>
			<td class="workbooks">
				<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td>
			<td class="salesforce">
				<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td>
			<td class="salesforce">
				<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td>
		</tr>
		<tr>
			<td class="left">
				Opportunities, Quotes, Forecasting, Products</td>
			<td class="workbooks">
				<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td>
			<td class="workbooks">
				<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td>
			<td class="salesforce">
				<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td>
			<td class="salesforce">
				<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td>
		</tr>
		<tr>
			<td class="left">
				Case Management, Email2case, Web2case</td>
			<td class="workbooks">
				<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png"  /></td>
			<td class="workbooks">
				<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td>
			<td class="salesforce">
				<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td>
			<td class="salesforce">
				<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td>
		</tr>

		<tr>
			<td class="left">
				Marketing Campaigns</td>
			<td class="workbooks">
				<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png"/></td>
			<td class="workbooks">
				<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td>
			<td class="salesforce">
				<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td>
			<td class="salesforce">
				<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td>
		</tr>
		<tr>
			<td class="left">
				Reports &amp; Dashboards</td>
			<td class="workbooks">
				<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png"/></td>
			<td class="workbooks">
				<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td>
			<td class="salesforce">
				<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td>
			<td class="salesforce">
				<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td>
		</tr>
		<tr>
			<td class="left">
				Outlook Integration (1)</td>
			<td class="workbooks">
				<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png"  /></td>
			<td class="workbooks">
				<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td>
			<td class="salesforce">
				<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td>
			<td class="salesforce">
				<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td>
		</tr>
		<tr>
			<td class="left">
				Google Apps Integration</td>
			<td class="workbooks">
				<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td>
			<td class="workbooks">
				<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td>
			<td class="salesforce">
				<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td>
			<td class="salesforce">
				<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td>
		</tr>
		<tr>
			<td class="left">
				Mix and Match Licensing (2)</td>
			<td class="workbooks">
				<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png"  /></td>
			<td class="workbooks">
				<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td>
			<td class="salesforce">
				<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td>
			<td class="salesforce">
				<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td>
		</tr>
		<tr>
			<td class="left">
				Sales Order Processing</td>
			<td class="workbooks">
				&nbsp;</td>
			<td class="workbooks">
				<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td>
			<td class="salesforce">
				&nbsp;</td>
			<td class="salesforce">
				&nbsp;</td>
		</tr>
		<tr>
			<td class="left">
				Supplier Purchasing</td>
			<td class="workbooks">
				&nbsp;</td>
			<td class="workbooks">
				<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td>
			<td class="salesforce">
				&nbsp;</td>
			<td class="salesforce">
				&nbsp;</td>
		</tr>
		<tr>
			<td class="left">
				Invoicing &amp; Credit Notes</td>
			<td class="workbooks">
				&nbsp;</td>
			<td class="workbooks">
				<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td>
			<td class="salesforce">
				&nbsp;</td>
			<td class="salesforce">
				&nbsp;</td>
		</tr>
		<tr>
			<td class="left">
				Automation Engine</td>
			<td class="workbooks">
				<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td>
			<td class="workbooks">
				<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td>
			<td class="salesforce">
				&nbsp;</td>
			<td class="salesforce">
				<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td>
		</tr>
		<tr>
			<td class="left">
				Web Services API for Integration</td>
			<td class="workbooks">
				<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td>
			<td class="workbooks">
				<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td>
			<td class="salesforce">
				&nbsp;</td>
			<td class="salesforce">
				<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td>
		</tr>
		<tr>
			<td class="left">
				Profile and Page Layouts</td>
			<td class="workbooks">
				<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td>
			<td class="workbooks">
				<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td>
			<td class="salesforce">
				&nbsp;</td>
			<td class="salesforce">
				<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td>
		</tr>
		<tr>
			<td class="left">
				Sandboxes for Testing &amp; Development</td>
			<td class="workbooks">
				<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td>
			<td class="workbooks">
				<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td>
			<td class="salesforce">
				&nbsp;</td>
			<td class="salesforce">
				<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td>
		</tr>
		<tr>
			<td class="left">
				G2Crowd Customer Satisfaction Score (3):</td>
			<td class="workbooks" colspan="2">
				96</td>
			<td class="salesforce" colspan="2">
				89</td>
		</tr>
	</tbody>
</table>
<p><!--Comparison table ends here--></p>
＆＃13;
＆＃13;
＆＃13;

我想在我的HTML表格中删除第2和第4个垂直边框（线条）（在CRM版和商业/专业版和企业版之间显示），网址为：http://www.workbooks.com/workbooks-vs-salesforce

所以我的表格如下所示：http://www.workbooks.com/sites/default/files/image/new-lined-table-2.png

道歉我不能发布图片，因为我的代表太低了。

谢谢，

萨姆

4 个答案:

答案 0 :(得分：1)

我假设图像中的结果就是你所需要的。

.workbooks:nth-child(2), .salesforce:nth-child(4) {
    border-right:none;
}

.workbooks:nth-child(3), .salesforce:nth-child(5) {
    border-left:none;
}

答案 1 :(得分：0)

您是否尝试删除每个第2和第4行单元格的右边框？也许以下jQuery代码片段可以。

$.each($("#yourTableID tr:not(:first)"), function(index, element) {
   $.each($(this).find("td:nth-child(2)"), function(i, e) {
      $(this).css("border-right-style", "none");
   }};    
});

答案 2 :(得分：0)

只需删除垂直边框：

td.workbooks, td.salesforce {
    border-left: none;
    border-right: none;
}

单元格颜色已经整齐地提供了列的可视分隔符。

答案 3 :(得分：0)

将以下内容添加到“CRM Edition”和“Professional”列中的所有＆lt; td＆gt;（为它们添加一个类以便能够定位它们）。

border-right: none;

如果我误解你的问题，请道歉。如果您发布相关的HTML，我可以在JSFiddle中搞乱它。

相关问题
最新问题