"Шапка" в виде таблицы для другой таблицы
Подскажите пожалуйста как с помощью таблиц (применение bgcolor только к <table>) используя inline-css(без подключений css и js и без div и display:block), сделать адаптивную "шапку" для таблицы "<!-- Table wraper -->" ?. Код на облаке. Пробовал разные варианты, не получилось.
<html>
<head>
<meta content='text/html; charset=utf-8' http-equiv='content-type'>
</head>
<body>
<table bgcolor='#dfdfdf' border='0' cellpadding='0' cellspacing='0' width='100%'>
<thead>
<tr>
<td height='10px'></td>
</tr>
<tr>
<td align='center'>Text</td>
</tr>
<tr>
<td height='30px'></td>
</tr>
</thead>
<tbody align='center'>
<tr>
<td>
<!-- Table wraper -->
<table bgcolor='#f2f2f2' cellpadding='0' cellspacing='0' style='margin:0; padding:0; background-color:#f2f2f2'>
<tr>
<td width='20px'></td>
<td>
<!-- Table body -->
<table>
<tr>
<td>
<table border='0'>
<tr>
<td>
Значение:
</td>
<td>
@очень_длинная_переменная
</td>
</tr>
</table>
</td>
<tr>
<td height='10px'></td>
</tr>
<tr>
<td>
<table border='0'>
<tr>
<td>
Значение:
</td>
<td>
@длинная_переменная
</td>
</tr>
</table>
</td>
<tr>
<td height='10px'></td>
</tr>
<tr>
<td>
<table border='0'>
<tr align='left'>
<td>
@переменная
</td>
<td>
x
</td>
<td>
@переменная
</td>
<td>
@переменная
</td>
</tr>
</table>
</td>
<tr>
<td height='5px'></td>
</tr>
</tr>
</tr>
</tr>
</table>
</td>
<td width='10px'></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Как "шапка" черного цвета (без размытия) на изображении 
Источник: Stack Overflow на русском