Bootstrap表格列宽取决于内容宽度，列使用尽可能少的空间

Question

我正在尝试使 Boostrap 中一个表列的宽度适合内容宽度。第一列的空间应尽可能小。请参阅下面的代码或 jsfiddle 我迄今为止尝试过的内容。感谢您提前提供任何帮助！预期结果：Some HeadingSome text some text Some text some text Some text some text Some text some text:AAA:   Some Text AB:     Some Text BCCCCC: Some Text Chttps://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>

Answer 1

使用.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>

Answer 2

普通桌

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