常用到的html页面布局和组件： 自己用

1. 用div当作圆

<div  style="border: 1px solid blue;height: 100px; width: 100px; border-radius: 200px">div圆圈</div>

 

2. 用bootstrap实现的表格： 标题固定,表内容可滚动

CSS：

.single-table-wrapper{
    height: 85vh;
    width: 100%;
    margin-bottom: 0px;
    border: 1px solid #ddd;
}

.single-table-wrapper tbody{
    height: 80vh;
    overflow-y:auto;
    width: 100%;
}    
    
.single-table-wrapper thead,
.single-table-wrapper tr,
.single-table-wrapper th,
.single-table-wrapper tbody,
.single-table-wrapper tr,
.single-table-wrapper td{
   display:block;
}

        
.single-table-wrapper tbody td{
    float:left;
 }
  
.single-table-wrapper thead tr th{
    float:left;
}

HTML：
<div class="single-table-wrapper">
        
            <table class="table table-hover">
                <thead>
                  <tr>
                    <th class="col-xs-1 col-sm-1 col-mg-1 col-lg-1">序号</th>
                                    <th class="col-xs-1 col-sm-1 col-mg-1 col-lg-1">标题1</th>
                                    <th class="col-xs-1 col-sm-1 col-mg-1 col-lg-1">标题1</th>
                                    <th class="col-xs-1 col-sm-1 col-mg-1 col-lg-1">标题1</th>
                                    <th class="col-xs-2 col-sm-2 col-mg-2 col-lg-2">标题1</th>
                                    <th class="col-xs-1 col-sm-1 col-mg-1 col-lg-1">标题1</th>
                                    <th class="col-xs-1 col-sm-1 col-mg-1 col-lg-1">标题1</th>
                                    <th class="col-xs-1 col-sm-1 col-mg-1 col-lg-1">允许搭乘</th>
                                    <th class="col-xs-1 col-sm-1 col-mg-1 col-lg-1">状态</th>
                                    <th class="col-xs-2 col-sm-2 col-mg-2 col-lg-2">&nbsp;
                                    </th>
                  </tr>
                </thead>
                <tbody>
                  <tr ng-repeat="i in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ,13 ,14, 15]">
                       <td class="col-xs-1 col-sm-1 col-mg-1 col-lg-1">001</td>
                                    <td class="col-xs-1 col-sm-1 col-mg-1 col-lg-1">001</td>
                                    <td class="col-xs-1 col-sm-1 col-mg-1 col-lg-1">001</td>
                                    <td class="col-xs-1 col-sm-1 col-mg-1 col-lg-1">001</td>
                                    <td class="col-xs-2 col-sm-2 col-mg-2 col-lg-2">001</td>
                                    <td class="col-xs-1 col-sm-1 col-mg-1 col-lg-1">001</td>
                                    <td class="col-xs-1 col-sm-1 col-mg-1 col-lg-1">001</td>
                                    <td class="col-xs-1 col-sm-1 col-mg-1 col-lg-1">001</td>
                                    <td class="col-xs-1 col-sm-1 col-mg-1 col-lg-1">001</td>
                                    <td class="col-xs-2 col-sm-2 col-mg-2 col-lg-2">
                                        <a class="btn btn-primary btn-xs">查看</a>
                                    </td>
                  </tr>
                  
                </tbody>
          </table>
        
        </div>