表单布局

表单

对于横向一致排开的搜索表单（上搜索下结果），最好使用固定框宽度的布局，可以结合element表单控件

在布局的时候，最好能统一html标签格式（如，统一将class放在标签第一位，并且该class带有语义性），使其易于区分和语义化，如下面的结构就是很好的结构，区分度大，代码可维护性高

  <div class="box">
    <div class="inner-line">
          <div class="inner-input">
            <label for="search-input" class="label pr-5">sreachVal:</label>
            <input type="text" name="search-input" class="no-outline" />
     	  </div>
    </div>
  </div>

外层盒子

	box {
	     width: 90%;
	     margin: 0 auto;
	     border: 1px solid #ccc;
	     box-sizing: border-box;
	     padding: 20px;
	}

每行

	inner-line {
	  // 横向对齐
	  display: flex;
	  justify-content: flex-start;
	  flex-wrap: wrap;
	  margin-top: 30px;
	}

每小对

	.inner-input {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}

输入框标题

    .label {
      font-size: 16px;
      color: #2f4f4f;
    }

输入框

    input {
      width: 100px;
      height: 28px;
      padding: 4px 7px;
      font-size: 12px;
      line-height: 1.5;

      color: rgba(0, 0, 0, .65);
      border: 1px solid #d9d9d9;
      border-radius: 4px;

      cursor: text;
      position: relative;
      background-image: none;
      background-color: #fff;

      -webkit-transition: all .3s;
      transition: all .3s;
    }

    .no-outline {
      outline: none;
    }

表格

正常表格

  <table class="table-data">
    <thead>
      <tr>
        <th>head1</th>
        <th>head2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>td1</td>
        <td>td1</td>
      </tr>
      <tr >
        <td colspan="2">td1</td>
      </tr>
    </tbody>
  </table>

除去表头的表格

 <table class="table-data">
    <tbody>
      <tr>
        <td>td1</td>
        <td>td1</td>
      </tr>
      <tr >
        <td colspan="2">td1</td>
      </tr>
    </tbody>
  </table>

 .table-data {
      width: 90%;
      color: black;
      margin: 0 auto;
      border: 1px solid #ff6d2b;
      
      box-sizing: border-box;
      border-spacing: 0px;
    }

设置表头背景色, 和表头单元格内间距

	.table-data thead {
	  background: #feb236;
	}
	.table-data thead tr th {
	  padding: 5px 0;
	}

设置表体的背景色和左右边距

	.table-data tbody {
	  color: white;
	  padding: 5px 0;
	}

设置表体单元格排列方式

    .table-data td {
      text-align: center
    }

设置单双行颜色

	.table-data tbody tr:nth-child(2n){
		 background: #291D09; 
	}

设置滚动条

	/* 设置滚动条 */
	table{
	  overflow: hidden;
	}
	table tbody {
	    display: block;
	    height: 195px;
	    overflow-y: scroll;
	    width: calc(100% + 18px);
	}
	
	table thead,
	tbody tr {
	    display: table;
	    width: 100%;
	    table-layout: fixed;
	}
	
	table thead {
	    width: calc(100% )
	}

若是在vue中则，表头和表内数据可以通过遍历的形式取得