bootstrap4 横向表格 页面代码
效果图如下
代码如下
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>查询数据</title>
<th:block th:include="include/inc2::css"></th:block>
</head>
<body>
<div class="container-fluid" style="margin-top: 5px;">
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-info">项目:</button>
<div class="btn-group" role="group">
<select class="btn btn-secondary" name="projectId" id="projectId" onchange="reload()">
<option th:each="t:${projectList}"
th:value="${t.projectId}"
th:text="${t.projectName}">
</option>
</select>
</div>
</div>
<div class="form-group row ">
<div class="btn-group" role="group" aria-label="Basic example">
<button id="monthlyimagefp_btn" type="button" class="btn btn-primary bi bi-plus" onclick="monthlyimagefp_add()" >添加复盘目录</button>
</div>
</div>
<!-- 横向表格-->
<style>
.tablediv{overflow: auto; width: 100%;margin-right: 10px}
.tablediv table{border:1px ;width:3000px ;height:320px ;align:center}
.tablediv table tbody td{height:150px ;width: 180px}
.tablediv table tbody td img{height:120px ;width: 180px}
.tablediv table tbody td span{height:10px ;width: 10px;cursor: pointer}
</style>
<div class="tablediv" >
<table >
<thead>
<tr class="bg-info" align="center">
<th>序号</th> <th>效果图</th> <th>标题</th> <th>标题</th>
<!-- <td th:each="w,i:${dates}">-->
<!-- <span th:text="${w}"></span>-->
<!-- </td>-->
<th>添加现场图</th><th>操作</th><th></th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">1</td>
<td><img src="/static/images/pic_datang.jpg"></td>
<td align="center">大堂</td>
<td>
<div>
<img src="/static/images/pic_datang.jpg">
</div>
<div style="position: relative">
<button type="button" class="bi bi-eraser btn btn-success"></button>
<button type="button" class="bi bi-trash btn btn-danger" style="position: absolute;right: 5px"></button>
</div>
</td>
<td>
<div class="btn-group" role="group" aria-label="Basic example">
<button id="xctadd1_btn" type="button" class="btn btn-primary bi bi-plus" onclick="xct_add()" >添加大堂现场图</button>
</div>
</td>
<td align="center">
<button type="button" class="bi bi-eraser btn btn-success">修改</button>
<button type="button" class="bi bi-trash btn btn-danger">删除</button>
</td>
</tr>
<tr>
<td align="center">2</td>
<td><img src="/static/images/pic_wailimian.jpg"></td>
<td align="center">外立面</td>
<td>
<div>
<img src="/static/images/pic_datang.jpg">
</div>
<div style="position: relative">
<button type="button" class="bi bi-eraser btn btn-success"></button>
<button type="button" class="bi bi-trash btn btn-danger" style="position: absolute;right: 5px"></button>
</div>
</td>
<td>
<div class="btn-group" role="group" aria-label="Basic example">
<button id="xctadd2_btn" type="button" class="btn btn-primary bi bi-plus" onclick="xct_add()" >添加外立面现场图</button>
</div>
</td>
<td align="center">
<button type="button" class="bi bi-eraser btn btn-success">修改</button>
<button type="button" class="bi bi-trash btn btn-danger">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
</div></br>
</body>
<th:block th:include="include/inc2::js"></th:block>
<script>
function reload() {
var projectId = $("#projectId").val();
location.href = "/monthlyImage/query?projectId="+projectId;
}
</script>
</html>
2643
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
