有谁知道css 表格布局，
0
[待解决问题]
有谁知道css 表格布局，看代码 ，想做这种单元格的合并然后让元素居中
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<style type="text/css">
.table
{
display:table;
text-align:center;
margin:auto;
}
.row
{
display:table-row;
}
.cell
{
display:table-cell;
padding:5px;
}
.label
{
text-align:right;
}
</style>
</head>
<body>
<form id="fruitform" method="post" action="localhost:80">
<div class="table">
<div class="row">
<div class="cell label">Banana:</div>
<div class="cell"><input name="bananas" value="2" /></div>
</div>
<div class="row">
<div class="cell label">apples:</div>
<div class="cell"><input name="apples" value="2" /></div>
</div>
<div class="row">
<div class="cell label">cherries:</div>
<div class="cell"><input name="cherries" value="2" /></div>
</div>
<div class="row">
<div class="cell label">File:</div>
<div class="cell"><input type="file" name="file" /></div>
</div>
<div class="row">
<div class="cell label">Total:</div>
<div id="results" class="cell">0 items</div>
</div>
<div class="row">
<div class="cell">
<button id="submit" type="submit">Submit form</button>
</div>
</div>
</div>
</form>
<script type="text/javascript">
document.getElementById("submit").onclick = handlebuttonpress;
var httpRequest;
function handlebuttonpress(e) {
e.preventDefault();
var form = document.getElementById("fruitform");
var formData = new FormData(form);
var httprequest = new XMLHttpRequest();
httprequest.onreadystatechange = handleresponse;
httprequest.open("POST", form.action);
httprequest.send(formData);
}
function handlereponse() {
if (httprequest.readyState == 4 && httprequest.status == 200) {
document.getElementById("results").innerhtml = httprequest.responseText;
}
}
</script>
</body>
</html>
所有回答(1)
0
这种的你问gpt就行了，这个问题简单。单元格合并使用rowspan和colspan属性，居中使用verlixxxxxxxxxxx开头的关键字，外加上text-align:center样式就可以了。注意里边的按钮需要是固定宽高的，不然全宽的话，你使用text-align进行居中也没有用，因为没有空余的空间了，另一个是使用flex和grid布局居中也可以。或者使用position的top属性外加transform这个css属性就行了。
gpt 是什么？rowspan 和colspan 是不是表格上有的？
