layui表格内嵌套柱条
时间: 2023-12-21 07:31:01 浏览: 26
以下是使用layui表格内嵌套柱状图的示例代码:
```html
<div class="layui-table">
<table class="layui-table">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>18</td>
<td>北京</td>
<td>
<div style="width: 100px; height: 20px; background-color: #5FB878;">
<div style="width: 80%; height: 100%; background-color: #1E9FFF;"></div>
</div>
</td>
<td><button class="layui-btn layui-btn-sm">编辑</button></td>
</tr>
<tr>
<td>小红</td>
<td>20</td>
<td>上海</td>
<td>
<div style="width: 100px; height: 20px; background-color: #5FB878;">
<div style="width: 60%; height: 100%; background-color: #1E9FFF;"></div>
</div>
</td>
<td><button class="layui-btn layui-btn-sm">编辑</button></td>
</tr>
<tr>
<td>小刚</td>
<td>22</td>
<td>广州</td>
<td>
<div style="width: 100px; height: 20px; background-color: #5FB878;">
<div style="width: 40%; height: 100%; background-color: #1E9FFF;"></div>
</div>
</td>
<td><button class="layui-btn layui-btn-sm">编辑</button></td>
</tr>
</tbody>
</table>
</div>
```
在这个示例中,我们使用了一个div元素来嵌套柱状图。我们设置了div元素的宽度和高度,然后在其中嵌套了一个子div元素,用来表示柱状图的长度。我们可以通过设置子div元素的宽度来控制柱状图的长度。