html - 使 bootstrap 4 单元格表现为条形图

Question

我正在使用 bootstrap 4 表。我希望其中一列在条形图中表现为条形(见附图)。我有条件宽度部分工作，但“栏”不会填充表格单元格的高度。谁知道如何让它填充单元格高度的 90%？注意，文本需要在“栏”中垂直居中

到目前为止用于获取栏的代码如下(省略不相关的位)

<div class="container">
    <div class="row">
        <div class="col-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <table class="table table-borderless">
                <thead>
                    <tr>
                        <!-- <th scope="col">Rank</th> -->
                        <th scope="col">Items</th>
                        <th scope="col">Number</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <div style="width: 75%; 
                                  background: rgb(128, 177, 133); 
                                  overflow:visible;">
                                Item 1
                            </div>
                        </td>
                        <td>
                            7
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

Answer 1

删除TD填充并添加

<td style="padding: 0;">
    <div style="width: 75%; background: rgb(128, 177, 133); 
         overflow:visible;  padding:0.75rem;">

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <table class="table table-borderless">
                <thead>
                    <tr>
                        <!-- <th scope="col">Rank</th> -->
                        <th scope="col">Items</th>
                        <th scope="col">Number</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td style="padding: 0;">
                            <div style="width: 75%; 
                                  background: rgb(128, 177, 133); 
                                  overflow:visible;  padding:0.75rem;">
                                Item 1
                            </div>
                        </td>
                        <td>
                            7
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>