我正在嘗試使 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>
2 回答
拉莫斯之舞
TA貢獻1820條經驗 獲得超10個贊
使用.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>
浮云間
TA貢獻1829條經驗 獲得超4個贊
普通桌
<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/[email protected]/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/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
- 2 回答
- 0 關注
- 237 瀏覽
添加回答
舉報
0/150
提交
取消