table alignment

by Faisal Khan Janjua

HTML

<table class="">
  <tr>
    <th>Name</th>
    <th>City</th>
    <th>Profile</th>
    <th>Action</th>
  </tr>
  <tr>
    <td>Name</td>
    <td>City</td>
    <td>Profile</td>
    <td>Action</td>
  </tr>
  <tr>
    <td>Name</td>
    <td>City</td>
    <td>Profile</td>
    <td>Action</td>
  </tr>
  <tr>
    <td>Name</td>
    <td>City</td>
    <td>Profile</td>
    <td>Action</td>
  </tr>
</table>
<hr><table class="selectable">
  <tr>
    <th></th>
    <th>Name</th>
    <th>City</th>
    <th>Profile</th>
    <th>Action</th>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td>Name</td>
    <td>City</td>
    <td>Profile</td>
    <td>Action</td>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td>Name</td>
    <td>City</td>
    <td>Profile</td>
    <td>Action</td>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td>Name</td>
    <td>City</td>
    <td>Profile</td>
    <td>Action</td>
  </tr>
</table>
<hr>
<table class="hasIcon">
  <tr>
    <th class="hideText">Status</th>
    <th>Name</th>
    <th>City</th>
    <th>Profile</th>
    <th>Action</th>
  </tr>
  <tr>
    <td><span class="icon"></span></td>
    <td>Name</td>
    <td>City</td>
    <td>Profile</td>
    <td>Action</td>
  </tr>
  <tr>
    <td><span class="icon"></span></td>
    <td>Name</td>
    <td>City</td>
    <td>Profile</td>
    <td>Action</td>
  </tr>
  <tr>
    <td><span class="icon"></span></td>
    <td>Name</td>
    <td>City</td>
    <td>Profile</td>
    <td>Action</td>
  </tr>
</table>
<hr>
<table class="selectable hasIcon">
  <tr>
    <th></th>
    <th class="hideText">Status</th>
    <th>Name</th>
    <th>City</th>
    <th>Profile</th>
    <th>Action</th>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td><span class="icon"></span></td>
    <td>Name</td>
    <td>City</td>
    <td>Profile</td>
    <td>Action</td>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td><span class="icon"></span></td>
    <td>Name</td>
    <td>City</td>
    <td>Profile</td>
   ...

SCSS

table.selectable.hasIcon tr td:nth-child(1),
table.selectable.hasIcon tr th:nth-child(1){
  text-align: left;
  margin: 0;
}
table.selectable.hasIcon tr td:nth-child(2) span.icon,
table.selectable.hasIcon tr th.hideText:nth-child(2){
  text-align: left;
  display:block;
  margin:0;
}
table.selectable.hasIcon tr td:nth-child(3){
  text-align: left;
  display:block;
  margin:0;
}
table.selectable.hasIcon tr th:nth-child(3){
  text-align:left;
  margin:0;
}

table.hasIcon tr td:nth-child(1) span.icon{
  text-align:left;
  margin:0;
}
table.hasIcon tr td:nth-child(2){
  text-align:left;
  margin:0;
}
table.hasIcon tr th.hideText:nth-child(1){
  text-align:left;
  margin:0;
}
table.hasIcon tr th:nth-child(2){
  text-align:left;
  margin:0;
}
table.selectable tr td:nth-child(1){
  text-align:left;
  margin:0;
}
table.selectable tr td:nth-child(2){
  text-align:left;
  margin:0;
}
table.selectable tr th:nth-child(2){
  text-align:left;
  margin:0;
}
table tr td:nth-child(1){
  text-align:left;
  margin:0;
}
table tr th:nth-child(1){
  text-align:left;
  margin:0;
}






table td, table th{
  text-align: center;
  border: 1px solid #999;
  border-collapse: collapse;
}
table {
  width: 100%;
}
.icon {
  width: 20px;
  height: 20px;
  background: #444;
  display: block;
  margin: auto;
  border-radius: 50%;
}

JavaScript

alert('ready');