2

Нужна помощь, чтобы получить таблицу вот такого вида:Что нужно получить

Меня интересует именно как сделать такие блоки.

Отрывок того, что получилось у меня:

что есть сейчас

.train-seats {
  border-collapse: separate;
  border: 1px solid black;
}

.train-seats tr td {
  width: 31px;
  border: 1px solid black;
  margin: 0;
}
<div class="seats">
  <table class="train-seats">
    <tr>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
    <tr>
      <td><input type="checkbox">1</td>
      <td><input type="checkbox">3</td>
      <td><input type="checkbox">5</td>
      <td><input type="checkbox">7</td>
    </tr>
    <tr>
      <th></th>
    </tr>
    <tr>
      <td><input type="checkbox">2</td>
      <td><input type="checkbox">4</td>
      <td><input type="checkbox">6</td>
      <td><input type="checkbox">8</td>
    </tr>
  </table>
</div>

1 ответ 1

2

Держи:

.train-seats {
  border-collapse: separate;
  border: 1px solid gray;
  border-radius: 10px;
  padding:10px;
}

.train-seats table tr td {
  width: 36px;
  border: 1px solid gray;
  margin: 0;
}

.train-seats table{
 border: 0.5px solid gray;
}
<div class="seats">
  <table class="train-seats" cellspacing="3">
    <tr>
      <td>
      
        <table cellspacing="1">
          <tr>
            <td><input type="checkbox">1</td>
            <td><input type="checkbox">2</td>
          </tr>
          <tr>
            <td><input type="checkbox">9</td>
            <td><input type="checkbox">10</td>
          </tr>
        </table>
      
      </td>
      <td>
      
        <table cellspacing="1">
            <tr>
              <td><input type="checkbox">3</td>
              <td><input type="checkbox">4</td>
            </tr>
            <tr>
              <td><input type="checkbox">11</td>
              <td><input type="checkbox">12</td>
            </tr>
        </table>
      
      </td>
      <td>
      
        <table cellspacing="1">
            <tr>
              <td><input type="checkbox">5</td>
              <td><input type="checkbox">6</td>
            </tr>
            <tr>
              <td><input type="checkbox">13</td>
              <td><input type="checkbox">14</td>
            </tr>
        </table>
      
      </td>
      <td>
      
        <table cellspacing="1">
            <tr>
              <td><input type="checkbox">7</td>
              <td><input type="checkbox">8</td>
            </tr>
            <tr>
              <td><input type="checkbox">15</td>
              <td><input type="checkbox">16</td>
            </tr>
        </table>
      
      </td>
    </tr>    
  </table>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.