stevenh77/Highlighted td blocks

## Highlighted td blocks
<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            font-family: "Lato","Helvetica Neue",Arial,sans-serif;
            -webkit-font-smoothing: antialiased !important;
        }
        html {
            font-size: 12px;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
        }
        body {
            font-family: "Lato","Helvetica Neue",Arial,sans-serif;
            line-height: 1.42857;
            color: gray;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
            background-color: transparent;
            width: 250px;
            max-width: 250px;
            margin-bottom: 20px;
        }

        th {
            text-align: left;
        }

        .table>thead>tr>th,.table>thead>tr>td,.table>tbody>tr>th,.table>tbody>tr>td,.table>tfoot>tr>th,.table>tfoot>tr>td {
            padding: 10px;
            line-height: 1.42857;
            vertical-align: top;
            border-top: 1px solid #ddd;
        }

        .table>caption+thead>tr:first-child>th,.table>caption+thead>tr:first-child>td,.table>colgroup+thead>tr:first-child>th,.table>colgroup+thead>tr:first-child>td,.table>thead:first-child>tr:first-child>th,.table>thead:first-child>tr:first-child>td {
            border-top: 0;
        }

        .table>tbody+tbody {
            border-top: 2px solid #ddd;
        }

        .table-condensed>thead>tr>th,.table-condensed>thead>tr>td,.table-condensed>tbody>tr>th,.table-condensed>tbody>tr>td,.table-condensed>tfoot>tr>th,.table-condensed>tfoot>tr>td {
            padding: 5px;
        }

        .table-bordered>thead>tr>th,.table-bordered>thead>tr>td {
            border-bottom-width: 2px;
        }

        .table-striped>tbody>tr:nth-child(odd)>td,.table-striped>tbody>tr:nth-child(odd)>th {
            background-color: #f9f9f9;
        }

        .table-hover>tbody>tr:hover>td,.table-hover>tbody>tr:hover>th {
            background-color: #f5f5f5;
        }

        table col[class*="col-"] {
            position: static;
            float: none;
            display: table-column;
        }

        table td[class*="col-"],table th[class*="col-"] {
            position: static;
            float: none;
            display: table-cell;
        }
        label {
            display: inline-block;
            max-width: 100%;
            margin-bottom: 5px;
            font-weight: bold;
        }
        .label-info {
            background-color: #56bdf1;
        }
        .label-primary {
            background-color: #1bb7a0;
        }
        .label-success {
            background-color: #94b758;
        }
        .label-danger {
            background-color: #fa7b58;
        }
        .label-warning {
            background-color: #f3c536;
        }
        .label {
            display: inline;
            padding: .5em .8em;
            font-size: 75%;
            font-weight: bold;
            line-height: 1;
            color: #fff;
            text-align: center;
            white-space: nowrap;
            vertical-align: baseline;
            border-radius: .25em;
        }
        </style>
    </head>
    <body>
        <table class="table">
            <thead>
            <tr>
                <th>#</th>
                <th>Status</th>
                <th>Player</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>1</td>
                <td><span class="label label-info">Goalkeeper</span></td>
                <td>Julian Speroni</td>
            </tr>
            <tr>
                <td>2</td>
                <td><span class="label label-primary">Right back</span></td>
                <td>Joel Ward</td>
            </tr>
            <tr>
                <td>3</td>
                <td><span class="label label-success">Defender</span></td>
                <td>Scott Dann</td>
            </tr>
            <tr>
                <td>4</td>
                <td><span class="label label-warning">Midfielder</span></td>
                <td>Mile Jedinak</td>
            </tr>
            <tr>
                <td>5</td>
                <td><span class="label label-danger">Winger</span></td>
                <td>Yannick Bolaise</td>
            </tr>
            </tbody>
        </table>
    </body>
</html>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-family: "Lato","Helvetica Neue",Arial,sans-serif;
	-webkit-font-smoothing: antialiased !important;
	}
	html {
	font-size: 12px;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	}
	body {
	font-family: "Lato","Helvetica Neue",Arial,sans-serif;
	line-height: 1.42857;
	color: gray;
	}
	table {
	border-collapse: collapse;
	border-spacing: 0;
	background-color: transparent;
	width: 250px;
	max-width: 250px;
	margin-bottom: 20px;
	}

	th {
	text-align: left;
	}

	.table>thead>tr>th,.table>thead>tr>td,.table>tbody>tr>th,.table>tbody>tr>td,.table>tfoot>tr>th,.table>tfoot>tr>td {
	padding: 10px;
	line-height: 1.42857;
	vertical-align: top;
	border-top: 1px solid #ddd;
	}

	.table>caption+thead>tr:first-child>th,.table>caption+thead>tr:first-child>td,.table>colgroup+thead>tr:first-child>th,.table>colgroup+thead>tr:first-child>td,.table>thead:first-child>tr:first-child>th,.table>thead:first-child>tr:first-child>td {
	border-top: 0;
	}

	.table>tbody+tbody {
	border-top: 2px solid #ddd;
	}

	.table-condensed>thead>tr>th,.table-condensed>thead>tr>td,.table-condensed>tbody>tr>th,.table-condensed>tbody>tr>td,.table-condensed>tfoot>tr>th,.table-condensed>tfoot>tr>td {
	padding: 5px;
	}

	.table-bordered>thead>tr>th,.table-bordered>thead>tr>td {
	border-bottom-width: 2px;
	}

	.table-striped>tbody>tr:nth-child(odd)>td,.table-striped>tbody>tr:nth-child(odd)>th {
	background-color: #f9f9f9;
	}

	.table-hover>tbody>tr:hover>td,.table-hover>tbody>tr:hover>th {
	background-color: #f5f5f5;
	}

	table col[class*="col-"] {
	position: static;
	float: none;
	display: table-column;
	}

	table td[class="col-"],table th[class="col-"] {
	position: static;
	float: none;
	display: table-cell;
	}
	label {
	display: inline-block;
	max-width: 100%;
	margin-bottom: 5px;
	font-weight: bold;
	}
	.label-info {
	background-color: #56bdf1;
	}
	.label-primary {
	background-color: #1bb7a0;
	}
	.label-success {
	background-color: #94b758;
	}
	.label-danger {
	background-color: #fa7b58;
	}
	.label-warning {
	background-color: #f3c536;
	}
	.label {
	display: inline;
	padding: .5em .8em;
	font-size: 75%;
	font-weight: bold;
	line-height: 1;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	border-radius: .25em;
	}
	</style>
	</head>
	<body>
	<table class="table">
	<thead>
	<tr>
	<th>#</th>
	<th>Status</th>
	<th>Player</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td>1</td>
	<td><span class="label label-info">Goalkeeper</span></td>
	<td>Julian Speroni</td>
	</tr>
	<tr>
	<td>2</td>
	<td><span class="label label-primary">Right back</span></td>
	<td>Joel Ward</td>
	</tr>
	<tr>
	<td>3</td>
	<td><span class="label label-success">Defender</span></td>
	<td>Scott Dann</td>
	</tr>
	<tr>
	<td>4</td>
	<td><span class="label label-warning">Midfielder</span></td>
	<td>Mile Jedinak</td>
	</tr>
	<tr>
	<td>5</td>
	<td><span class="label label-danger">Winger</span></td>
	<td>Yannick Bolaise</td>
	</tr>
	</tbody>
	</table>
	</body>
	</html>