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

Question

我正在尝试使 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>

Answer 1

使用.w-auto表上的类：<table class="table w-auto">&nbsp; <tr>&nbsp; &nbsp; <td>AAA:</td>&nbsp; &nbsp; <td>Some Text A</td>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td>B:</td>&nbsp; &nbsp; <td>Some Text B</td>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td>CCCCC:</td>&nbsp; &nbsp; <td>Some Text C</td>&nbsp; </tr></table>

Answer 2

普通桌<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"><div class="table-responsive">&nbsp; <table class="table w-auto">&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>AAA:</td>&nbsp; &nbsp; &nbsp; <td>Some Text A</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>B:</td>&nbsp; &nbsp; &nbsp; <td>Some Text B</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>CCCCC:</td>&nbsp; &nbsp; &nbsp; <td>Some Text C</td>&nbsp; &nbsp; </tr>&nbsp; </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 {&nbsp; &nbsp; display: flex;&nbsp; &nbsp; flex-wrap: wrap;}.table tr td:last-child {&nbsp; &nbsp; margin-left: auto;}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"><div class="table-responsive">&nbsp; <table class="table w-auto">&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>AAA:</td>&nbsp; &nbsp; &nbsp; <td>Some Text A</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>B:</td>&nbsp; &nbsp; &nbsp; <td>Some Text B</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>CCCCC:</td>&nbsp; &nbsp; &nbsp; <td>Some Text C</td>&nbsp; &nbsp; </tr>&nbsp; </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>