fivethirtyeight-table

<div class="polls3">
  <table>
    <thead>
      <tr>
        {% for c in cols[:5] %}
        <th><div {% if c.lower() in ('grade', 'sample', 'weight') %}
                   style="text-align: center"
                 {% endif %}>
          {{c}}</div>
        </th>
        {% endfor %}
        <th class="rotate">
          <div>
            <svg width="82" height="82" style="max-width: none;">
              <text transform="translate(25,60)rotate(-45)" x="0" y="0">{{cols[5]}}</text>
              <line x1="0" y1="65" x2="25" y2="40" transform="translate(41.5,0)"></line>
            </svg>
          </div>
        </th>
        <th class="rotate">
          <div>
            <svg width="82" height="82" style="max-width: none;">
              <text transform="translate(25,60)rotate(-45)" x="0" y="0">{{cols[6]}}</text>
            </svg>
          </div>
        </th>
        <th style="width: 20px"></th>
        {% for c in cols[7:] %}
        <th><div>{{c}}</div></th>
        {% endfor %}
      </tr>
    </thead>
    <tbody>
      {% for row in rows %}
      <tr>
        <td class="dates">{{row.dates}}</td>
        <td class="justtext">{{row.pollster}}</td>
        <td class="grade">
        {% if row.grade %}
          <div class="grade-circ" style="border-color: green">
            <div style="position: relative; top: 25%">{{row.grade}}</div>
          </div>
        {% else %}
          <div class="grade-circ" style="border-color: white"></div>
        {% endif %}    
        </td>
        <td class="sample">
          <div class="sample-number">
            {{row.sample}}<span style="color: #999">&nbsp{{row.population}}</span>
          </div>
        </td>
        <td class="weight">
          <div class="signal">
            <div class="bar" 
             style="height: 20%; background: {% if row.weight < 0.01 %}lightgray{% else %}gray{% endif %}">
            </div>
            <div class="bar" 
             style="height: 40%; background: {% if row.weight < 0.044 %}lightgray{% else %}gray{% endif %}">
            </div>
            <div class="bar" 
             style="height: 60%; background: {% if row.weight < 0.087 %}lightgray{% else %}gray{% endif %}">
            </div>
            <div class="bar" 
             style="height: 80%; background: {% if row.weight < 1.3 %}lightgray{% else %}gray{% endif %}">
            </div>
            <div class="bar" 
             style="height: 100%; background: {% if row.weight < 1.7 %}lightgray{% else %}gray{% endif %}">
            </div>
          </div>
          <div style="margin-right: 10px">{{row.weight}}</div>
        </td>
        <td class="heat">
          <div style="background-color: {{row.r_color}}">{{row.republican}}</div>
        </td>
        <td class="heat">
          <div style="background-color: {{row.d_color}}">{{row.democrat}}</div>
        </td>
        <td style="min-width: 10px;"></td>
        <td class="just-text">{{row.leader}}</td>
        <td class="adj-leader" 
            style="color: {% if row.adj_leader.startswith('D') %}#008fd5{% else %}#ff9371{% endif %}">
          {{row.adj_leader}}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<style>

div .polls3 {
    overflow: scroll;
    margin-top: 6px;
}

.polls3 table {
    font-family: 'helvetica neue', helvetica, sans-serif;
    font-size: 12px;
    font-weight: 500;
    border-collapse: collapse;
    border-spacing: 0;
}

.polls3 table thead tr {
    border-bottom: 1px solid #222;
}

.polls3 table thead tr th {
    text-transform: uppercase;
    font-weight: 500;
    vertical-align: bottom;
    text-align: left !important;
}

.polls3 table thead tr th.rotate {
    height: 65px;
    width: 41px;
    padding: 0;
    position: relative;
}

.polls3 table thead tr th.rotate>div {
    position: absolute;
    left: 0;
    top: 0;
}

.polls3 table thead tr th.rotate>div svg line {
    stroke-width: 1;
    stroke: #cdcdcd;
}

.polls3 table tbody tr td {
    vertical-align: middle;
}

.polls3 table tbody tr td.dates {
    padding-left: 5px;
    min-width: 90px;
    font-size: 11px;
    text-transform: uppercase;
    color: #999;
    text-align: left;
}

.polls3 table tbody tr td.just-text {
    padding-left: 5px;
    min-width: 80px;
    font-size: 13px;
    text-align: left;
}

.polls3 table tbody tr td.grade {
    text-align: center;
    padding-left: 10px;
    border-right: 1px solid #222;
    width: 70px;
    min-width: 70px;
    font-size: 11px;
}

.polls3 table tbody tr td.grade>div {
    border: 2px solid;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
}

.polls3 table tbody tr td.sample {
    width: 65px;
    min-width: 65px;
    font-size: 13px;
    text-align: right;
    font-family: "DecimaMonoPro", monospace;
    margin-right: 5px;
    padding-left: 5px;
    text-transform: uppercase;
}

.polls3 table tbody tr td.weight {
    font-size: 13px;
    text-align: right;
    font-family: "DecimaMonoPro", monospace;
    width: 90px;
    min-width: 90px;
    border-right: 1px solid #222;
    text-transform: uppercase;
    padding-left: 5px;
}

.signal {
    width: 35px;
    height: 18px;
    margin: 0;
    padding: 0;
    display: table;
    float: left;
}

.bar {
    margin-left: 5%;
    padding: 0;
    vertical: align-bottom;
    width: 12%;
    display: inline-block;
}

.polls3 table tbody tr td.heat {
    padding: 0;
}

.polls3 table tbody tr td.heat>div {
    width: 40px;
    min-width: 40px;
    height: 50px;
    font-family: "DecimaMonoPro", monospace;
    font-size: 13px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.polls3 table tbody tr td.adj-leader {
    width: 65px;
    min-width: 65px;
    font-weight: 700;
    font-size: 13px;
    text-align: left;
    padding-left: 5px;
}

</style>