<div class="page">
    <h1>Schedule List</h1>
    <table>
        <thead>
        <tr>
            <th>Name</th>
            <th>Type</th>
            <th>Start</th>
            <th>End</th>
            <th>DOW</th>
            <th>Open</th>
            <th>Pref</th>
        </tr>
        </thead>
        <tbody>
            <tr class="filtered-row">
                <td ng-cloak ng-bind="item.Name">item.Name</td>
                <td ng-cloak ng-bind="item.Type">item.Type</td>
                <td ng-cloak ng-bind="item.Start">item.Start</td>
                <td ng-cloak ng-bind="item.End">item.End</td>
                <td ng-cloak ng-bind="item.DOW">item.DOW</td>
                <td ng-cloak ng-bind="item.Open">item.Open</td>
                <td ng-cloak ng-bind="item.Pref">item.Pref</td>
            </tr>
            <tr class="filtered-row">
                <td ng-cloak ng-bind="item.Name">item.Name</td>
                <td ng-cloak ng-bind="item.Type">item.Type</td>
                <td ng-cloak ng-bind="item.Start">item.Start</td>
                <td ng-cloak ng-bind="item.End">item.End</td>
                <td ng-cloak ng-bind="item.DOW">item.DOW</td>
                <td ng-cloak ng-bind="item.Open">item.Open</td>
                <td ng-cloak ng-bind="item.Pref">item.Pref</td>
            </tr>
            <tr class="filtered-row">
                <td ng-cloak ng-bind="item.Name">item.Name</td>
                <td ng-cloak ng-bind="item.Type">item.Type</td>
                <td ng-cloak ng-bind="item.Start">item.Start</td>
                <td ng-cloak ng-bind="item.End">item.End</td>
                <td ng-cloak ng-bind="item.DOW">item.DOW</td>
                <td ng-cloak ng-bind="item.Open">item.Open</td>
                <td ng-cloak ng-bind="item.Pref">item.Pref</td>
            </tr>
            <tr class="filtered-row">
                <td ng-cloak ng-bind="item.Name">item.Name</td>
                <td ng-cloak ng-bind="item.Type">item.Type</td>
                <td ng-cloak ng-bind="item.Start">item.Start</td>
                <td ng-cloak ng-bind="item.End">item.End</td>
                <td ng-cloak ng-bind="item.DOW">item.DOW</td>
                <td ng-cloak ng-bind="item.Open">item.Open</td>
                <td ng-cloak ng-bind="item.Pref">item.Pref</td>
            </tr>
        </tbody>
    </table>
</div>
/*Reset Style*/
body {
  margin: 0;
  padding: 0;
  line-height: 1.4em;
  word-spacing: 1px;
  letter-spacing: 0.2px;
  font: 13px Arial, Helvetica,"Lucida Grande", serif;
  color: #000;
}
h1 { font-size: 2em; }
.page {
  width: 850px;
  margin: 2rem auto;
  color: #333;
}
.page table {
  border: 1px solid #ddd;
  padding: .3rem;
  width: 100%;
  margin: 0;
  border-collapse: collapse;
}
.page table th {
  background-color: #ddd;
  text-align: left;
  padding: .8rem;
}
.page table tr {
  border-bottom: 1px solid #ddd;
  padding: .8rem;
}
.page table tr:nth-child(even) {
  background-color: #f2f2f2;
}
.page table td {
  padding: .8rem;
  margin: 0;
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.