<table>
    <tr>
        <td class="shorten"><div>このセルは同行の他セルの高さを超えると一部表示と全体表示を切り替えるようにセットされます。</div></td>
        <td>このセルは普通に自身の文字行分の高さを確保します。</td>
    </tr>
    <tr>
        <td class="shorten"><div>このセルは同行の他セルの高さを超えると一部表示と全体表示を切り替えるようにセットされます。</div></td>
        <td>このセルは普通に自身の文字行分の高さを確保します。このセルは普通に自身の文字行分の高さを確保します。このセルは普通に自身の文字行分の高さを確保します。</td>
    </tr>
</table>

.shorten{
	overflow-y:hidden;
}
.shorten>div{
	overflow-y:visible;
	height:0;
	vertical-align:middle
}
.shorten>div.partHide{
	overflow-y:hidden;
}
.shorten .allView{
	display:inline-block;
	float:right;
	cursor:pointer;
	font-size:12px;
	color:#555;
	margin-top:4px;
}

$(function(){
	$(".shorten").each(function(){
		let height = Math.ceil($(this).height());
		$(this).css('height', height+'px');
		$(this).children('div').css('height', height+'px');
		if(height < $(this).children('div').get(0).scrollHeight -5){
			let h = height-24;
			$(this).children('div').css('height', h+'px');
			$(this).children('div').addClass('partHide');
			$(this).append('<span class="allView" data-height="'+h+'">[全て表示]</span>');
		}else{
			$(this).children('div').css('height', 'auto');
		}
	});
	$(".shorten>.allView").on('click', function(){
		let height = Math.ceil($(this).parent('.shorten').height());
		let field  = $(this).parent('.shorten').children('div');
		if(field.hasClass('partHide')){
			field.css('height','auto');
			field.removeClass('partHide');
			$(this).text('[一部を表示]');
		}else{
			field.css('height', $(this).attr('data-height')+'px');
			field.addClass('partHide');
			$(this).text('[全て表示]');
		}
	});
});