從HTML表中刪除2個垂直邊框 - 如何？

table { 
 
    border-collapse: collapse; 
 
} 
 
table td, table th { 
 
    border: 1px solid black; 
 
    text-align: center; 
 
\t font-size: 18px; 
 
\t font-weight: bold; 
 
\t 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 { 
 
\t text-align: left; 
 
\t font-color: black; 
 
} 
 
td.left2 { 
 
\t text-align: left; 
 
\t font-color: black; 
 
\t border: 0; 
 
vertical-align: middle; 
 
} 
 
td.noborder { 
 
\t border: 0; 
 
} 
 
th.noborder { 
 
\t border: 0; 
 
vertical-align: middle; 
 
} 
 
tr.noborder td, th { 
 
\t border: 0; 
 
} 
 
th.mini { 
 
\t background-color: #3a6179; 
 
\t color: #ffffff; 
 
    font-size: 18px; 
 
} 
 
td.workbooks { 
 
\t background-color: #15125f; 
 
\t color: #ffffff; 
 
\t border-left: none; 
 
} 
 
td.salesforce { 
 
\t background-color: #019cdc; 
 
\t color: #ffffff; 
 
\t border-right: none; 
 
#left { 
 
    display: none; 
 
    float: left; 
 
    width: 212px; 
 
} 
 
#right { 
 
    display: block; 
 
    float: right; 
 
    width: 100%;

<table> 
 
\t <tbody> 
 
\t \t <tr class="noborder"> 
 
\t \t \t <td> 
 
\t \t \t \t &nbsp;</td> 
 
\t \t \t <th class="noborder" colspan="2"> 
 
\t \t \t \t <img src="http://www.workbooks.com/sites/default/files/image/workbooks-logo.png" style="height: 66px; width: 250px;" /></th> 
 
\t \t \t <th class="noborder" colspan="2"> 
 
\t \t \t \t <img src="http://www.workbooks.com/sites/default/files/image/SalesForce-Logo-web.png" style="height: 89px; width: 130px;" /></th> 
 
\t \t </tr> 
 
\t \t <tr class="noborder"> 
 
\t \t \t <td class="left2"> 
 
\t \t \t \t Independant user reviews</td> 
 
\t \t \t <td colspan="2"> 
 
\t \t \t \t <img src="http://www.workbooks.com/sites/default/files/image/workbooks-stars_0.png" /></td> 
 
\t \t \t <td colspan="2"> 
 
\t \t \t \t <img src="http://www.workbooks.com/sites/default/files/image/Salesforce-stars.png" /></td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td class="left"> 
 
\t \t \t \t Edition version</td> 
 
\t \t \t <td class="workbooks"> 
 
\t \t \t \t CRM Edition</td> 
 
\t \t \t <td class="workbooks"> 
 
\t \t \t \t Business</td> 
 
\t \t \t <td class="salesforce"> 
 
\t \t \t \t Professional</td> 
 
\t \t \t <td class="salesforce"> 
 
\t \t \t \t Enterprise</td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td class="left"> 
 
\t \t \t \t Typical cost per user per month</td> 
 
\t \t \t <td class="workbooks"> 
 
\t \t \t \t £19</td> 
 
\t \t \t <td class="workbooks"> 
 
\t \t \t \t £42</td> 
 
\t \t \t <td class="salesforce"> 
 
\t \t \t \t £45</td> 
 
\t \t \t <td class="salesforce"> 
 
\t \t \t \t £85</td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td class="left"> 
 
\t \t \t \t Contact Management</td> 
 
\t \t \t <td class="workbooks"> 
 
\t \t \t \t <img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td> 
 
\t \t \t <td class="workbooks"> 
 
\t \t \t \t <img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td> 
 
\t \t \t <td class="salesforce"> 
 
\t \t \t \t <img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td> 
 
\t \t \t <td class="salesforce"> 
 
\t \t \t \t <img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td class="left"> 
 
\t \t \t \t Opportunities, Quotes, Forecasting, Products</td> 
 
\t \t \t <td class="workbooks"> 
 
\t \t \t \t <img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td> 
 
\t \t \t <td class="workbooks"> 
 
\t \t \t \t <img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td> 
 
\t \t \t <td class="salesforce"> 
 
\t \t \t \t <img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td> 
 
\t \t \t <td class="salesforce"> 
 
\t \t \t \t <img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td class="left"> 
 
\t \t \t \t Case Management, Email2case, Web2case</td> 
 
\t \t \t <td class="workbooks"> 
 
\t \t \t \t <img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td> 
 
\t \t \t <td class="workbooks"> 
 
\t \t \t \t <img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td> 
 
\t \t \t <td class="salesforce"> 
 
\t \t \t \t <img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td> 
 
\t \t \t <td class="salesforce"> 
 
\t \t \t \t <img src="http://www.workbooks.com/sites/default/files/image/tick-new.png" /></td> 
 
\t \t </tr> 
 

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

我想刪除第2和第4個垂直邊框（系）在我的HTML表（CRM版和商業/專業版和企業之間所示）發現在：http://www.workbooks.com/workbooks-vs-salesforce

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

道歉我無法發佈圖片，因爲我的代表太低。

感謝，

山姆

來源

2015-02-10 Stack Over

您的代表不會影響您發表小提琴的能力。 – 2015-02-10 16:49:39

只需添加一個指定沒有垂直邊框的類到適當的'td'元素中？ – sebnukem 2015-02-10 16:49:40

@SleekGeek在我的關卡中最多允許兩個鏈接。 – 2015-02-10 16:52:14

只需卸下垂直邊框：

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

單元色已經整齊地提供列的視覺分離。

來源

2015-02-10 16:57:31 sebnukem

他不想刪除所有的td邊框。 – Veverke 2015-02-10 16:58:01

謝謝，也似乎沒有工作？ – 2015-02-10 17:29:13

缺少一個括號！工作過一種享受！我同意發生自然分離的顏色差異。 – 2015-02-10 17:30:20

你有沒有嘗試刪除每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"); 
    }};  
});

來源

2015-02-10 16:47:43 Veverke

爲什麼不使用css？ – TreeTree 2015-02-10 16:49:56

@TreeTree - 我無法想出一個只用css的解決方案。如果你有一個，請分享:-) – Veverke 2015-02-10 16:54:11

簡單地遍歷每個偶數單元都不會，因爲每行有5個單元，他需要每行的第2個和第4個單元。 – Veverke 2015-02-10 16:55:33

我假設圖像中的結果是您所需要的。

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

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

來源

2015-02-10 16:57:55 TreeTree

以下添加到所有<TD> S IN的「CRM版」和「專業」列（一類添加到他們能夠針對他們）。

border-right: none;

道歉，如果我誤解你的問題。如果您發佈了相關的HTML，我可以在JSFiddle中解決它。

來源

2015-02-10 16:59:02

不用擔心，我已經發布了相關的CSS。感謝您的回答，但是我嘗試添加邊界 - 但它沒有工作？ – 2015-02-10 17:16:03

從HTML表中刪除2個垂直邊框 - 如何？

回答

相關問題