如何避免table自动换行

发表于 | 分类于

HTML的表格渲染很特殊，当单元格的内容过长，就会自动换行，导致表格的显示很凌乱。
只要添加2行css代码就可以解决这个问题。

  1. 对table元素，应用css代码：

    1
    2
    3
    4
    /*让文本在同一行继续*/
    table{
        white-space:nowrap
    }

  2. 给table的父元素添加样式：

    1
    2
    3
    .table-wraper{
       overflow:auto; 
    }

不过这样生成的滚动条很随性。如果追求美观，需要再调整一下滚动条的样式。