CSS: styling a spreadsheet

Styling a spreadsheet with CSS is not so difficult as it could seem. What we need is basically a table contained within a form and a series of inputs inside each table cell. This is the high point of our layout. It's all downhill from there. First of all, let's start with a basic HTML structure:

<form action="#" method="post" id="spreadsheet">


 <table summary="Speadsheet">
 
 
  <tr>
  
   <th scope="col" class="data">
     <span class="hidden">Data Number</span>
   </th>
   <th scope="col">A</th>
   <th scope="col">B</th>
   <th scope="col">C</th>
   <th scope="col">D</th>
   <th scope="col">E</th>
  </tr>
  
  <tr>
  
   <td class="number">1</td>
   <td><input type="text" name="a1" id="a1" /></td>
   <td><input type="text" name="b1" id="b1" /></td>
   <td><input type="text" name="c1" id="c1" /></td>
   <td><input type="text" name="d1" id="d1" /></td>
   <td><input type="text" name="e1" id="e1" /></td>
  
  
  </tr>
  
  <!--more rows-->
  
  </table>
  
  
</form>

The first table header doesn't need to be shown, so we're going to hide it in an accessible way. As you can see, each table cell contains an input element except the first one on each row. Here are our CSS styles:

#spreadsheet {
 margin: 0 auto;
 padding: 270px 0 2em 0;
 width: 550px;
 background: url(excel.png) no-repeat 50% 0;
}

#spreadsheet table {
 width: 100%;
 border-collapse: collapse;
 table-layout: fixed;
 font: 100% Arial, sans-serif;
}

#spreadsheet table th {
 width: 100px;
 background: gray;
 text-align: center;
 color: #fff;
 border-right: 1px solid gray;
}

#spreadsheet table th.data {
 width: 50px;
 background: #fff;
}

#spreadsheet table th.data span.hidden {
 position: absolute;
 top: -1000em;
}

#spreadsheet table td {
 width: 100px;
 border: 1px solid gray;
}

#spreadsheet table td input {
 display: block;
 width: 100%;
 border: none;
 font: 1em Arial, sans-serif;
 cursor: pointer;
}

#spreadsheet table td input:focus {
 outline-style: none;
}

#spreadsheet table td.number {
 width: 50px;
 text-align: center;
 font-size: 1.2em;
 color: gray;
 border: none;
}

Default input styles have been reset. Also, we've set a width of 100% for them so that they will stretch to cover the entire cell area. As you can see, we've explicitly set a font size and family to adjust their height. Since browsers apply a default outline to these inputs, we've also prevented them from applying their default action. You can see the demo below.

Demo

Live demo