body {
    font-family: arial;
  }
th {color:red;}
td {color:green;}
td{border:1px solid #ccc} 


  table {
    border: 1px solid #ddd;
    width: 100%;
    margin:0;
    padding:0;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0 auto;
  }

  table tr {
    border: 1px solid #ccc;
    padding: 5px;
  }

  table th, table td {
    padding: 5px;
    text-align: center;
  }

  table th {
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 1px;
  }

  @media screen and (max-width: 600px) {

    table {
      border: 1;
    }

    table thead {
      display: none;
    }

    table tr {
      margin-bottom: 10px;
      display: block;
      border-bottom: 1px solid green;
    }

    table td {
      display: block;
      text-align: right;
      font-size: 10px;
      border-bottom: 1px dotted #ccc;
    }

    table td:last-child {
      border-bottom:  1px solid #F00;
    }

    table td:before {
      content: attr(data-label);
      float: left;
      text-transform: uppercase;
      font-weight: bold;
    }
  }

.note{max-width: 95%; margin: 0 auto;}
table tr:hover td {
    background: #ccc
}



.main_chart{
	float:left;
	width:1024px;
}




.main_chart .channel{
	float:left;
	width:331px;
	background: #f5f5f5;
	margin:5px 5px 10px 5px ;
	color: #333;
}
.main_chart .channel p{
	height:20px;
	font-size:14px;
	color:#fff;
	padding:5px 0 3px 5px;
	background: #1c86d1;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	border-left:1px solid #1c86d1;
	border-right:1px solid #1c86d1;
	border-top:1px solid #1c86d1;
}
.main_chart .channel p a{
	color:#fff;
}
.main_chart .channel ul{
	padding:10px;
	height:280px;
	overflow: hidden;
	border-left:1px solid #ddd;
	border-right:1px solid #ddd;
	border-bottom:1px solid #ddd;

}