table布局换行问题问题

table布局换行问题问题

  • 当单元格中写的是中文时,**设置了单元格宽度时,文字会自动换行 ** (只限中文)

  • 单元格内容是数字或字母时,单元格长度是由内容的撑开时,设置单元格宽度也会被撑开

  • 这时需要一个table属性来解决 table-layout 表格布局算法

    • ​ automatice 默认
    • ​ fixed 表格固定长度不会随内容的长度撑开
  • table {
      table-layout:fixed;
      }
    
  • 这样当你给单元格设置了固定的宽度时,内容就不会撑大单元格了·但是内容会超出单元格,

  • 这时就需要对td添加换行样式了。

  • p.test {
        word-wrap:break-word;//允许长单词换行到下一行:
        word-break:break-all;//允许在单词内换行。
       	white-space:normal; //空白会被浏览器忽略。
    }
    
  • 这样就达到了单元格换行的效果

其他table的属性

  • caption
      {
      caption-side:bottom;//设置表头位置
      }
    
  • table
      {
      border-collapse:separate;//合并单元格边框(折叠)
      empty-cells:hide;//hide	不在空单元格周围绘制边框。
    						show
      }
    
  • <table cellspacing="0">//单元格与单元格之间的距离
    <table cellpadding="0">//单元格中内容到单元格边框的距离(内边距)
    <td colspan="2">//合并列
    <td rowspan="2">//合并行
    
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页