input form

by sundaramkumar

HTML

<table width="410" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="210">&nbsp;</td>
    <td width="100"><b>Desired</b></td>
    <td width="100"><b>Achievable</b></td>
  </tr>
  <tr>
    <td>vPGW Flavour</td>
    <td><select>
    <option>Gold</option>
    </select></td>
    <td><input type="number" value="1" size="5" style="width:30px"/></td>
  </tr>    
  <tr>
    <td>Data Plane </td>
    <td><input type="number" value="10" size="5" class="readonly"/></td>
    <td></td>
  </tr>
  <tr>
    <td>Management </td>
    <td><input type="number" value="1" size="5" class="readonly"/></td>
    <td></td>
  </tr>
  <tr>
    <td>Services </td>
    <td><input type="number" value="15" size="5" class="readonly"/></td>
    <td></td>
  </tr>
  <tr>
    <td>Session </td>
    <td><input type="number" value="10" size="5" class="readonly"/></td>
    <td></td>
  </tr>  
<tr>
    <td>Data Throughput N-S (Gbps) </td>
    <td><input type="number" value="60" size="5"/></td>
    <td>60</td>
  </tr>
  <tr>
    <td>Data Throughput E-W (Gbps) </td>
    <td><input type="number" value="60" size="5"/></td>
    <td>60</td>
  </tr>
  <tr>
    <td>Virtual Links </td>
    <td><input type="number" value="100" size="5"/></td>
    <td>150</td>
  </tr>
  <tr>
    <td>Connection Points </td>
    <td><input type="number" value="2" size="5"/></td>
    <td>1</td>
  </tr>
  <tr>
    <td><select>
    <option>Nokia Airframe</option>
    </select> </td>
    <td><input type="number" value="2" size="5"/></td>
    <td><button value="Remove">Remove</button></td>
  </tr>

  <tr>
      <td colspan="3"><button value="Remove">Add new</button></td>
  </tr>
</table>

CSS

input,select{ width: 90px; font-family:Verdana,Tahoma,Arial;font-size:12px;}
tr{height:24px;}
html,body{
    font-family:Verdana,Tahoma,Arial;
    font-size:12px;
    background-color:#fff;
    }
input[type="number"].readonly {
  background-color : #d1d1d1; 
}