表格布局中设置行高

先看效果图:在线体验
其中输入框、按钮的样式在这篇文章里

表格布局中设置行高_第1张图片
table

1. 让表格的第一列文字向右对齐

假设可以找到 table 标签下面的所有 td 标签:

 table > tbody > tr > td:first-child {
    text-align: right;
}

2. 调节行高

2.1. 首先看一下行内元素与块级元素的区别:

  • 行内元素会再一条直线上,是在同一行的
  • 块级元素各占一行,是垂直方向的
  • 行内元素不可以控制宽和高

2.2. 常见的行内元素和块级元素:

块级元素:

...

      行内元素:

      2.3. 不可以给 tr 设置 marginpadding,但可以给 td 设置 padding

      原因:

      tabletr 默认 display: table-row ; , 虽可修改为 display: block; ,但会失去 tr 特有的显示效果,如 td 自动对齐。

      解决办法有三种 :

      • 可以通过给 td 设置 padding 修改行高;
      • 设置 line-height: 30px; 为你想要的高度;
      • table 设置
      table {
          border-spacing :  10px 10px ;
          }
          ```
          
      ### 3. 去掉表格的背景和边框等不需要的样式,并增加单元格间隙
      
      要增加单元格间隙,可以这样做:
      
      

      table {
      border-collapse: separate; /其实不写这句可以,因为 border-collapse 默认为 separate/
      border-spacing : 10px 10px ;
      }
      ```

      你可能感兴趣的:(表格布局中设置行高)