ErnestK/index.html

## index.html
<div class="page">

  <div class="page-header">
  <div class="table-row">
    <div class="column index">#</div>
    <div class="wrapper attributes">
      <div class="wrapper title-comment-module-reporter">
        <div class="wrapper title-comment">
          <div class="column title">Title</div>
          <div class="column comment">Comment</div>
        </div>
        <div class="wrapper module-reporter">
          <div class="column module">Module</div>
          <div class="column reporter">Reporter</div>
        </div>
      </div>
      <div class="wrapper status-owner-severity">
        <div class="wrapper status-owner">
          <div class="column status">Status</div>
          <div class="column owner">Owner</div>
        </div>
        <div class="column severity">Severity</div>
      </div>
    </div>
    <div class="wrapper icons">
      <div title="Watch" class="column watch">
        <span class="glyphicon glyphicon-eye-open"></span>
      </div>
      <div title="Add comment" class="column add-comment">
        <span class="glyphicon glyphicon-comment"></span>
      </div>
    </div>
    <div class="wrapper dates">
      <div class="column date">Created</div>
      <div class="column date">Updated</div>
      <div class="column date">Due</div>
    </div>
  </div>
    </div>

<div class="page-content">
  <div class="table-row">
    <div class="column index">1</div>
    <div class="wrapper attributes">
      <div class="wrapper title-comment-module-reporter">
        <div class="wrapper title-comment">
          <div class="column title">App crashes when dragged by title bar</div>
          <div class="column comment">Eddie, can you please take a look. We want this fixed pretty soon.</div>
        </div>
        <div class="wrapper module-reporter">
          <div class="column module">Main App</div>
          <div class="column reporter">Ravan</div>
        </div>
      </div>
      <div class="wrapper status-owner-severity">
        <div class="wrapper status-owner">
          <div class="column status"><span class="label label-primary">Open</span></div>
          <div class="column owner">Eddie</div>
        </div>
        <div class="column severity high">High</div>
      </div>
    </div>
    <div class="wrapper icons">
      <div class="column watch"><span class="glyphicon glyphicon-eye-open active" /></div>
      <div class="column add-comment"><span class="glyphicon glyphicon-comment" /></div>
    </div>
    <div class="wrapper dates">
      <div class="column date">Feb-1, 2016</div>
      <div class="column date">Mar-13, 2016</div>
      <div class="column date">Apr-4, 2016</div>
    </div>
  </div>

  <div class="table-row">
    <div class="column index">2</div>
    <div class="wrapper attributes">
      <div class="wrapper title-comment-module-reporter">
        <div class="wrapper title-comment">
          <div class="column title">Unable to save the data when using Enter key instead of clicking on submit button.</div>
          <div class="column comment">Let me take this up.</div>
        </div>
        <div class="wrapper module-reporter">
          <div class="column module">Save Screen</div>
          <div class="column reporter">Kiran</div>
        </div>
      </div>
      <div class="wrapper status-owner-severity">
        <div class="wrapper status-owner">
          <div class="column status"><span class="label label-primary">Open</span></div>
          <div class="column owner">Vasan</div>
        </div>
        <div class="column severity medium">Medium</div>
      </div>
    </div>
    <div class="wrapper icons">
      <div class="column watch"><span class="glyphicon glyphicon-eye-open active" /></div>
      <div class="column add-comment"><span class="glyphicon glyphicon-comment active" /></div>
    </div>
    <div class="wrapper dates">
      <div class="column date">Mar-3, 2016</div>
      <div class="column date">Apr-4, 2016</div>
      <div class="column date">May-15, 2016</div>
    </div>
  </div>

  <div class="table-row">
    <div class="column index">3</div>
    <div class="wrapper attributes">
      <div class="wrapper title-comment-module-reporter">
        <div class="wrapper title-comment">
          <div class="column title">Improper alignment in Export section</div>
          <div class="column comment">Hey, I am not able to reproduct this. Can you please attach a screenshot?</div>
        </div>
        <div class="wrapper module-reporter">
          <div class="column module">Exports</div>
          <div class="column reporter">Ravan</div>
        </div>
      </div>
      <div class="wrapper status-owner-severity">
        <div class="wrapper status-owner">
          <div class="column status"><span class="label label-success">In Progress</span></div>
          <div class="column owner">Pieta</div>
        </div>
        <div class="column severity low">Low</div>
      </div>
    </div>
    <div class="wrapper icons">
      <div class="column watch"><span class="glyphicon glyphicon-eye-open" /></div>
      <div class="column add-comment"><span class="glyphicon glyphicon-comment active" /></div>
    </div>
    <div class="wrapper dates">
      <div class="column date">Apr-14, 2016</div>
      <div class="column date">May-5, 2016</div>
      <div class="column date">Jun-6, 2016</div>
    </div>
  </div>

    <div class="table-row">
    <div class="column index">4</div>
    <div class="wrapper attributes">
      <div class="wrapper title-comment-module-reporter">
        <div class="wrapper title-comment">
          <div class="column title">Improper alignment in Export section</div>
          <div class="column comment">Hey, I am not able to reproduct this. Can you please attach a screenshot?</div>
        </div>
        <div class="wrapper module-reporter">
          <div class="column module">Exports</div>
          <div class="column reporter">Ravan</div>
        </div>
      </div>
      <div class="wrapper status-owner-severity">
        <div class="wrapper status-owner">
          <div class="column status"><span class="label label-success">In Progress</span></div>
          <div class="column owner">Pieta</div>
        </div>
        <div class="column severity low">Low</div>
      </div>
    </div>
    <div class="wrapper icons">
      <div class="column watch"><span class="glyphicon glyphicon-eye-open" /></div>
      <div class="column add-comment"><span class="glyphicon glyphicon-comment active" /></div>
    </div>
    <div class="wrapper dates">
      <div class="column date">Apr-14, 2016</div>
      <div class="column date">May-5, 2016</div>
      <div class="column date">Jun-6, 2016</div>
    </div>
  </div>

    <div class="table-row">
    <div class="column index">5</div>
    <div class="wrapper attributes">
      <div class="wrapper title-comment-module-reporter">
        <div class="wrapper title-comment">
          <div class="column title">Improper alignment in Export section</div>
          <div class="column comment">Hey, I am not able to reproduct this. Can you please attach a screenshot?</div>
        </div>
        <div class="wrapper module-reporter">
          <div class="column module">Exports</div>
          <div class="column reporter">Ravan</div>
        </div>
      </div>
      <div class="wrapper status-owner-severity">
        <div class="wrapper status-owner">
          <div class="column status"><span class="label label-success">In Progress</span></div>
          <div class="column owner">Pieta</div>
        </div>
        <div class="column severity low">Low</div>
      </div>
    </div>
    <div class="wrapper icons">
      <div class="column watch"><span class="glyphicon glyphicon-eye-open" /></div>
      <div class="column add-comment"><span class="glyphicon glyphicon-comment active" /></div>
    </div>
    <div class="wrapper dates">
      <div class="column date">Apr-14, 2016</div>
      <div class="column date">May-5, 2016</div>
      <div class="column date">Jun-6, 2016</div>
    </div>
  </div>


    <div class="table-row">
    <div class="column index">6</div>
    <div class="wrapper attributes">
      <div class="wrapper title-comment-module-reporter">
        <div class="wrapper title-comment">
          <div class="column title">Improper alignment in Export section</div>
          <div class="column comment">Hey, I am not able to reproduct this. Can you please attach a screenshot?</div>
        </div>
        <div class="wrapper module-reporter">
          <div class="column module">Exports</div>
          <div class="column reporter">Ravan</div>
        </div>
      </div>
      <div class="wrapper status-owner-severity">
        <div class="wrapper status-owner">
          <div class="column status"><span class="label label-success">In Progress</span></div>
          <div class="column owner">Pieta</div>
        </div>
        <div class="column severity low">Low</div>
      </div>
    </div>
    <div class="wrapper icons">
      <div class="column watch"><span class="glyphicon glyphicon-eye-open" /></div>
      <div class="column add-comment"><span class="glyphicon glyphicon-comment active" /></div>
    </div>
    <div class="wrapper dates">
      <div class="column date">Apr-14, 2016</div>
      <div class="column date">May-5, 2016</div>
      <div class="column date">Jun-6, 2016</div>
    </div>
  </div>


    <div class="table-row">
    <div class="column index">7</div>
    <div class="wrapper attributes">
      <div class="wrapper title-comment-module-reporter">
        <div class="wrapper title-comment">
          <div class="column title">Improper alignment in Export section</div>
          <div class="column comment">Hey, I am not able to reproduct this. Can you please attach a screenshot?</div>
        </div>
        <div class="wrapper module-reporter">
          <div class="column module">Exports</div>
          <div class="column reporter">Ravan</div>
        </div>
      </div>
      <div class="wrapper status-owner-severity">
        <div class="wrapper status-owner">
          <div class="column status"><span class="label label-success">In Progress</span></div>
          <div class="column owner">Pieta</div>
        </div>
        <div class="column severity low">Low</div>
      </div>
    </div>
    <div class="wrapper icons">
      <div class="column watch"><span class="glyphicon glyphicon-eye-open" /></div>
      <div class="column add-comment"><span class="glyphicon glyphicon-comment active" /></div>
    </div>
    <div class="wrapper dates">
      <div class="column date">Apr-14, 2016</div>
      <div class="column date">May-5, 2016</div>
      <div class="column date">Jun-6, 2016</div>
    </div>
  </div>


    <div class="table-row">
    <div class="column index">8</div>
    <div class="wrapper attributes">
      <div class="wrapper title-comment-module-reporter">
        <div class="wrapper title-comment">
          <div class="column title">Improper alignment in Export section</div>
          <div class="column comment">Hey, I am not able to reproduct this. Can you please attach a screenshot?</div>
        </div>
        <div class="wrapper module-reporter">
          <div class="column module">Exports</div>
          <div class="column reporter">Ravan</div>
        </div>
      </div>
      <div class="wrapper status-owner-severity">
        <div class="wrapper status-owner">
          <div class="column status"><span class="label label-success">In Progress</span></div>
          <div class="column owner">Pieta</div>
        </div>
        <div class="column severity low">Low</div>
      </div>
    </div>
    <div class="wrapper icons">
      <div class="column watch"><span class="glyphicon glyphicon-eye-open" /></div>
      <div class="column add-comment"><span class="glyphicon glyphicon-comment active" /></div>
    </div>
    <div class="wrapper dates">
      <div class="column date">Apr-14, 2016</div>
      <div class="column date">May-5, 2016</div>
      <div class="column date">Jun-6, 2016</div>
    </div>
  </div>


    <div class="table-row">
    <div class="column index">9</div>
    <div class="wrapper attributes">
      <div class="wrapper title-comment-module-reporter">
        <div class="wrapper title-comment">
          <div class="column title">Improper alignment in Export section</div>
          <div class="column comment">Hey, I am not able to reproduct this. Can you please attach a screenshot?</div>
        </div>
        <div class="wrapper module-reporter">
          <div class="column module">Exports</div>
          <div class="column reporter">Ravan</div>
        </div>
      </div>
      <div class="wrapper status-owner-severity">
        <div class="wrapper status-owner">
          <div class="column status"><span class="label label-success">In Progress</span></div>
          <div class="column owner">Pieta</div>
        </div>
        <div class="column severity low">Low</div>
      </div>
    </div>
    <div class="wrapper icons">
      <div class="column watch"><span class="glyphicon glyphicon-eye-open" /></div>
      <div class="column add-comment"><span class="glyphicon glyphicon-comment active" /></div>
    </div>
    <div class="wrapper dates">
      <div class="column date">Apr-14, 2016</div>
      <div class="column date">May-5, 2016</div>
      <div class="column date">Jun-6, 2016</div>
    </div>
  </div>

    <div class="table-row">
    <div class="column index">10</div>
    <div class="wrapper attributes">
      <div class="wrapper title-comment-module-reporter">
        <div class="wrapper title-comment">
          <div class="column title">Improper alignment in Export section</div>
          <div class="column comment">Hey, I am not able to reproduct this. Can you please attach a screenshot?</div>
        </div>
        <div class="wrapper module-reporter">
          <div class="column module">Exports</div>
          <div class="column reporter">Ravan</div>
        </div>
      </div>
      <div class="wrapper status-owner-severity">
        <div class="wrapper status-owner">
          <div class="column status"><span class="label label-success">In Progress</span></div>
          <div class="column owner">Pieta</div>
        </div>
        <div class="column severity low">Low</div>
      </div>
    </div>
    <div class="wrapper icons">
      <div class="column watch"><span class="glyphicon glyphicon-eye-open" /></div>
      <div class="column add-comment"><span class="glyphicon glyphicon-comment active" /></div>
    </div>
    <div class="wrapper dates">
      <div class="column date">Apr-14, 2016</div>
      <div class="column date">May-5, 2016</div>
      <div class="column date">Jun-6, 2016</div>
    </div>
  </div>

    <div class="table-row">
    <div class="column index">11</div>
    <div class="wrapper attributes">
      <div class="wrapper title-comment-module-reporter">
        <div class="wrapper title-comment">
          <div class="column title">Improper alignment in Export section</div>
          <div class="column comment">Hey, I am not able to reproduct this. Can you please attach a screenshot?</div>
        </div>
        <div class="wrapper module-reporter">
          <div class="column module">Exports</div>
          <div class="column reporter">Ravan</div>
        </div>
      </div>
      <div class="wrapper status-owner-severity">
        <div class="wrapper status-owner">
          <div class="column status"><span class="label label-success">In Progress</span></div>
          <div class="column owner">Pieta</div>
        </div>
        <div class="column severity low">Low</div>
      </div>
    </div>
    <div class="wrapper icons">
      <div class="column watch"><span class="glyphicon glyphicon-eye-open" /></div>
      <div class="column add-comment"><span class="glyphicon glyphicon-comment active" /></div>
    </div>
    <div class="wrapper dates">
      <div class="column date">Apr-14, 2016</div>
      <div class="column date">May-5, 2016</div>
      <div class="column date">Jun-6, 2016</div>
    </div>
  </div>


    <div class="table-row">
    <div class="column index">12</div>
    <div class="wrapper attributes">
      <div class="wrapper title-comment-module-reporter">
        <div class="wrapper title-comment">
          <div class="column title">Improper alignment in Export section</div>
          <div class="column comment">Hey, I am not able to reproduct this. Can you please attach a screenshot?</div>
        </div>
        <div class="wrapper module-reporter">
          <div class="column module">Exports</div>
          <div class="column reporter">Ravan</div>
        </div>
      </div>
      <div class="wrapper status-owner-severity">
        <div class="wrapper status-owner">
          <div class="column status"><span class="label label-success">In Progress</span></div>
          <div class="column owner">Pieta</div>
        </div>
        <div class="column severity low">Low</div>
      </div>
    </div>
    <div class="wrapper icons">
      <div class="column watch"><span class="glyphicon glyphicon-eye-open" /></div>
      <div class="column add-comment"><span class="glyphicon glyphicon-comment active" /></div>
    </div>
    <div class="wrapper dates">
      <div class="column date">Apr-14, 2016</div>
      <div class="column date">May-5, 2016</div>
      <div class="column date">Jun-6, 2016</div>
    </div>
  </div>


    <div class="table-row">
    <div class="column index">13</div>
    <div class="wrapper attributes">
      <div class="wrapper title-comment-module-reporter">
        <div class="wrapper title-comment">
          <div class="column title">Improper alignment in Export section</div>
          <div class="column comment">Hey, I am not able to reproduct this. Can you please attach a screenshot?</div>
        </div>
        <div class="wrapper module-reporter">
          <div class="column module">Exports</div>
          <div class="column reporter">Ravan</div>
        </div>
      </div>
      <div class="wrapper status-owner-severity">
        <div class="wrapper status-owner">
          <div class="column status"><span class="label label-success">In Progress</span></div>
          <div class="column owner">Pieta</div>
        </div>
        <div class="column severity low">Low</div>
      </div>
    </div>
    <div class="wrapper icons">
      <div class="column watch"><span class="glyphicon glyphicon-eye-open" /></div>
      <div class="column add-comment"><span class="glyphicon glyphicon-comment active" /></div>
    </div>
    <div class="wrapper dates">
      <div class="column date">Apr-14, 2016</div>
      <div class="column date">May-5, 2016</div>
      <div class="column date">Jun-6, 2016</div>
    </div>
  </div>

    <div class="table-row">
    <div class="column index">14</div>
    <div class="wrapper attributes">
      <div class="wrapper title-comment-module-reporter">
        <div class="wrapper title-comment">
          <div class="column title">Improper alignment in Export section</div>
          <div class="column comment">Hey, I am not able to reproduct this. Can you please attach a screenshot?</div>
        </div>
        <div class="wrapper module-reporter">
          <div class="column module">Exports</div>
          <div class="column reporter">Ravan</div>
        </div>
      </div>
      <div class="wrapper status-owner-severity">
        <div class="wrapper status-owner">
          <div class="column status"><span class="label label-success">In Progress</span></div>
          <div class="column owner">Pieta</div>
        </div>
        <div class="column severity low">Low</div>
      </div>
    </div>
    <div class="wrapper icons">
      <div class="column watch"><span class="glyphicon glyphicon-eye-open" /></div>
      <div class="column add-comment"><span class="glyphicon glyphicon-comment active" /></div>
    </div>
    <div class="wrapper dates">
      <div class="column date">Apr-14, 2016</div>
      <div class="column date">May-5, 2016</div>
      <div class="column date">Jun-6, 2016</div>
    </div>
  </div>

    <div class="table-row">
    <div class="column index">15</div>
    <div class="wrapper attributes">
      <div class="wrapper title-comment-module-reporter">
        <div class="wrapper title-comment">
          <div class="column title">Improper alignment in Export section</div>
          <div class="column comment">Hey, I am not able to reproduct this. Can you please attach a screenshot?</div>
        </div>
        <div class="wrapper module-reporter">
          <div class="column module">Exports</div>
          <div class="column reporter">Ravan</div>
        </div>
      </div>
      <div class="wrapper status-owner-severity">
        <div class="wrapper status-owner">
          <div class="column status"><span class="label label-success">In Progress</span></div>
          <div class="column owner">Pieta</div>
        </div>
        <div class="column severity low">Low</div>
      </div>
    </div>
    <div class="wrapper icons">
      <div class="column watch"><span class="glyphicon glyphicon-eye-open" /></div>
      <div class="column add-comment"><span class="glyphicon glyphicon-comment active" /></div>
    </div>
    <div class="wrapper dates">
      <div class="column date">Apr-14, 2016</div>
      <div class="column date">May-5, 2016</div>
      <div class="column date">Jun-6, 2016</div>
    </div>
  </div>

    <div class="table-row">
    <div class="column index">16</div>
    <div class="wrapper attributes">
      <div class="wrapper title-comment-module-reporter">
        <div class="wrapper title-comment">
          <div class="column title">Improper alignment in Export section</div>
          <div class="column comment">Hey, I am not able to reproduct this. Can you please attach a screenshot?</div>
        </div>
        <div class="wrapper module-reporter">
          <div class="column module">Exports</div>
          <div class="column reporter">Ravan</div>
        </div>
      </div>
      <div class="wrapper status-owner-severity">
        <div class="wrapper status-owner">
          <div class="column status"><span class="label label-success">In Progress</span></div>
          <div class="column owner">Pieta</div>
        </div>
        <div class="column severity low">Low</div>
      </div>
    </div>
    <div class="wrapper icons">
      <div class="column watch"><span class="glyphicon glyphicon-eye-open" /></div>
      <div class="column add-comment"><span class="glyphicon glyphicon-comment active" /></div>
    </div>
    <div class="wrapper dates">
      <div class="column date">Apr-14, 2016</div>
      <div class="column date">May-5, 2016</div>
      <div class="column date">Jun-6, 2016</div>
    </div>
  </div>

    <div class="table-row">
    <div class="column index">17</div>
    <div class="wrapper attributes">
      <div class="wrapper title-comment-module-reporter">
        <div class="wrapper title-comment">
          <div class="column title">Improper alignment in Export section</div>
          <div class="column comment">Hey, I am not able to reproduct this. Can you please attach a screenshot?</div>
        </div>
        <div class="wrapper module-reporter">
          <div class="column module">Exports</div>
          <div class="column reporter">Ravan</div>
        </div>
      </div>
      <div class="wrapper status-owner-severity">
        <div class="wrapper status-owner">
          <div class="column status"><span class="label label-success">In Progress</span></div>
          <div class="column owner">Pieta</div>
        </div>
        <div class="column severity low">Low</div>
      </div>
    </div>
    <div class="wrapper icons">
      <div class="column watch"><span class="glyphicon glyphicon-eye-open" /></div>
      <div class="column add-comment"><span class="glyphicon glyphicon-comment active" /></div>
    </div>
    <div class="wrapper dates">
      <div class="column date">Apr-14, 2016</div>
      <div class="column date">May-5, 2016</div>
      <div class="column date">Jun-6, 2016</div>
    </div>
  </div>


    <div class="table-row">
    <div class="column index">18</div>
    <div class="wrapper attributes">
      <div class="wrapper title-comment-module-reporter">
        <div class="wrapper title-comment">
          <div class="column title">Improper alignment in Export section</div>
          <div class="column comment">Hey, I am not able to reproduct this. Can you please attach a screenshot?</div>
        </div>
        <div class="wrapper module-reporter">
          <div class="column module">Exports</div>
          <div class="column reporter">Ravan</div>
        </div>
      </div>
      <div class="wrapper status-owner-severity">
        <div class="wrapper status-owner">
          <div class="column status"><span class="label label-success">In Progress</span></div>
          <div class="column owner">Pieta</div>
        </div>
        <div class="column severity low">Low</div>
      </div>
    </div>
    <div class="wrapper icons">
      <div class="column watch"><span class="glyphicon glyphicon-eye-open" /></div>
      <div class="column add-comment"><span class="glyphicon glyphicon-comment active" /></div>
    </div>
    <div class="wrapper dates">
      <div class="column date">Apr-14, 2016</div>
      <div class="column date">May-5, 2016</div>
      <div class="column date">Jun-6, 2016</div>
    </div>
  </div>

    <div class="table-row">
    <div class="column index">19</div>
    <div class="wrapper attributes">
      <div class="wrapper title-comment-module-reporter">
        <div class="wrapper title-comment">
          <div class="column title">Improper alignment in Export section</div>
          <div class="column comment">Hey, I am not able to reproduct this. Can you please attach a screenshot?</div>
        </div>
        <div class="wrapper module-reporter">
          <div class="column module">Exports</div>
          <div class="column reporter">Ravan</div>
        </div>
      </div>
      <div class="wrapper status-owner-severity">
        <div class="wrapper status-owner">
          <div class="column status"><span class="label label-success">In Progress</span></div>
          <div class="column owner">Pieta</div>
        </div>
        <div class="column severity low">Low</div>
      </div>
    </div>
    <div class="wrapper icons">
      <div class="column watch"><span class="glyphicon glyphicon-eye-open" /></div>
      <div class="column add-comment"><span class="glyphicon glyphicon-comment active" /></div>
    </div>
    <div class="wrapper dates">
      <div class="column date">Apr-14, 2016</div>
      <div class="column date">May-5, 2016</div>
      <div class="column date">Jun-6, 2016</div>
    </div>
  </div>
</div>
</div>

## really-responsive-tables-using-css-flexbox-complex.markdown

      
    Raw
  

              really-responsive-tables-using-css-flexbox-complex.markdown
            
          
    Really Responsive Tables using CSS Flexbox (complex)

Really Responsive Tables using CSS Flexbox - part 4. A complex example with lots of different kinds of fields, and a very custom wrapping logic. This is part of the Really Responsive Tables pen collection. See also this post on hashnode
A Pen by Ernest on CodePen.
License.

  
## style.less
/*
 * Define the widths: play around with these
 * to get a best fit.
 */

@index-width: 25px;
@title-width: 220px;
@comment-width: 120px;
@module-width: 110px;
@reporter-width: 85px;
@status-width: 95px;
@owner-width: 75px;
@severity-width: 80px;
@icon-width: 18px;
@date-width: 120px;
@margin-width: 30px;

/*
 * Basic styles, good for a large display. Everything fits in
 * one row, no wrapping. All text based cells grow equally.
 */
// Main container - row container
.table-row {
  display: flex;          display: -webkit-flex;
  flex-direction: row;    -webkit-flex-direction: row;
  flex-wrap: no-wrap;     -webkit-flex-wrap: no-wrap;
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}

// Wrappers around cells and other wrappers
.wrapper {
  display: flex; display: -webkit-flex;
  flex-direction: row; -webkit-flex-direction: row;
}

// leaf level containers (cells): common properties
.column {
  flex-grow: 0; -webkit-flex-grow: 0;
  flex-shrink: 0; -webkit-flex-shrink: 0;
  vertical-align: top;
}

// leaf level containers: widths
.index { width: @index-width; }
.title { width: @title-width; }
.module { width: @module-width; }
.reporter { width: @reporter-width; }
.status { width: @status-width; }
.owner { width: @owner-width; }
.severity { width: @severity-width; }
.watch, .add-comment { width: @icon-width; }
.date { width: @date-width; }

// leaf level containers (cells): special properties
.index {
  text-align: center;
}

.title {
  font-weight: bold;
  color: #337AB5;
}

.comment {
  width: @comment-width;
}

// these are growable text containers, with ellipsis to show truncated text
.title, .comment {
  flex-grow: 1; -webkit-flex-grow: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-right: 4px;
}

.date {
  width: @date-width;
  text-align: right;
  padding-right: 4px;
}

/* growable wrappers */
.title-comment, .title-comment-module-reporter, .attributes {
  flex-grow: 1; -webkit-flex-grow: 1;
}

/*
 * Media queries: optimize for different screen widths.
 */

// Wrapper widths
@title-comment-width: max(@title-width, @comment-width);
@module-reporter-width: max(@module-width, @reporter-width);
@status-owner-width: max(@status-width, @owner-width);
@title-comment-module-reporter-width: max(@title-width, @comment-width,
  (@module-width + @reporter-width) );
@status-owner-severity-width: max(@status-width, @owner-width,
  @severity-width);
@all-attributes-width: max(@title-width, @comment-width,
  (@module-width + @reporter-width), (@status-width + @owner-width));

.horizontal() {
  flex-direction: row;        -webkit-flex-direction: row;
}

.vertical() {
  // Let the wrapper flex vertically, so we get 2 rows
  flex-direction: column;     -webkit-flex-direction: column;
  // can't have the children grow, since this now means vertical growth
  div {
    flex-grow: 0;  -webkit-flex-grow: 0;
  }
}

.vertical-growing() {
  .vertical();
  > div {
    // Let immediate child divs grow horizontally, 100% to fill the wrapper
    width: 100%;
  }
}

/*
 * Media breaks.
 */

// First break: as many 2-row fields as possible. This will leave Severity
// and Dates still horizontal, as they are odd numbered
@media all and (max-width: (@margin-width * 2 + @index-width
  + @title-width + @comment-width + @module-width + @reporter-width
  + @status-width + @owner-width + @severity-width + @icon-width * 2
  + @date-width * 3) ) {

  .title-comment {
    .vertical-growing();
    width: @title-comment-width;
  }
  .module-reporter, .status-owner {
    .vertical();
  }
}

// Next: as many 3-rows as possible
@media all and (max-width: (@margin-width * 2 + @index-width
  + @title-comment-width + @module-reporter-width
  + @status-owner-width  + @severity-width
  + @icon-width * 2 + @date-width * 3) ) {

  // Change module-report back to horizontal, keep it under title and comment
  // So, we have 3 rows: title, comment, module-reporter
  .module-reporter {
    .horizontal();
  }
  .title-comment-module-reporter {
    .vertical-growing();
    width: @title-comment-module-reporter-width;
  }

  // Line up status, owner, severity into the next column
  .status-owner-severity {
    .vertical();
  }
  // Line up all icons in one column, even though there's only two of them
  .icons {
    .vertical();
  }
  // Line up all dates in one column
  .dates {
    .vertical();
  }
}

// Last break: 4 columns: index, attributes, icons, dates
@media all and (max-width: (@margin-width * 2 + @index-width
  + @title-comment-module-reporter-width + @status-owner-severity-width
  + @icon-width + @date-width) ) {

  // looks better with a little padding on mobile devices
//  .table-row {
//    padding-left: 4px;
//    padding-right: 4px;
//  }

  // All attributes: title, comment, module-reporter, status-owner, severity
  .attributes {
    .vertical-growing();
    width: @all-attributes-width;
  }
  .module-reporter, .status-owner {
    .horizontal();
  }
}

/*
 * General good-look styles
 */
.table-row {
  border-bottom: 1px solid #e0e0e0;
  border-collapse: collapse;
  padding-top: 2px;
}

html,
body,
.page {
  height: 100%; /* needed for proper layout */
}

body {
  overflow: hidden;
}


.page {
  display: flex;
  flex-direction: column;
}

.page-header {
  flex: 0 0 auto;
  background-color: #dcdcdc;
}

.page-content {
  flex: 1 1 auto;
  position: relative;/* need this to position inner content */
  overflow-y: scroll;
}

.glyphicon {
  color: #DDDDDD;
}

.header .glyphicon {
  color: #333
}

.glyphicon-eye-open.active {
  color: blue;
}

.glyphicon-comment.active {
  color: #3EBB0D;
}

.glyphicon:hover {
  color: #666;
  cursor: pointer;
  text-decoration: underline;
}

.reporter {
  color: #999999;
}
.comment {
  font-style: italic;
}

.severity.high { color: red; }
.severity.medium { color: blue; }
.severity.low { color: green; }


## styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
	/*
	* Define the widths: play around with these
	* to get a best fit.
	*/

	@index-width: 25px;
	@title-width: 220px;
	@comment-width: 120px;
	@module-width: 110px;
	@reporter-width: 85px;
	@status-width: 95px;
	@owner-width: 75px;
	@severity-width: 80px;
	@icon-width: 18px;
	@date-width: 120px;
	@margin-width: 30px;

	/*
	* Basic styles, good for a large display. Everything fits in
	* one row, no wrapping. All text based cells grow equally.
	*/
	// Main container - row container
	.table-row {
	display: flex; display: -webkit-flex;
	flex-direction: row; -webkit-flex-direction: row;
	flex-wrap: no-wrap; -webkit-flex-wrap: no-wrap;
	width: 100%;
	padding-left: 15px;
	padding-right: 15px;
	}

	// Wrappers around cells and other wrappers
	.wrapper {
	display: flex; display: -webkit-flex;
	flex-direction: row; -webkit-flex-direction: row;
	}

	// leaf level containers (cells): common properties
	.column {
	flex-grow: 0; -webkit-flex-grow: 0;
	flex-shrink: 0; -webkit-flex-shrink: 0;
	vertical-align: top;
	}

	// leaf level containers: widths
	.index { width: @index-width; }
	.title { width: @title-width; }
	.module { width: @module-width; }
	.reporter { width: @reporter-width; }
	.status { width: @status-width; }
	.owner { width: @owner-width; }
	.severity { width: @severity-width; }
	.watch, .add-comment { width: @icon-width; }
	.date { width: @date-width; }

	// leaf level containers (cells): special properties
	.index {
	text-align: center;
	}

	.title {
	font-weight: bold;
	color: #337AB5;
	}

	.comment {
	width: @comment-width;
	}

	// these are growable text containers, with ellipsis to show truncated text
	.title, .comment {
	flex-grow: 1; -webkit-flex-grow: 1;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	padding-right: 4px;
	}

	.date {
	width: @date-width;
	text-align: right;
	padding-right: 4px;
	}

	/* growable wrappers */
	.title-comment, .title-comment-module-reporter, .attributes {
	flex-grow: 1; -webkit-flex-grow: 1;
	}

	/*
	* Media queries: optimize for different screen widths.
	*/

	// Wrapper widths
	@title-comment-width: max(@title-width, @comment-width);
	@module-reporter-width: max(@module-width, @reporter-width);
	@status-owner-width: max(@status-width, @owner-width);
	@title-comment-module-reporter-width: max(@title-width, @comment-width,
	(@module-width + @reporter-width) );
	@status-owner-severity-width: max(@status-width, @owner-width,
	@severity-width);
	@all-attributes-width: max(@title-width, @comment-width,
	(@module-width + @reporter-width), (@status-width + @owner-width));

	.horizontal() {
	flex-direction: row; -webkit-flex-direction: row;
	}

	.vertical() {
	// Let the wrapper flex vertically, so we get 2 rows
	flex-direction: column; -webkit-flex-direction: column;
	// can't have the children grow, since this now means vertical growth
	div {
	flex-grow: 0; -webkit-flex-grow: 0;
	}
	}

	.vertical-growing() {
	.vertical();
	> div {
	// Let immediate child divs grow horizontally, 100% to fill the wrapper
	width: 100%;
	}
	}

	/*
	* Media breaks.
	*/

	// First break: as many 2-row fields as possible. This will leave Severity
	// and Dates still horizontal, as they are odd numbered
	@media all and (max-width: (@margin-width * 2 + @index-width
	+ @title-width + @comment-width + @module-width + @reporter-width
	+ @status-width + @owner-width + @severity-width + @icon-width * 2
	+ @date-width * 3) ) {

	.title-comment {
	.vertical-growing();
	width: @title-comment-width;
	}
	.module-reporter, .status-owner {
	.vertical();
	}
	}

	// Next: as many 3-rows as possible
	@media all and (max-width: (@margin-width * 2 + @index-width
	+ @title-comment-width + @module-reporter-width
	+ @status-owner-width + @severity-width
	+ @icon-width * 2 + @date-width * 3) ) {

	// Change module-report back to horizontal, keep it under title and comment
	// So, we have 3 rows: title, comment, module-reporter
	.module-reporter {
	.horizontal();
	}
	.title-comment-module-reporter {
	.vertical-growing();
	width: @title-comment-module-reporter-width;
	}

	// Line up status, owner, severity into the next column
	.status-owner-severity {
	.vertical();
	}
	// Line up all icons in one column, even though there's only two of them
	.icons {
	.vertical();
	}
	// Line up all dates in one column
	.dates {
	.vertical();
	}
	}

	// Last break: 4 columns: index, attributes, icons, dates
	@media all and (max-width: (@margin-width * 2 + @index-width
	+ @title-comment-module-reporter-width + @status-owner-severity-width
	+ @icon-width + @date-width) ) {

	// looks better with a little padding on mobile devices
	// .table-row {
	// padding-left: 4px;
	// padding-right: 4px;
	// }

	// All attributes: title, comment, module-reporter, status-owner, severity
	.attributes {
	.vertical-growing();
	width: @all-attributes-width;
	}
	.module-reporter, .status-owner {
	.horizontal();
	}
	}

	/*
	* General good-look styles
	*/
	.table-row {
	border-bottom: 1px solid #e0e0e0;
	border-collapse: collapse;
	padding-top: 2px;
	}

	html,
	body,
	.page {
	height: 100%; /* needed for proper layout */
	}

	body {
	overflow: hidden;
	}


	.page {
	display: flex;
	flex-direction: column;
	}

	.page-header {
	flex: 0 0 auto;
	background-color: #dcdcdc;
	}

	.page-content {
	flex: 1 1 auto;
	position: relative;/* need this to position inner content */
	overflow-y: scroll;
	}

	.glyphicon {
	color: #DDDDDD;
	}

	.header .glyphicon {
	color: #333
	}

	.glyphicon-eye-open.active {
	color: blue;
	}

	.glyphicon-comment.active {
	color: #3EBB0D;
	}

	.glyphicon:hover {
	color: #666;
	cursor: pointer;
	text-decoration: underline;
	}

	.reporter {
	color: #999999;
	}
	.comment {
	font-style: italic;
	}

	.severity.high { color: red; }
	.severity.medium { color: blue; }
	.severity.low { color: green; }