我正在嘗試使 Boostrap 中一個(gè)表列的寬度適合內(nèi)容寬度。第一列的空間應(yīng)盡可能小。請(qǐng)參閱下面的代碼或 jsfiddle 我迄今為止嘗試過(guò)的內(nèi)容。感謝您提前提供任何幫助！預(yù)期結(jié)果：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>
2 回答
拉莫斯之舞
TA貢獻(xiàn)1820條經(jīng)驗(yàn) 獲得超10個(gè)贊
使用.w-auto表上的類(lèi)：
<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>
浮云間
TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超4個(gè)贊
普通桌
<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>
如果內(nèi)容不適合屏幕，如何自動(dòng)換行？就像我給出的例子一樣
我建議不要使用下面的代碼片段，因?yàn)樗木幋a方式并不溫和。
.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>
- 2 回答
- 0 關(guān)注
- 269 瀏覽
添加回答
舉報(bào)
0/150
提交
取消