关于html table 固定列宽 

.t3 {
            width: 100%;
            table-layout: fixed; 
        }

        .t3 td, .t3 th {
            white-space: nowrap;
            word-break: break-all;
            overflow: hidden;
            text-overflow: ellipsis;
        }
  • t1未经修饰的table；t2百分百宽度；t3固定列宽，文字过多显示省略号，如果table超过容器宽度，有滚动条。

完整代码如下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container {
            width: 500px;
            background: #ccc;
            margin: 0 auto;
            overflow: auto;
        }

        table , table td, table, th{
            border: 1px solid red;
            border-collapse: collapse;
        }

        .t1 {}

        .t2 {
            width: 100%;
        }

        .t3 {
            width: 100%;
            table-layout: fixed; 
        }

        .t3 td, .t3 th {
            white-space: nowrap;
            word-break: break-all;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>t1原始table</h2>
        <table class="t1">
            <thead>
                <tr>
                    <th>hello</th>
                    <th>world</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>faff</td>
                    <td>faff</td>
                </tr>
            </tbody>
        </table>
    <br>
    <h2>t2宽度100%</h2>
        <table class="t2">
            <thead>
                <tr>
                    <th>hello</th>
                    <th>world</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>faff</td>
                    <td>faff</td>
                </tr>
            </tbody>
        </table>
<br>
<h2>t3有滚动条</h2>
        <table class="t3">
            <thead>
                <tr>
                    <th style="width: 400px;">400px</th>
                    <th style="width: 120px;">120px120px120px120px120px120px</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>400px400px400px400px400px400px400px400px400px400px400px400px400px400px400px400px400px400px400px400px400px400px</td>
                    <td>dfasfsdfasfsdfasfsdfasfsdfasfsdfasfsdfasfsdfasfsdfasfsdfasfsdfasfsdfasfs</td>
                </tr>
            </tbody>
        </table>

    </div>
</body>
</html>
  • 运行截图
    t

js动态创建css样式 

function setCssText(css){ 
    if(document.all){ // document.createStyleSheet(url)
        window.style = css
        document.createStyleSheet("javascript:style")
    }else{ //document.createElement(style)
        var style = document.createElement('style')
        style.type = 'text/css'
        style.innerHTML = css
        document.getElementsByTagName('HEAD').item(0).appendChild(style)
    } 
}
setCssText('body { color: red }')

position:sticky实现特殊的业务需求

这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特殊场景。

当父元素部分滚动到”视线范围外”时，开始实现「fixed」的功能。当父元素整个不在“实现范围内”，取消「fixed」的功能。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sticky</title>
    <style>

        .parent {
            display: flex; /*注释这个瞧瞧瞧瞧*/
        }

        .left {
            background: red;
            height: 500px;
            width: 220px;
            position: sticky;
            top: 20px; /*须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效*/
            z-index: -1;
        }

        .right {
            background: blue;
            height: 1200px;
            flex: 1;
        }
    </style>
</head>
<body>
    <div style="height: 200px;"></div>

    <div class="parent">
        <div class="left">

        </div>
        <div class="right">

        </div>
    </div>

    <div style="height: 1200px;"></div>
</body>
</html>

利用background-attachment:fixed做页面效果

background-attachment：

  • scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
  • fixed 当页面的其余部分滚动时，背景图像不会移动。
    <section class="banner">

    </section>

    <div class="content">

    </div>

    .banner {
        background-image: url(banner.jpg);
        background-size: cover;
        background-attachment: fixed;
        height: 400px;
    }

    .content {
        height: 1000px;
        background-color: red;
    }

java继承对属性的访问

Parent.java

@Data
public class Parent {

    private int size = -1;

    public void printSize() {
        System.out.println(getSize());
    }

    public void printSize2() {
        System.out.println(size);
    }
}

Son.java

@Data
public class Son extends Parent {

    private int size = 15;

    public static void main(String[] args) {
        Son s = new Son();

        s.printSize(); // 15
        s.printSize2(); // -1 访问父类的size属性
    }
}