从HTML表中删除2个垂直边框 - 如何？ [英] Remove 2 vertical borders from HTML table - how?
本文介绍了从HTML表中删除2个垂直边框 - 如何？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
table {border-collapse：collapse;} table td，table th {border：1px solid black; text-align：center; font-size：18px; font-weight：bold;颜色：黑色;} 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;颜色：#ffffff; font-size：18px;} td.workbooks {background-color：＃15125f;颜色：#ffffff; border-left：none;} td.salesforce {background-color：＃019cdc;颜色：#ffffff; border-right：none; #left {display：none;向左飘浮; width：212px;}＃right {display：block; float：right; width：100％;
< table> < TBODY> < tr class =noborder> < TD> &安培; NBSP;< / TD> < th class =nobordercolspan =2> < img src =http://www.workbooks.com/sites/default/files/image/workbooks-logo.pngstyle =height：66px; width：250px; />< /第> < th class =nobordercolspan =2> < img src =http://www.workbooks.com/sites/default/files/image/SalesForce-Logo-web.pngstyle =height：89px; width：130px; />< /第> < / TR> < tr class =noborder> < td class =left2>独立用户评论< / 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>版本版本< / td> < td class =workbooks> CRM版本< / td> < td class =workbooks>商业与LT; / TD> < td class =salesforce>专业与LT; / TD> < td class =salesforce>企业和LT; / TD> < / TR> < TR> < td class =left>每个用户每月的典型成本< / 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>联系人管理< / 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>机会，行情，预测，产品< / 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>案例管理，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>营销活动< / 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>报告和报告仪表板< / 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整合（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集成< / 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>混合和匹配许可（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>销售订单处理< / 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>供应商采购< / 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>发票& amp; amp;信用票据< / 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>自动化引擎< / 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服务API< / 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>个人资料和页面布局< / 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>用于测试和测试的沙箱开发与LT; / 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顾客满意度得分（3）：< / td> < td class =workbookscolspan =2> 96 LT; / TD> < td class =salesforcecolspan =2> 89< / TD> < / TR> < / tbody>< / table>< p><！ - 比较表在此结束 - >< / p>
我想在我的HTML表格中删除第2和第4个垂直边框（线条）（显示在CRM版本和Business / Professional和Enterprise之间）发现在： http://www.workbooks.com/workbooks-vs-salesforce
所以我的表格如下所示： http://www.workbooks.com/sites/default/files/image/new-lined-table-2.png
道歉我无法发布图片，因为我的代表太低。
谢谢，
解决方案
只需删除垂直边框即可：
td.workbooks，td.salesforce {
border-left：none;
border-right：none;
}
单元格颜色已经整齐地提供了列的可视分隔符。
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%;
<table>
<tbody>
<tr class="noborder">
<td>
</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 & 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">
</td>
<td class="workbooks">
<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td>
<td class="salesforce">
</td>
<td class="salesforce">
</td>
</tr>
<tr>
<td class="left">
Supplier Purchasing</td>
<td class="workbooks">
</td>
<td class="workbooks">
<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td>
<td class="salesforce">
</td>
<td class="salesforce">
</td>
</tr>
<tr>
<td class="left">
Invoicing & Credit Notes</td>
<td class="workbooks">
</td>
<td class="workbooks">
<img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td>
<td class="salesforce">
</td>
<td class="salesforce">
</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">
</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">
</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">
</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 & 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">
</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>
I'd like to remove the 2nd and 4th vertical borders (lines) (Shown between CRM edition and Business/Professional and Enterprise) in my HTML table found at: http://www.workbooks.com/workbooks-vs-salesforce
So my table will look like the following: http://www.workbooks.com/sites/default/files/image/new-lined-table-2.png
Apologies I can't post images since my rep is too low.
Thanks,
Sam
解决方案
Just remove the vertical borders:
td.workbooks, td.salesforce {
border-left: none;
border-right: none;
}
The cell colors already neatly provide the visual separator of columns.
这篇关于从HTML表中删除2个垂直边框 - 如何？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
