JSFiddle - React, Tailwind, and code Playground

by Sim Virak

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script>

function prepareTable() {
	var str = "",
		header = "",
		graphImg;
	
	
	header = '\uFEFF<h2 style="text-align:center;">Google</h2>';
	
	str = '<table border="1">'
		+'<tr><td style="text-align:center" colspan="6">Yahoo</td></tr>'
	  +'<tr><td style="font-weight:bold" colspan="6">(2017.03.20)</td></tr>'
		+'<thead>'
		+'    <tr style="background-color:#788496; color: #ffffff">'
		+'      <th scope="col" rowspan="2">'
		+'        <div>Yahoo</div>'
		+'      </th>'
		+'      <th scope="col">'
		+'        <div class="tar">Yahoo(2017-01)</div>'
		+'      </th>'
		+'      <th scope="col" colspan="2">'
		+'        <div class="tar">Yahoo(2016-12)</div>'
		+'      </th>'
		+'      <th scope="col" colspan="2">'
		+'        <div class="tar">Yahoo(2016-12)</div>'
		+'      </th>'
		+'    </tr>'
		+'    <tr style="background-color:#788496; color: #ffffff">'
		+'      <th height="40" align="right">'
		+'        <div>Yahoo</div>'
		+'      </th>'
		+'      <th align="right">'
		+'        <div>Yahoo</div>'
		+'      </th>'
		+'      <th align="right">'
		+'        <div>Yahoo</div>'
		+'      </th>'
		+'      <th align="right">'
		+'        <div>Yahoo</div>'
		+'      </th>'
		+'      <th align="right">'
		+'        <div>Yahoo</div>'
		+'      </th>'
		+'    </tr>'
		+'</thead>'
		+'  <tbody>'
    
    +'    <tr style="text-align: right">'
    +'      <td style="padding:0 20px 0 0">'
    +'        <div>NAME</div>'
    +'      </td>'
    +'      <td style="width: 150px;">'
    +'        <div>311,210</div>'
    +'      </td>'
    +'      <td style="width: 150px;">'
    +'        <div>311,210</div>'
    +'      </td>'
    +'      <td style="width: 150px;">'
    +'        <div>311,210%</div>'
    +'      </td>'
    +'      <td style="width: 150px;">'
    +'        <div>311,210</div>'
    +'      </td>'
    +'      <td style="width: 150px;">'
    +'       ...