Bootstrap ширина столбца таблицы в зависимости от ширины содержимого, столбец использует как можно меньше места - PullRequest
Новая
       5

Bootstrap ширина столбца таблицы в зависимости от ширины содержимого, столбец использует как можно меньше места

0 голосов
/ 06 апреля 2020

Я пытаюсь сделать так, чтобы ширина одного столбца таблицы в Boostrap соответствовала ширине содержимого. Первый столбец должен занимать как можно меньше места. См. Ниже код или jsfiddle, что я пробовал до сих пор.

Спасибо за любую помощь заранее!

Точный результат: 

Some Heading
Some text some text Some text some text Some text some text Some text some text:

AAA:   Some Text A
B:     Some Text B
CCCCC: Some Text C

https://jsfiddle.net/ne45y0gm/

<h4>Some Heading</h4>
<p class="mb-1">Some text some text Some text some text Some text some text Some text some text:</p>

<table class="table table-sm table-borderless">
  <tr class="row">
      <td class="col-sm-auto">AAA:</td>
      <td class="col">Some Text A</td>
  </tr>
  <tr class="row">
      <td class="col-sm-auto">B:</td>
      <td class="col">Some Text B</td>
  </tr>
  <tr class="row">
      <td class="col-sm-auto">CCCCC:</td>
      <td class="col">Some Text C</td>
  </tr>
</table>

<hr>

<div class="row">
  <div class="col-sm-auto">AAA:</div>
  <div class="col">Some Text A</div>
</div>
<div class="row">
  <div class="col-sm-auto">B:</div>
  <div class="col">Some Text B</div>
</div>
<div class="row">
  <div class="col-sm-auto">CCCCC:</div>
  <div class="col">Some Text C</div>
</div>

<hr>

<div class="row">
  <div class="col-sm-2">AAA:</div>
  <div class="col-sm-10">Some Text A</div>
  <div class="col-sm-2">B:</div>
  <div class="col-sm-10">Some Text B</div>
  <div class="col-sm-2">CCCCC:</div>
  <div class="col-sm-10">Some Text C</div>
</div>

Ответы [ 2 ]

0 голосов
/ 07 апреля 2020

РЕГУЛЯРНЫЙ СТОЛ 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="table-responsive">
  <table class="table w-auto">
    <tr>
      <td>AAA:</td>
      <td>Some Text A</td>
    </tr>
    <tr>
      <td>B:</td>
      <td>Some Text B</td>
    </tr>
    <tr>
      <td>CCCCC:</td>
      <td>Some Text C</td>
    </tr>
  </table>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

как автоматически разбить столбец, если содержимое не умещается на экране? как в моем приведенном примере

Я предлагаю не использовать приведенный ниже фрагмент из-за его ненадежного способа кодирования. 

.table tr {
    display: flex;
    flex-wrap: wrap;
}

.table tr td:last-child {
    margin-left: auto;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="table-responsive">
  <table class="table w-auto">
    <tr>
      <td>AAA:</td>
      <td>Some Text A</td>
    </tr>
    <tr>
      <td>B:</td>
      <td>Some Text B</td>
    </tr>
    <tr>
      <td>CCCCC:</td>
      <td>Some Text C</td>
    </tr>
  </table>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
0 голосов
/ 06 апреля 2020

Используйте класс .w-auto на столе: 

<table class="table w-auto">
  <tr>
    <td>AAA:</td>
    <td>Some Text A</td>
  </tr>
  <tr>
    <td>B:</td>
    <td>Some Text B</td>
  </tr>
  <tr>
    <td>CCCCC:</td>
    <td>Some Text C</td>
  </tr>
</table>
...