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>


Popular posts from this blog

php - How should I create my API for mobile applications (Needs Authentication) -

5 Reasons to Blog Anonymously (and 5 Reasons Not To)

Google AdWords and AdSense - A Dynamic Small Business Marketing Duo