Привет. Как я могу создать bootstrap бордере стол, как это - PullRequest
0 голосов
/ 07 февраля 2020

Я бы хотел, чтобы первые два столбца занимали только ширину их содержимого, а последний 3-й столбец должен быть выровнен вправо с промежутком (если есть) между 2-м и 3-м столбцами, как показано ниже. На схеме я пометил это как большой пустой столбец.

+-------+------+-------------------+------+
| Col1  | Col2 |                   | Col3 |
+-------+------+-------------------+------+
| Val 1 | Val2 |                   | Val3 |
+-------+------+-------------------+------+

Некоторые ограничения:

  • Я могу использовать только bootstrap.
  • Я не могу используйте любые пользовательские стили.

Я пробовал это следующим образом, но это не работает.

<table class="table table-bordered">
    <thead>
        <tr class="row">
             <td class="col-md-1">col1</td>
             <td class="col-md-1">col2</td>
             <td class="col-md-9"></td>
             <td class="col-md-1">col3</td>
        </tr>
   </thead>
   <tbody>
        <tr class="row">
             <td class="col-md-1">val1</td>
             <td class="col-md-1">val2</td>
             <td class="col-md-9"></td>
             <td class="col-md-1">val3</td>
        </tr>
   </tbody>
</table>

1 Ответ

1 голос
/ 07 февраля 2020

Bootstrap 4

<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>


  </tbody>
</table>

Bootstrap 3

<table class="table table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>

Проверьте, какую версию вы используете для bootstrap. Если какой-либо из приведенных выше кодов не работает, проверьте, правильно ли вы импортировали bootstrap.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...