Renders a table with input fields

by ethertank

HTML

<section>
  <table id="bCalc">
    <tbody>
      <tr>
        <th>L250</th>
        <td>
          <input type="number" min="0" max="20" />
          <input type="button" value="+" />
                    <input type="button" value="-" />

          </td>

      </tr>
      <tr>
        <th>L300</th>
        <td><input type="number" min="0" max="20" /></td>
      </tr>
      <tr>
        <th>L350</th>
        <td><input type="number" min="0" max="20" /></td>
      </tr>
      <tr>
        <th>L400</th>
        <td><input type="number" min="0" max="20" /></td>
      </tr>
      <tr>
        <th>L450</th>
        <td><input type="number" min="0" max="20" /></td>
      </tr>
      <tr>
        <th>L500</th>
        <td><input type="number" min="0" max="20" /></td>
      </tr>
      <tr>
        <th>L550</th>
        <td><input type="number" min="0" max="20" /></td>
      </tr>
      <tr>
        <th>L600</th>
        <td><input type="number" min="0" max="20" /></td>
      </tr>
      <tr>
        <th>L650</th>
        <td><input type="number" min="0" max="20" /></td>
      </tr>
    </tbody>
  </table>

  <table>
    <tbody>
      <tr>
        <th>U200</th>
        <td><input type="number" min="0" max="20" /></td>
      </tr>
      <tr>
        <th>U250</th>
        <td><input type="number" min="0" max="20" /></td>
      </tr>
      <tr>
        <th>U300</th>
        <td><input type="number" min="0" max="20" /></td>
      </tr>
      <tr>
        <th>U350</th>
        <td><input type="number" min="0" max="20" /></td>
      </tr>
      <tr>
        <th>U400</th>
        <td><input type="number" min="0" max="20" /></td>
      </tr>
      <tr>
        <th>U450</th>
        <td><input type="number" min="0" max="20" /></td>
      </tr>
      <tr>
        <th>U500</th>
        <td><input type="number" min="0" max="20" /></td>
      </tr>
      <tr>
        <th>U560</th>
        <td><input...

CSS

body {
  font-family:
    "Lucida Grande",
    "Lucida Sans", "Lucida Sans Regular",
    "Lucida Sans Unicode",
    "Geneva", "Verdana", sans-serif
  ;
  padding: 20px;
  font-size: .9em
  background: #fcfcfc;
}

section {
  padding: 10px;
}

table {
  display: inline-table;
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid black;
  margin: 0 10px 10px 0;
}

th, td { padding: 0.5em; border: 1px solid; }

tr:nth-child(odd) th{ background-color: #ccc; }
tr:nth-child(even) th{ background-color: #eee; }
tr:nth-child(odd) td{ background-color: #f0f0f0; }