CSS \\ HTML \\ Центрирование кнопок внутри таблицы - PullRequest
Новая
       9

CSS \\ HTML \\ Центрирование кнопок внутри таблицы

0 голосов
/ 10 октября 2018

У меня есть 2 таблицы.1 содержит таблицу текстовых полей, а другая содержит кнопки.Я могу центрировать таблицу текстовых полей, но не кнопки.

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;    
}

Я также пытался использовать «таблицу» в моем CSS вместо того, чтобы вызывать идентификаторы из HTML отдельно.

Также пытался добавить кнопки и текстовые поля в 1 таблицу, но это не совмещает меня, и я думаю, что было бы лучше держать их отдельно, так как кнопки будут использоваться для вычисления значений изтекст-боксы.

1 Ответ

0 голосов
/ 10 октября 2018

Вы можете разместить свои кнопки внутри тэгов: 

#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>
...