Responsive filestable

by Corentin Ballot

HTML

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> 

<div class="filestable">
  <header class="filestable_header">
    <div class="filestable_header_select"><i class="material-icons">check_box_outline_blank</i></div>
    <div class="filestable_header_name">Name</div>
    <div class="filestable_header_icons"></div>
    <div class="filestable_header_lastupdate">Last update</div>
    <div class="filestable_header_size">Size</div>
  </header>
  <ol class="filestable_content">
    <li class="filestable_content_item">
      <div class="filestable_content_item_select"><i class="material-icons">folder_open</i></div>
      <div class="filestable_content_item_name">Documents</div>
      <div class="filestable_content_item_icons">
        <button><i class="material-icons">mode_edit</i></button>
				<button><i class="material-icons">done</i></button>
				<button><i class="material-icons">clear</i></button>
      </div>
      <div class="filestable_content_item_lastupdate">12/11/2017 15:33</div>
      <div class="filestable_content_item_size">-</div>
    </li>
    <li class="filestable_content_item">
      <div class="filestable_content_item_select"><i class="material-icons">insert_drive_file</i></div>
      <div class="filestable_content_item_name">markdown_cheatsheet.md</div>
      <div class="filestable_content_item_icons">
        <a><i class="material-icons">file_download</i></a>
					<button class="mdl-button"><i class="material-icons">mode_edit</i></button>
					<button class="mdl-button"><i class="material-icons">done</i></button>
					<button class="mdl-button"><i class="material-icons">clear</i></button>
      </div>
      <div class="filestable_content_item_lastupdate">23/01/2018 22:01</div>
      <div class="filestable_content_item_size">2,82 Ko</div>
    </li>
  </ol>
</div>


<table>
  <thead>
	 	<tr>
      <th><span...

CSS

.filestable_header, .filestable_header > * ,
.filestable_content_item, .filestable_content_item > * 
{
  /*border: solid black 1px;*/
}

.filestable {
  font-size: 20px;
}

.filestable_header, .filestable_content_item {
  display: flex;
  align-items: center;
  height: 64px;
}

.filestable_header_select, .filestable_content_item_select {
  width: 50px;
  line-height: 0;
  white-space: nowrap;
}

.filestable_header_name, .filestable_content_item_name {
  flex-grow:20;
  flex-shrink: 20;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filestable_header_icons, .filestable_content_item_icons {
  white-space: nowrap;
}

.filestable_header_lastupdate, .filestable_content_item_lastupdate {
  width: 150px;
  text-align: center;
  white-space: nowrap;
}

.filestable_header_size, .filestable_content_item_size {
  width: 70px;
  text-align: center;
  white-space: nowrap;
}

.filestable_content {
  padding: 0;  
  margin: 0;
}

.filestable_content_item {
  list-style-type: none;
  padding: 0;
}