JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <div class="title">
        新式車牌 - 目前已順編車牌
    </div>
    <div class="table">
        <div class='th'></div>
    </div>
</div>

CSS

div{font-family: 'Helvetica Neue', Helvetica, Arial, 'lucida grande',tahoma,verdana,arial,sans-serif;}

.title{line-height:50px;font-size:16px;font-weight:800;font-family:'微軟正黑體'}
.table{width:100%}
.th{width:100%;}
.th .td{background:#eee;}
.tr{width:240px;float:left;}
.td{text-align:center;width:119px;float:left;line-height:30px;border:1px #ccc solid;margin-top:-1px;margin-left:-1px;}
.td.no{color:red;}

JavaScript

/*動態依視窗寬度生成複數TABLE標題20140702*/
$(document).ready(function(){
    
    var car=[
        {"type":"自用小客貨車","no":"AGR-7616"},        
        {"type":"500cc以上重車","no":"AF-026"},
        {"type":"租賃小客貨車","no":"RAE-1232"},
        {"type":"普通重型機車","no":"無順序號碼"},
        {"type":"營業小客車","no":"無順序號碼"},
        {"type":"普通重型機車","no":"無順序號碼"},
        {"type":"500cc以下重車","no":"LAA-3182"},
        {"type":"自用小客貨車","no":"AGR-7616"},
        {"type":"自用小客貨車","no":"AGR-7616"},
        {"type":"自用小客貨車","no":"AGR-7616"}];
		
		$(car).each(function(){
			$(".table").append("<div class='tr'><div class='td type'>"+this.type+"</div><div  class='td no'>"+this.no+"</div></div>");
		});
		
		resetTh();
        window.onresize=resetTh;
    
		//此段同等上一行
		//window.onresize = function(event) {resetTh();};
        	
		function resetTh(){
			$(".th").html("");
			for(i=0;i<($(".table").width()/240)-1;i++){
				$(".th").append("<div class='tr'><div class='td'>車牌別</div><div class='td'>車號</div></div>");
			}
		};
	});