html - Make a table with a line under features to product 3 same with features 1&2. Make a vert line right of features to feature 3 same with product 1& 2 -
i want have vertical line between features , product way down. same between product 1&2 , product 2&3.
i want have horizontal under features , features 1&2 reaches way product 3.
<html> <head> <title>11-1</title> <style> .table { ; border-collapse: collapse; border-spacing: 0; border-width: 0; border-right: 0; border-left: 0; border-top: 0; border-bottom: ; text-align: center; width: 100%; } th { border: none; } tr td { border-left: none; border-right: none; } </style> <head> <body> <table class="table" border="1px"> <tr> <th style="background-color:silver;text-align:left ;">features</th> <th style="background-color:silver" ;>product 1</th> <th style="background-color:silver" ;>product 2</th> <th style="background-color:silver" ;>product 3</th> </tr> <tr> <td style="text-align:left" ;>feature 1</td> <td>x</td> <td></td> <td>x</td> </tr> <tr style="border-right:1" ;> <td style="text-align:left" ;>feature 2</td> <td></td> <td>x</td> <td>x</td> </tr> <tr style="border-bottom:none"> <td style="text-align:left" ;>feature 3</td> <td>x</td> <td>x</td> <td>x</td> </tr> </table> </body> </html>
from understand, have use :not()
along :first/last-of-type
achieve want.
.table { border-collapse: collapse; border-spacing: 0; border: 0; text-align: center; width: 100%; } td:not(:last-of-type) { border-right: 3px solid red } tbody tr:not(:first-of-type) td { border-bottom: 3px solid green } th { border: 0; background: silver } tr td { border: 0 } tr td:first-of-type, tr th:first-of-type { text-align: left }
<table class="table"> <tr> <th>features</th> <th>product 1</th> <th>product 2</th> <th>product 3</th> </tr> <tr> <td>feature 1</td> <td>x</td> <td></td> <td>x</td> </tr> <tr> <td>feature 2</td> <td></td> <td>x</td> <td>x</td> </tr> <tr> <td>feature 3</td> <td>x</td> <td>x</td> <td>x</td> </tr> </table>