JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
          <div class="col-sm-12 col-xs-12">					
                      <table id="bodyTable"  class="table-single table-condensed col-md-12 fixed" cellpadding="0"                     cellspacing="0" border="0">
							<thead>
								  <tr>
									<th class="green_caption hideByDeadman" rowspan="2" style="width: 50px">訂正</th>
									<th class="green_caption col-md-2" rowspan="2">費目</th>
									<th class="green_caption col-md-2" rowspan="2">業者</th>
									<th class="green_caption col-md-1 non-border-bottom" colspan="2" rowspan="1">単価</th>
									<th class="green_caption col-md-5" colspan="5">内訳情報</th>
									<th class="green_caption col-md-1" >重量</th>
									<th class="green_caption col-md-1" >新単価</th>
								  </tr>
								  <tr>

									<th class="green_caption">単位</th>
									<th class="green_caption" ></th>
									<th class="green_caption col-md-1" >基本</th>
									<th class="green_caption col-md-1" >長尺</th>
									<th class="green_caption col-md-1" >悪路</th>
									<th class="green_caption col-md-1" >冬季</th>
									<th class="green_caption col-md-1" >ユニック車</th>
									<th class="green_caption" >金額</th>
									<th class="green_caption" >新金額</th>
								  </tr>
								  
								  
							</thead>
						  <tbody>
							  <tr>
								<td rowspan="2" class = "text-center non-border-top hideByDeadman">
									<input type = "checkbox" checked="checked"/>
								</td>
								<td rowspan="2" class = "text-left non-border-top">
									<input type="text" class="form-control txt_medium" value = "A1"/>
									<div class="field_label">二次トラック運賃</div>
								</td>
								<td rowspan="2" class = "non-border-top">
									<input type="text" class="form-control txt_short" value =...

CSS

td, th {
	border: 1px solid black;
	color: black;
	overflow: hidden;
    text-overflow: ellipsis;
	white-space: no-wrap; 
	min-height: 32px;
}
table.fixed {
}
	
th.non-border-top, td.non-border-top {
	border-top: 0
}

th.non-border-right, td.non-border-right {
	border-right: 0
}

th.non-border-bottom, td.non-border-bottom {
	border-bottom: 0
}

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

.text-center {
	text-align: center;
}

.left-margin {
	margin-left: 10px !important;
}

.hidden {
	display: none;
}

.btn-bottom {
	bottom: 10px;
	position: absolute; 
}
.left_spacing {
	margin-left: 30px;
}

.clean-vertical {
	width: 30px;
	display:inline-block;
}
.txt_short {
	width: 70px;
	display:inline;
}

.txt_small {
	width: 50px;
	display:inline;
}
.txt_medium {
	width: 100px;
	display:inline;
}

.txt_large {
	width: 200px;
	display:inline;
}
.inlineDiv {
	display:inline-block;
	padding-left: 10px;
	padding-right: 10px;
}
.extra_small {
	width: 20px;
	display:inline;
	padding: 3px 5px;
}
.field_label {
	display:block;
	padding: 5px;
}
.btn_right {
	float:right;
}
.text_space {
	width: 70px;
	display:inline-block;
}
.header {
	color: red;
	padding-bottom: 10px;
}

JavaScript

$(document).ready(function() {
			oTable = $("#bodyTable").dataTable({
		
				"bSort": false,
				"sScrollY": "150px",
				"sScrollX": "100%",
				"bPaginate": false,
				"bFilter": false,        
				"bInfo": false,
				
			});
			$(window).bind('resize', function () {
				oTable.fnAdjustColumnSizing();
			} );

		} );