html - 如何在页面上放置表格
问题描述
我怎样才能让它们更紧凑
这是我的 html 代码
<body>
<form action="/cgi-bin/form.py" id="myform">
<table class="table-fill">
...
</table>
<table class="table-fill">
...
</table>
...
</table>
<input type="submit" name="add" value="Submit" form="myform"/>
</form>
</body>
这是我的餐桌风格
.table-fill {
background: white;
border-radius:3px;
border-collapse: collapse;
height: 120px;
margin: auto;
max-width: 100px;
padding:5px;
}
我的提交风格
input[type=submit] {
padding:10px 15px;
background:#ccc;
border:0 none;
cursor:pointer;
-webkit-border-radius: 5px;
border-radius: 5px;
margin: auto;
display: block;
}
解决方案
一种方法是简单地使用display: inline-block
您的表格样式并调整边距
.table-fill {
display: inline-block;
background: white;
border-radius:3px;
border-collapse: collapse;
border-color: 1px solid #000;
height: 120px;
max-width: 100px;
padding:5px;
margin: 5px;
width: 100%;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
animation: float 5s infinite;
}
input[type=submit] {
padding:10px 15px;
background:#ccc;
border:0 none;
cursor:pointer;
-webkit-border-radius: 5px;
border-radius: 5px;
margin: auto;
display: block;
font-size: 14px;
font-weight: 300;
margin-top: 10px
}
<div class="table-fill">block 1</div>
<div class="table-fill">block 2</div>
<div class="table-fill">block 3</div>
<div class="table-fill">block 4</div>
<div class="table-fill">block 5</div>
<input type="submit"/>
或者制作一个容器并使用flex
它将更容易自动居中表格:
.container {
display: flex;
align-items: center;
justify-content: center;
}
.table-fill {
background: white;
border-radius:3px;
border-collapse: collapse;
border-color: 1px solid #000;
height: 120px;
max-width: 100px;
padding:5px;
margin: 5px;
width: 100%;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.8);
animation: float 5s infinite;
}
input[type=submit] {
padding:10px 15px;
background:#ccc;
border:0 none;
cursor:pointer;
-webkit-border-radius: 5px;
border-radius: 5px;
margin: auto;
display: block;
font-size: 14px;
font-weight: 300;
margin-top: 10px
}
<div class="container">
<div class="table-fill">block 1</div>
<div class="table-fill">block 2</div>
<div class="table-fill">block 3</div>
<div class="table-fill">block 4</div>
<div class="table-fill">block 5</div>
</div>
<input type="submit"/>
推荐阅读
- java - 如何为游戏生成随机伤害点?- 爪哇
- java - 向 Boomi - Java/“Groovy”脚本映射函数中没有偏移量的日期字符串添加偏移量
- php - 如何在 Laravel 中为路由添加“admin”前缀?
- php - 如何对数组进行分组和挂载选择
- java - 如何根据行对象条件 NatTable 为行标题单元格设置标签
- python - 对于给定条件,获取 2D 张量 A 中的值的索引,使用这些索引来索引 3D 张量 B
- json - mvc json 产品列表
- r - 根据两个标准分配渐进式 ID
- jquery - 如何更改语义 UI 下拉菜单的搜索算法?
- html - 无法将某些 html 元素与纯 css 对齐?