richardimaoka/mdview-with-css.html

## mdview-with-css.html
<!DOCTYPE html>

<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" media="screen" href="mdview.css">
<title>My Trading Application</title>
</head>

<body>

<div id="title">
<h1><span id="title1">My<br></span><span id="title2">Trading<br></span><span id="title3">Application</span></h1>
</div>

<div class="panel">
<h2 class="panel-title">Market Data View</h2>
<table id="mdtable">
 <tr>
    <th></th>
    <th colspan = 4>Best</th>
    <th colspan = 4>Market 1</th>
    <th colspan = 4>Market 2</th>
  </tr>
 <tr>
    <th>Asset</th>
    <th>Bid<br>Size</th>
    <th>Bid</th>
    <th>Ask</th>
    <th>Ask<br>Size</th>
    <th>Bid<br>Size</th>
    <th>Bid</th>
    <th>Ask</th>
    <th>Ask<br>Size</th>
    <th>Bid<br>Size</th>
    <th>Bid</th>
    <th>Ask</th>
    <th>Ask<br>Size</th>
 </tr>
 <tr>
  <td>Stock A</td>
  <td>100</td>
  <td>50</td>
  <td>51</td>
  <td>90</td>
  <td>100</td>
  <td>50</td>
  <td>51</td>
  <td>90</td>
  <td>80</td>
  <td>49</td>
  <td>52</td>
  <td>60</td>
 </tr>
<tr>
  <td>Stock B</td>
  <td>1200</td>
  <td>93.5</td>
  <td>94.0</td>
  <td>1300</td>
  <td>1200</td>
  <td>93.5</td>
  <td>94.0</td>
  <td>1300</td>
  <td>500</td>
  <td>93.5</td>
  <td>94.2</td>
  <td>600</td>
</tr>
<tr>
  <td>Stock C</td>
  <td>1000</td>
  <td>1000</td>
  <td>1000.5</td>
  <td>1000</td>
  <td>1000</td>
  <td>1000</td>
  <td>1000.5</td>
  <td>1000</td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr>
  <td>Stock D</td>
  <td>3650</td>
  <td>200</td>
  <td>204</td>
  <td>2200</td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td>3650</td>
  <td>200</td>
  <td>204</td>
  <td>2200</td>
</tr>
</table>

</div>


</body>
</html>


## mdview.css
body {
	margin:0px;
}

#title{
    background: linear-gradient( to bottom, rgba(250,250,250,1), rgba(216,216,216,1) );
    box-shadow: 0px 10px 5px #888888;
    margin:0px 0px;
    padding:0px 0px;
    height: 80px;
    font-family: 'Oswald', sans-serif;
}
#title1{
    color: rgba(0,0,0,0.1)
}
#title2{
    color: rgba(0,0,0,1);
    position:relative;
    bottom: 35px;
    left: 30px;
}
#title3{
    color: rgba(0,0,0,0.1);
    position:relative;
    bottom: 65px;
}

h1{
   margin: 0px 10px;
 }

.panel{
	margin: 20px 10px;
    padding: 0px 0px 5px;
    background: linear-gradient( to bottom, rgba(250,250,250,1), rgba(216,216,216,1) );
    --box-shadow: 15px 10px 5px #888888;
    border-radius: 10px;
    color: Blue;
}


h2.panel-title{
    color:White;
	background:  linear-gradient(to right, Orange, Yellow);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
	margin: 0px;
	padding: 2px 10px;
}

table {
	font-size:12px;
	width: 95%;
    margin: 10px 2.5%;
	border-spacing: 1px 1px;
	--box-shadow: 10px 10px 5px #888888;
	--border-radius: 15px;
}

th {
    color:White;
	background: linear-gradient(to bottom, LightSkyBlue, RoyalBlue);
	padding: 2px;
}
th:hover{
	box-shadow: 0px 0px 10px 2px DarkGray inset;
}

tr:nth-child(even) {
	color: Blue;
    background: White;--linear-gradient(to bottom, Silver, White);
}

tr:nth-child(odd) {
    color: Blue;
	background: White;--linear-gradient(to bottom, Silver, White);
}
tr:hover{
	box-shadow: 0px 0px 10px 2px DarkGray inset;
}


td {
	padding: 2px 10px;
	border: 10px Black;
}

button{
	display: inline-block;
	width: 120px;
	margin: 5px 5px 0px;
	padding: 2px 10px;
	border: 0px solid;
	border-radius: 10px;
	color: White;
	background: linear-gradient(to bottom, DarkGray 50%, Gray 50%);
	--background: Gray;
	--box-shadow: 0px 0px 10px White inset;
}

button:hover{
	box-shadow: 0px 0px 10px 2px Black inset;
}

## mdview.html
<!DOCTYPE html>

<html>
<body>

<h1>My Trading Application</h1>

<table id="mdtable">
 <tr>
    <th>Asset</th>
    <th>Bid</th>
    <th>Ask</th>
  </tr>
 <tr>
  <td>Stock A</td>
  <td>50</td>
  <td>51</td>
 </tr>
<tr>
  <td>Stock B</td>
  <td>93.5</td>
  <td>94.0</td>
</tr>
<tr>
  <td>Stock C</td>
  <td></td>
  <td></td>
</tr>
<tr>
  <td>Stock D</td>
  <td>200</td>
  <td>204</td>
</tr>
</table>

</body>
</html>
	<!DOCTYPE html>

	<html>
	<head>
	<link href='http://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" media="screen" href="mdview.css">
	<title>My Trading Application</title>
	</head>

	<body>

	<div id="title">
	<h1><span id="title1">My<br></span><span id="title2">Trading<br></span><span id="title3">Application</span></h1>
	</div>

	<div class="panel">
	<h2 class="panel-title">Market Data View</h2>
	<table id="mdtable">
	<tr>
	<th></th>
	<th colspan = 4>Best</th>
	<th colspan = 4>Market 1</th>
	<th colspan = 4>Market 2</th>
	</tr>
	<tr>
	<th>Asset</th>
	<th>Bid<br>Size</th>
	<th>Bid</th>
	<th>Ask</th>
	<th>Ask<br>Size</th>
	<th>Bid<br>Size</th>
	<th>Bid</th>
	<th>Ask</th>
	<th>Ask<br>Size</th>
	<th>Bid<br>Size</th>
	<th>Bid</th>
	<th>Ask</th>
	<th>Ask<br>Size</th>
	</tr>
	<tr>
	<td>Stock A</td>
	<td>100</td>
	<td>50</td>
	<td>51</td>
	<td>90</td>
	<td>100</td>
	<td>50</td>
	<td>51</td>
	<td>90</td>
	<td>80</td>
	<td>49</td>
	<td>52</td>
	<td>60</td>
	</tr>
	<tr>
	<td>Stock B</td>
	<td>1200</td>
	<td>93.5</td>
	<td>94.0</td>
	<td>1300</td>
	<td>1200</td>
	<td>93.5</td>
	<td>94.0</td>
	<td>1300</td>
	<td>500</td>
	<td>93.5</td>
	<td>94.2</td>
	<td>600</td>
	</tr>
	<tr>
	<td>Stock C</td>
	<td>1000</td>
	<td>1000</td>
	<td>1000.5</td>
	<td>1000</td>
	<td>1000</td>
	<td>1000</td>
	<td>1000.5</td>
	<td>1000</td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	</tr>
	<tr>
	<td>Stock D</td>
	<td>3650</td>
	<td>200</td>
	<td>204</td>
	<td>2200</td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td>3650</td>
	<td>200</td>
	<td>204</td>
	<td>2200</td>
	</tr>
	</table>

	</div>



	</body>
	</html>
	body {
	margin:0px;
	}

	#title{
	background: linear-gradient( to bottom, rgba(250,250,250,1), rgba(216,216,216,1) );
	box-shadow: 0px 10px 5px #888888;
	margin:0px 0px;
	padding:0px 0px;
	height: 80px;
	font-family: 'Oswald', sans-serif;
	}
	#title1{
	color: rgba(0,0,0,0.1)
	}
	#title2{
	color: rgba(0,0,0,1);
	position:relative;
	bottom: 35px;
	left: 30px;
	}
	#title3{
	color: rgba(0,0,0,0.1);
	position:relative;
	bottom: 65px;
	}

	h1{
	margin: 0px 10px;
	}

	.panel{
	margin: 20px 10px;
	padding: 0px 0px 5px;
	background: linear-gradient( to bottom, rgba(250,250,250,1), rgba(216,216,216,1) );
	--box-shadow: 15px 10px 5px #888888;
	border-radius: 10px;
	color: Blue;
	}


	h2.panel-title{
	color:White;
	background: linear-gradient(to right, Orange, Yellow);
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	margin: 0px;
	padding: 2px 10px;
	}

	table {
	font-size:12px;
	width: 95%;
	margin: 10px 2.5%;
	border-spacing: 1px 1px;
	--box-shadow: 10px 10px 5px #888888;
	--border-radius: 15px;
	}

	th {
	color:White;
	background: linear-gradient(to bottom, LightSkyBlue, RoyalBlue);
	padding: 2px;
	}
	th:hover{
	box-shadow: 0px 0px 10px 2px DarkGray inset;
	}

	tr:nth-child(even) {
	color: Blue;
	background: White;--linear-gradient(to bottom, Silver, White);
	}

	tr:nth-child(odd) {
	color: Blue;
	background: White;--linear-gradient(to bottom, Silver, White);
	}
	tr:hover{
	box-shadow: 0px 0px 10px 2px DarkGray inset;
	}


	td {
	padding: 2px 10px;
	border: 10px Black;
	}

	button{
	display: inline-block;
	width: 120px;
	margin: 5px 5px 0px;
	padding: 2px 10px;
	border: 0px solid;
	border-radius: 10px;
	color: White;
	background: linear-gradient(to bottom, DarkGray 50%, Gray 50%);
	--background: Gray;
	--box-shadow: 0px 0px 10px White inset;
	}

	button:hover{
	box-shadow: 0px 0px 10px 2px Black inset;
	}