[Vue.js]Vue.jsでExcelライクな画面作成②

	<div class="wrap"> ①
		<div class="table"> ②
			<table> ③
				<thead>
					<tr>
						<th class="noBlock">No</th>
						<th ref="col_0_header">ID</th>
						<th ref="col_1_header">名前</th>
						<th ref="col_2_header">カテゴリ</th>
						<th ref="col_2_header">値段</th>
						<th></th>
					</tr>
				</thead>
				<tbody ref="tableBody">
					<tr ref="row" v-for="(data,index) in viewData" :key="data.count">
						<th class="noBlock">{{index+1}}</th>
						<cell ref="col_0" :val="data.id" :row="index" :col=0 name="id" />
						<cell ref="col_1" :val="data.name" :row="index" :col=1 name="name"  />
						<cell ref="col_2" :val="data.category" :row="index" :col=2 name="category" />
						<cell ref="col_3" :val="data.price" :row="index" :col=3 name="price"  />
						<td><div class="tableDummy"></div></td> ④
					</tr>
				</tbody>
			</table>
			<!-- InfiniteLoadingコンポーネントを定義 -->
			<infinite-loading @infinite="infiniteHandler" spinner="spiral" :identifier="infiniteId">
				<!--<div slot="spinner">ロード中...</div>-->
				<div slot="no-more"></div>
				<!--<div slot="no-results">検索結果</div>-->
			</infinite-loading>
		</div>
	</div>

.wrap {
  margin: 0 auto;
  padding: 20px;
  max-width:800px;
}

table {
  border-collapse: collapse;
  box-sizing: border-box;
  width:1400px;
}

table th {
  font-size: 16px;
  color: #333;
}

table thead th {
  border: 1px solid #CCC;
  text-align: center;
  overflow: hidden;
  background-color: #EFEFEF;
  border-top : 1px solid #CCC;
  border-left : 1px solid #CCC;
  border-right : 1px solid #CCC;
  border-bottom : 0px solid #CCC;
  resize: horizontal; ①
}

table tbody th {
  text-align: center;
  overflow: hidden;
  background-color: #EFEFEF;
  border-top : 1px solid #CCC;
  border-left : 1px solid #CCC;
  border-bottom : 1px solid #CCC;
  resize:vertical;　②
}

.table {
  max-height: 380px;
  overflow: auto; 
}

table thead th, table thead td {
  position: sticky;　③
  top: 0;
}

.tableDummy{
  max-width:1000px;
  width:auto;
}
.noBlock{
  width:20px;
}