CSS \\ HTML \\ Center buttons inside of a table

Question

I have 2 tables. 1 contains a table of text-boxes and the other contains buttons. I am able to center the table of text-boxes, but not the buttons.

HTML:

<div class="Input">
<table id="InputTable">
    <tr></tr>
        <th><input type="text" placeholder="foo"></th>
        <th><input type="text" placeholder="foo"></th>      
    <tr></tr>
        <th><input type="text" placeholder="foo3"></th>
        <th><input type="text" placeholder="foo"></th>
    <tr></tr>
        <th><input type="text" placeholder="foo"></th>
        <th><input type="text" placeholder="foo"></th>
</table>
</div>

<div class="Buttons">
<table id="ButtonTable">
    <tr>
<button id="A" type="button">foo</button>
<button id="B" type="button">foo</button>
<button id="C" type="button">foo</button>
    </tr>
</table>
</div>

CSS:

#InputTable, #ButtonTable
{
    margin: 0 auto;
}
button
{   
    background-color: #D3D3D3;
    color: black;
    border: none;    
    padding: 5px 15px;
    text-align: center;    
    margin: 4px 2px;    
}

I have also tried to use "table" in my CSS instead of calling the id's from the HTML separately.

Also tried to add the buttons and text-boxes in 1 table but that doesn't align my together, and I think it would be better to keep them separate as the buttons will be used to calculate values from the text-boxes.

Answer 1

You can place your buttons inside td tags:

#InputTable,
#ButtonTable {
  margin: 0 auto;
}

button {
  background-color: #D3D3D3;
  color: black;
  border: none;
  padding: 5px 15px;
  text-align: center;
  margin: 4px 2px;
}

<div class="Input">
  <table id="InputTable">
    <tr></tr>
    <th><input type="text" placeholder="foo"></th>
    <th><input type="text" placeholder="foo"></th>
    <tr></tr>
    <th><input type="text" placeholder="foo3"></th>
    <th><input type="text" placeholder="foo"></th>
    <tr></tr>
    <th><input type="text" placeholder="foo"></th>
    <th><input type="text" placeholder="foo"></th>
  </table>
</div>

<div class="Buttons">
  <table id="ButtonTable">
    <tbody>
      <tr>
        <td>
          <button id="A" type="button">foo</button>
        </td>
        <td>
          <button id="B" type="button">foo</button>
        </td>
        <td>
          <button id="C" type="button">foo</button>
        </td>
      </tr>
    </tbody>
  </table>
</div>