JSFiddle - React, Tailwind, and code Playground

by rudygotya

HTML

<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/ui-darkness/jquery-ui.css">
<div class="table lv_table">
	<div id="my_lv_table" class="calc_table">
		<div class="table_header cols">
			<div class="th col_1">Col 1</div>
			<div class="th col_2">Col 2</div>
			<div class="th col_3">Col 3</div>
			<div class="th col_4">Col 4</div>
			<div class="th col_5">Col 5</div>
			<div class="end_left"></div>
		</div>
		<div class="table_body">
			<div class="row">
				<div class="col_1 td">Wert Col 1</div>
				<div class="col_2 td">Wert Col 2</div>
				<div class="col_3 td">Wert Col 3</div>
				<div class="col_4 td">Wert Col 4</div>
				<div class="col_5 td">Wert Col 5</div>
			</div>
			<div class="row">
				<div class="col_1 td">Wert Col 1</div>
				<div class="col_2 td">Wert Col 2</div>
				<div class="col_3 td">Wert Col 3</div>
				<div class="col_4 td">Wert Col 4</div>
				<div class="col_5 td">Wert Col 5</div>
			</div>
			<div class="row">
				<div class="col_1 td">Wert Col 1</div>
				<div class="col_2 td">Wert Col 2</div>
				<div class="col_3 td">Wert Col 3</div>
				<div class="col_4 td">Wert Col 4</div>
				<div class="col_5 td">Wert Col 5</div>
			</div>
			<div class="row">
				<div class="col_1 td">Wert Col 1</div>
				<div class="col_2 td">Wert Col 2</div>
				<div class="col_3 td">Wert Col 3</div>
				<div class="col_4 td">Wert Col 4</div>
				<div class="col_5 td">Wert Col 5</div>
			</div>
			<div class="row">
				<div class="col_1 td">Wert Col 1</div>
				<div class="col_2 td">Wert Col 2</div>
				<div class="col_3 td">Wert Col 3</div>
				<div class="col_4 td">Wert Col 4</div>
				<div class="col_5 td">Wert Col 5</div>
			</div>
			<div class="row">
				<div class="col_1 td">Wert Col 1</div>
				<div class="col_2 td">Wert Col 2</div>
				<div class="col_3 td">Wert Col 3</div>
				<div class="col_4 td">Wert Col 4</div>
				<div class="col_5 td">Wert Col...

CSS

.table {
    border: 1px solid red;
}

.table_body, .calc_table, .table_header, .table_footer, .row {
    width: 100%;
}

.table {
    width: 400px;
}

.td, .th {
    display: inline-block;
}

.col_1 {
    width: 80px;
}

.col_2 {
    width: 60px;
}

.col_3 {
    width: 55px;
}

.col_4 {
    width: 40px;
}

.col_5 {
    width: 100px;
}

JavaScript

$( '.table' )
	.find( '.th, .td' ).each(function() {
		var $this = $( this ),
			rowWidth = $this.parent().width();
			
		$this.css( 'width', '' + ( Math.floor( $this.width() * 100 / rowWidth ) ) + '%' )
	})
	.end()
	.resizable();