sciter 列表拉伸_column-resizer 使用-CSDN博客

本文链接：https://blog.csdn.net/qq_42095701/article/details/103391030

<html>
<head>
<style>
    table
    {
      width:      *;
      border:     solid 1dip #ABADB3;
      padding:    0;
    }
   thead { behavior: column-resizer; }

    td, th
    {
      text-align:     center;
      white-space:    nowrap;
      text-overflow: ellipsis;
      overflow-x:     hidden;
    }

    th
    {
      background-color: #E1E1E1;
      border-bottom:    solid 1dip #ABADB3;
    }

th:not(:last-child) { border-right: solid 1dip #ABADB3; }
th:last-child { border-right: transparent; }

    th:nth-child(1) { width: 100dip; }
    th:nth-child(2) { width: 200dip; min-width: 100dip; }
    th:nth-child(3) { width: 100dip; max-width: 200dip; }
    th:nth-child(4) { width: *; }

tr:nth-child(odd) { background-color: grey; }
tr:nth-child(even){ background-color: lightgrey; }
</style>
</head>

<body>
<table cellspacing=0 cellpadding=0 fixedlayout>
<thead>
    <tr><th>width: 100dip</th><th>min-width: 100dip</th><th>max-width: 200dip</th><th>rest container width</th></tr>
</thead>
<tbody>
    <tr><td>{1.1}</td><td>{1.2}</td><td>{1.3}</td><td>just_space_filler</td></tr>
    <tr><td>{2.1}</td><td>{2.2}</td><td>{2.3}</td><td>just_space_filler</td></tr>
    <tr><td>{3.1}</td><td>{3.2}</td><td>{3.3}</td><td>just_space_filler</td></tr>
    <tr><td>{4.1}</td><td>{4.2}</td><td>{4.3}</td><td>just_space_filler</td></tr>
</tbody>
</table>
</body>
</html>

<html>
<head>
   <style type="text/css">
         //body { height: 800dip; width: 1000dip; }
       // table thead { behavior: column-resizer; }
         table { border-spacing:0; border-collapse:collapse; width:*; }
         td, th { border: solid 1dip grey; height: 24dip; }
      </style>
</head>

<html>
<head>
   <style>
       body
       {
           flow: horizontal;
       }
   </style>

<html>
<head>
<style>
#div1
{
    background-color:yellow;
    height:100%;
    width:90%;
    box-sizing:border-box;
    padding-bottom:5em;
}
#div2
{
   background-color:yellowgreen;
    width:80%;
   height:100%;
}
#myControl
{
    display:block;
    background-color:white;
    width:50%;
    height:100%;
    vertical-align:bottom;
    border:5px solid red
}
</style>
</head>

<body>

<div style="height:500px;width:600px;background-color:violet;border:5px solid red;" id="violet">
    <div style="height:5em;background-color:blue;"></div>
   <div id="div1">
        <div id="div2">
            <div id="myControl">
                I want this element's bottom align with #violet's bottom
            </div>
        </div>
   </div>
</div>
</body>
</html>