<div id="wrap">

		<table class="font-table">
			<tr>
				<td class="font-table__cell font-table__cell--1 flexFont">
					<span>Text for cell one</span>
				</td>
				<td class="font-table__cell font-table__cell--2 flexFont">
					<span>Text for cell two</span>
				</td>
				<td class="font-table__cell font-table__cell--3 flexFont">
					<span>Text for cell three</span>
				</td>
			</tr>
			
			<tr>
				<td class="font-table__cell font-table__cell--1 flexFont">
					<span>Text for row two cell one</span>
				</td>
				<td class="font-table__cell font-table__cell--2 flexFont">
					<span>Text for row two cell two</span>
				</td>
				<td class="font-table__cell font-table__cell--3 flexFont">
					<span>Text for row two cell three</span>
				</td>
			</tr>
		</table>
		
	</div>

html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: #333;
	color: #eee;
	font-size: 18px;
	font-family: monospace;
	line-height: 1.4;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

#wrap {
	width: 100%;
	max-width: 980px;
	margin: auto;
	padding: 40px;
}

.font-table {
	width: 100%;
	border-collapse: collapse;
	
	&__cell {
		width: auto;
		padding: 16px;
		border: 1px solid fade(#fff, 10%);
		
		&--1 {
			width: 120px;
		}
		
		&--2 {
			width: 300px;
		}
	}
}

resizeFont = function () {
	var $tCells = document.getElementsByClassName('font-table__cell');
	
	for (var i = 0; i < $tCells.length; i++) {
		var relFontsize = $tCells[i].offsetWidth * 0.05;
		$tCells[i].style.fontSize = relFontsize + 'px';
	}
};

window.onload = function (event) {
	resizeFont();
};
window.onresize = function (event) {
	resizeFont();
};