MAAC inv table

MAAC inv table

by pj_js15

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<table class="investment-options">
  <tr>
    <th>Product name</th>
    <th>Amount invested $</th>
    <th>% of portfolio</th>
    <th>Management Cost %</th>
    <th>&nbsp;</th>
  </tr>
  <tr class="odd">
    <td>Sample Investment Option (001)</td>
    <td>
      <input type="text" class="txt-amount-inv" />
    </td>
    <td>0%</td>
    <td>1.14% <i class="fa fa-info-circle info" aria-hidden="true"></i></td>
    <td><i class="fa fa-trash-o delete" aria-hidden="true"></i></td>
  </tr>
  <tr class="even">
    <td>Another Investment Option (002)</td>
    <td>
      <input type="text" class="txt-amount-inv" />
    </td>
    <td>0%</td>
    <td>1.14% <i class="fa fa-info-circle info" aria-hidden="true"></i></td>
    <td><i class="fa fa-trash-o delete" aria-hidden="true"></i></td>
  </tr>
  <tr class="odd">
    <td class="search-container" colspan="5">
      <input type="text" class="txt-search-inv-opt" placeholder="Begin typing to search" />
    </td>
  </tr>
  <tr class="last-row">
    <td>Total</td>
    <td>$0</td>
    <td>0%</td>
    <td></td>
    <td></td>
  </tr>
</table>

CSS

* {
  font-family: Arial;
  font-size: 13px;
}

table.investment-options {
  border-collapse: collapse;
  width: 100%;
}

th,
.last-row td {
  background-color: #007ACC;
  color: #FFF;
  padding: 10px 20px;
}

td {
  text-align: center;
  padding: 10px;
}

tr.odd{
  background-color: #FFF;
}
tr.even{
  background-color: #F9F9F9;
}

table tr th {}

.txt-amount-inv {
  margin: 0 auto;
  padding: 10px;
  width: 80px;
}

i.info{
  color: #007ACC;
}
i.delete{
  color: #B0B0B0;
  font-size: 16px;
}

.txt-search-inv-opt {
  padding: 10px;
  width: 96%;
}

.search-container {
  padding: 10px;
}