设置方法如下:
1、用table{ }标签定义了表格宽度;
2、用td{ }标签定义了单元格宽度。
此时整个表格的每个单元格宽度都会设置成功。
如下案例:
<!DOCTYPE html>
<html>
<head>
<title>表格边框宽度</title>
<style>
<!-- 定义表格宽度及样式-->
table{
text-align:center
width:500px
border-width:6px
border-style:double
color:blue
}
<!-- 定义单元格宽度及样式 -->
td{
width:158px
border-width:3px
border-style:dashed
}
</style>
</head>
<body>
<table border=1 cellspacing="3" cellpadding="0">
<tr>
<td>姓名</td>
<td class=tds>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>31</td>
</tr>
<tr>
<td>李四 </td>
<td>男</td>
<td>18</td>
</tr>
</table>
</body>
</html>
column-count :指定元素应该分为的列数
column-fill:指定css如何填充列
column-gap:指定列之间的差距
column-rule:对于设置所有column-rule-*属性的简写属性
column-rule-color:指定列之间的颜色规则
column-rule-style:指定列之间的样式规则
column-rule-width:指定列之间的宽度规则
column-span:指定元素应该跨越多少列
column-width:指定列的宽度
columns缩写属性设置列宽和列数
break-inside: avoid //防止断裂
四种方式
比如想要做这样一个布局,有哪几种方式。
最简单、最快捷的方式。
element-ui提供的布局容器,el-header头标签,有height属性。el-aside左侧边栏标签,有width属性。el-footer底部标签,有height属性。其他样式可以通过class进行控制。
相对简单的方式。
利用el-col将每行分为24等分的特性,进行布局。其他属性通过class进行控制。
原生css布局的方式,float布局,也是最基础的方式。
将aside向左浮动,固定好宽度。main向右浮动,注意固定好宽度是 100vw - 左侧边栏的宽度 ,注意高度是 100vh - 上下header和footer高度之和 。footer也由于浮动而被挤到到最下面,这边指定float为left、right都是可以的,都可以达到浮动到最下方的效果。
原生css布局的方式,position布局,也是最基础的方式。
sideBar设置好宽度,利用绝对定位将固定在最左边(由于是绝对定位,所以注意已经脱离了文档流)。main设置margin-left为侧边栏宽度,这样就可以使得main不会被遮挡。footer设置为固定定位,bottom为0固定在底部。其他height、width的值也要注意计算哦~