title: Aligning buttons with a row in a table using css
body: <p>I'm trying to develop a table that can be used to edit database information (for non-database users).  Here's what I have (for html):</p>
  
  <pre><code>&lt;table id="myTable" cellspacing='0'&gt;
      &lt;tr&gt;&lt;th&gt;Column 1&lt;/th&gt;&lt;th&gt;Column 2&lt;/th&gt;&lt;th&gt;Column 3&lt;/th&gt;&lt;/tr&gt;
      &lt;tr id='1'&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;
      &lt;td style=" table-layout:fixed"&gt;
       &lt;div style="width:0px;overflow:visible;position:relative"&gt;
          &lt;a style="display:block;position:relative;left:20px"&gt;-&lt;/a&gt;
       &lt;/div&gt;
      &lt;/td&gt;
  
      &lt;/tr&gt;
      &lt;tr id='2' class='even'&gt;&lt;td&gt;3&lt;/td&gt;&lt;td&gt;5&lt;/td&gt;&lt;td&gt;8&lt;/td&gt;&lt;/tr&gt;
      &lt;tr id='3'&gt;&lt;td&gt;13&lt;/td&gt;&lt;td&gt;21&lt;/td&gt;&lt;td&gt;34&lt;/td&gt;&lt;/tr&gt;
      &lt;tr id='4' class='even'&gt;&lt;td&gt;55&lt;/td&gt;&lt;td&gt;89&lt;/td&gt;&lt;td&gt;144&lt;/td&gt;&lt;/tr&gt;
      &lt;tr id='5'&gt;&lt;td&gt;233&lt;/td&gt;&lt;td&gt;377&lt;/td&gt;&lt;td&gt;610&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  &lt;input class="addRow" type="button" value="+"&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Here's the CSS:</p>
  
  <pre><code>table {
      background: #E0F5F9;
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 20px;
      margin-bottom: 0px;
      border-style: solid;
      border-width: 2px;
      border-color: #1C9CBC;  
      -moz-border-radius:10px;
      -webkit-border-radius:10px;
      border-radius:10px;
  }
  
  table th {
      padding:4px 10px;
      background: #A8A8A8;
  }
  
  table td {
      background:#fff;
      padding:2px 10px 4px 10px;
  }
  
  div.editableTable {
      display: inline;
  }
  
  input.addRow {
      margin-left: 10px;
      border: solid 2px #1C9CBC;
      -moz-border-radius:10px;
      -webkit-border-radius:10px;
      border-radius:10px;
      padding-left: 5px;
      padding-right: 5px;
      background: #A8A8A8;
  
  }
  
  table tr.even td {background:#98E6F9}
  table tr td {
      background: #E0F5F9;
  }
  
  table tr.editing td {
      background: #FF0000;
  }
  
  table tr.selectedEven td {
      background: #98E6F9;
      border-left-width: 0px;
      border-top-width: 1px;
      border-bottom-width: 1px;
      border-right-width: 0px;
      border-style: solid;
      border-color: #03C100;
  }
  
  table tr.selectedEven td:first-child {
      border-left-width: 1px;
      border-top-width: 1px;
      border-bottom-width: 1px;
      border-right-width: 0px;
      border-style: solid;
      border-color: #03C100;
      -moz-border-radius-topleft:10px;
      -moz-border-radius-bottomleft:10px;
      -webkit-border-bottom-left-radius:10px;
      border-bottom-left-radius:10px;
      -webkit-border-top-left-radius:10px;
      border-top-left-radius:10px;
  }
  
  table tr.selectedEven td:last-child {
      border-left-width: 1px;
      border-top-width: 1px;
      border-bottom-width: 1px;
      border-right-width: 0px;
      border-style: solid;
      border-color: #03C100;
      -moz-border-radius-topright:10px;
      -moz-border-radius-bottomright:10px;
  }
  
  table tr.selectedEven td:last-child {
      border-left-width: 0px;
      border-top-width: 1px;
      border-bottom-width: 1px;
      border-right-width: 1px;
      border-style: solid;
      border-color: #03C100;
  }
  
  table tr.selected td {
      /* background: #E0F5F9; */
      border-left-width: 0px;
      border-top-width: 1px;
      border-bottom-width: 1px;
      border-right-width: 0px;
      border-style: solid;
      border-color: #03C100;
  }
  
  table tr.selected td:first-child {
      border-left-width: 1px;
      border-top-width: 1px;
      border-bottom-width: 1px;
      border-right-width: 0px;
      border-style: solid;
      border-color: #03C100;
      -moz-border-radius-topleft:10px;
      -moz-border-radius-bottomleft:10px;
      -webkit-border-bottom-left-radius:10px;
      border-bottom-left-radius:10px;
      -webkit-border-top-left-radius:10px;
      border-top-left-radius:10px;
  }
  
  table tr.selected td:last-child {
      border-left-width: 1px;
      border-top-width: 1px;
      border-bottom-width: 1px;
      border-right-width: 0px;
      border-style: solid;
      border-color: #03C100;
      -moz-border-radius-topright:10px;
      -moz-border-radius-bottomright:10px;
  }
  
  table tr.selected td:last-child {
      border-left-width: 0px;
      border-top-width: 1px;
      border-bottom-width: 1px;
      border-right-width: 1px;
      border-style: solid;
      border-color: #03C100;
  }
  
  table tr:last-child td:first-child {
      -moz-border-radius-bottomleft:10px;
      -webkit-border-bottom-left-radius:10px;
      border-bottom-left-radius:10px}
  
  table tr:last-child td:last-child {
      -moz-border-radius-bottomright:10px;
      -webkit-border-bottom-right-radius:10px;
      border-bottom-right-radius:10px
  }
  </code></pre>
  
  <p>And, here's what it looks like:
  <img src="https://i.stack.imgur.com/bro2w.png" alt="Table design, second try"></p>
  
  <p>This is fine, except that the delete button on the right side is a little off from the row.  This means that once we add ~13 or 14 rows, the delete button is way off from the row that it's going to be deleting.  Thus, it's unclear to the user exactly which row will be removed when they hit remove.</p>
  
  <p>I'd like to find some method that will allow me to align a button (or, in this case, a few buttons) with the row of the table in question, using CSS.  Is this possible? I tried initially (without success) to do this without a second table, but that led me to the current situation, where I have a table for alignment purposes only on the right of the table that actually contains the data.</p>
  
  <p>The big problem I'm faced with is that I can't seem to figure out how to align something with a row in a table. I could probably do it with jQuery, but this seems like taking a hammer to a screw. I'll admit I'm not as experienced at CSS as I am at programming, and so I usually tend to look to the programming answer. Can someone help me figure out how to have these buttons aligned correctly? </p>
  
  <p>Thank you!</p>