Alignment of table column

Question

I am trying to make table inside of table meant nested table. Now its look like this screenshot . But i need align from left. Because i have use same count column in each row. You can see what i have tried to get this output.

Thanks in advance

.report-table {
  border-collapse: collapse;
  width: 100%;
  font-family: Arial;
}
.report-table .col-name {
	width: 150px;
}
.report-table .col-title {
	width: 150px;
}
.report-table .col-carried {
	width: 60px;
}
.report-table .col-earned {
	width: 60px;
}
.report-table .col-used {
	width: 60px;
}
.report-table .col-scheduled {
	width: 60px;
}
.report-table .col-balance {
	width: 60px;
}
.report-table .col-to-be {
	width: 60px;
}
.report-table .col-available {
	width: 60px;
}
.report-table .inner-table tr td{
	border: 0;
}

.report-table.hr-table .inner-table {
	background: none;
	border: 0;
}

.report-table.hr-table .inner-table td {
	vertical-align: top;
}

.report-table.hr-table tr {
  border-top: 1px solid #333;
}

.report-table.hr-table td,
.report-table.hr-table th{
  padding: 10px;
  vertical-align: top;
  text-align: left;
}

.report-table.hr-table .inner-table td:first-child {
	padding-left: 0;
}

<table class="tablesorter hr-table hr-table-striped report-table">
  <thead>
    <tr>
      <th class="header col-name">Name<span></span></th>
      <th class="header col-title">Leave Title<span></span></th>
      <th class="header col-carried">Carried Over<span></span></th>
      <th class="header col-earned">Earned<span></span></th>
      <th class="header col-used">Used <span></span></th>
      <th class="header col-scheduled">Scheduled <span></span></th>
      <th class="header col-balance">Balance<span></span></th>
      <th class="header col-to-be">To-be-earned<span></span></th>
      <th class="header col-available">Avaliable<span></span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="col-name"><a href="#">Ethan Hunt</a></td>
      <td colspan="8">
        <table class=" hr-table inner-table">
          <tr>
            <td class="col-title">Vacation</td>
            <td class="col-carried">10</td>
            <td class="col-earned">20</td>
            <td class="col-used">20</td>
            <td class="col-scheduled">5</td>
            <td class="col-balance">0</td>
            <td class="col-to-be">10</td>
            <td class="col-available">5</td>
          </tr>
          <tr>
            <td class="col-title">Sickness</td>
            <td class="col-carried">10</td>
            <td class="col-earned">20</td>
            <td class="col-used">20</td>
            <td class="col-scheduled">5</td>
            <td class="col-balance">0</td>
            <td class="col-to-be">10</td>
            <td class="col-available">5</td>
          </tr>
          <tr>
            <td class="col-title">Training</td>
            <td class="col-carried">10</td>
            <td class="col-earned">20</td>
            <td class="col-used">20</td>
            <td class="col-scheduled">5</td>
            <td class="col-balance">0</td>
            <td class="col-to-be">10</td>
            <td class="col-available">5</td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td class="col-name"><a href="#">Lara Craft</a></td>
      <td class="col-title">Training</td>
      <td class="col-carried">10</td>
      <td class="col-earned">20</td>
      <td class="col-used">20</td>
      <td class="col-scheduled">5</td>
      <td class="col-balance">0</td>
      <td class="col-to-be">10</td>
      <td class="col-available">5</td>
    </tr>
    <tr>
      <td class="col-name"><a href="#">Ethan Hunt</a></td>
      <td colspan="8">
        <table class=" hr-table inner-table">
          <tr>
            <td class="col-title">Vacation</td>
            <td class="col-carried">10</td>
            <td class="col-earned">20</td>
            <td class="col-used">20</td>
            <td class="col-scheduled">5</td>
            <td class="col-balance">0</td>
            <td class="col-to-be">10</td>
            <td class="col-available">5</td>
          </tr>
          <tr>
            <td class="col-title">Sickness</td>
            <td class="col-carried">10</td>
            <td class="col-earned">20</td>
            <td class="col-used">20</td>
            <td class="col-scheduled">5</td>
            <td class="col-balance">0</td>
            <td class="col-to-be">10</td>
            <td class="col-available">5</td>
          </tr>
          <tr>
            <td class="col-title">Training</td>
            <td class="col-carried">10</td>
            <td class="col-earned">20</td>
            <td class="col-used">20</td>
            <td class="col-scheduled">5</td>
            <td class="col-balance">0</td>
            <td class="col-to-be">10</td>
            <td class="col-available">5</td>
          </tr>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Here is JSFIDDLE

Answer 1

Any nested table complicates the entire layout and functionality of all tables involved. <tbody> element was created to allow us to divide a table into sections that share the same exact columns. It makes very little sense to introduce another table with the same type of data and shove it it into one column. There's no advantage to wrap it in a <table> element then keep it in one column of another table, all cells within the nested <table> are still subject to the style and behavior of the inner <table>. That one column that is just the name column is stretched out in order to align to the column of the outer <table> makes no sense.

Plunker

Details are commented extensively in demos. Although responsive (minimally), it is best viewed in Full page mode

Demo

body,
html {
  width: 100%;
  height: 100%;
  font: 400 100%/1.2 Arial
}

* {
  margin: 0;
  padding: 0;
  border: 0
}


/* table-layout: fixed gives us more control over <td> 
|| dimensions and <table> behavior
*/

.report-table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  margin: 30px auto;
  font-size: 1em
}

thead tr {
  border-bottom: 3px double #111
}


/* Each <th> in the <thead> has text that clips into an
|| automatic ellipsis if and when <table> gets narrower
*/

thead th {
  padding: 10px 5px 5px;
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis
}

tbody tr {
  border: 1px transparent
}

tbody tr:last-of-type {
  border-bottom: 1px solid #111
}

tbody th,
td {
  vertical-align: top;
  text-align: left;
  padding: 10px
}

.full {
  border-bottom: 1px solid #111
}

td {
  text-align: center
}

col {
  width: 10%
}

col.name,
col.type {
  width: 15%
}


/* CSS HIghlight Featue */


/* All checkboxes and radio buttons are
|| display:none;
*/

.chx,
.rad,
.reset {
  display: none
}

label {
  font: inherit;
  cursor: pointer;
  display: inline-block
}


/* These rulesets will highlight a column when
|| a <label> is clicked which in turn checks the
|| checkbox which in turn changes the background
|| color of a column
*/

#chx1:checked~table col.name,
#chx2:checked~table col.type {
  background: #ff0
}

#chx3:checked~table col.carried,
#chx4:checked~table col.earned {
  background: #00ff80
}

#chx5:checked~table col.used {
  background: #ff8080
}

#chx6:checked~table col.scheduled,
#chx7:checked~table col.balance,
#chx8:checked~table col.yet,
#chx9:checked~table col.available {
  background: #ff0
}

.on {
  display: inline-block
}


/* These radio buttons operate in the same 
|| manner as the checkboxes with some exceptions:
|| - There's 2 <label>s for each radio
|| - The <label>s toggle a row highlighting
|| - The <label>s alternate between display:
||   none and inline-block.
|| - Only one <tbody> at a time may be highlighted
*/

#rad1:checked~table tbody#e-hunt-40318,
#rad2:checked~table tbody#l-craft-61232,
#rad3:checked~table tbody#r-hertz-20663 {
  background: rgba(0, 255, 255, .5)
}

#rad1:checked~table tbody#e-hunt-40318 .reset {
  display: inline-block
}

#rad1:checked~table tbody#e-hunt-40318 .on {
  display: none
}

#rad1:checked~table tbody#e-hunt-40318 tr,
#rad3:checked~table tbody#r-hertz-20663 tr {
  border-bottom: 1px dashed red
}

#rad2:checked~table tbody#l-craft-61232 .reset {
  display: inline-block
}

#rad2:checked~table tbody#l-craft-61232 .on {
  display: none
}

#rad3:checked~table tbody#r-hertz-20663 .reset {
  display: inline-block
}

#rad3:checked~table tbody#r-hertz-20663 .on {
  display: none
}

#reset:checked~table tbody {
  background: initial
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link href='report.css' rel='stylesheet'>
  <style>

  </style>
</head>

<body>
  <!--
|[Highlighting (Optional)
  These checkboxes and radio buttons are optional.
  They are part of an intricate highlighting feature 
  that leverages:
   - cascading
   - sibling selectors: ~
   - <label> and 'for' attribute
   - checkbox and radio <input>
  
  input.chx highlights columns-->
  <input id='chx1' class='chx' type='checkbox'>
  <input id='chx2' class='chx' type='checkbox'>
  <input id='chx3' class='chx' type='checkbox'>
  <input id='chx4' class='chx' type='checkbox'>
  <input id='chx5' class='chx' type='checkbox'>
  <input id='chx6' class='chx' type='checkbox'>
  <input id='chx7' class='chx' type='checkbox'>
  <input id='chx8' class='chx' type='checkbox'>
  <input id='chx9' class='chx' type='checkbox'>
  <!--input.rad highlights a row-->
  <input id='rad1' class='rad' name='rad' type='radio'>
  <input id='rad2' class='rad' name='rad' type='radio'>
  <input id='rad3' class='rad' name='rad' type='radio'>
  <input id='reset' class='rad' name='rad' type='radio'>

  <table class="tablesorter hr-table hr-table-striped report-table">
    <!--
|[<colgroup>/<col> (Recommended)
    <colgroup> and <col> are elements with a
    special purpose of assigning a limited number of
    style properties to a column (vertical stack of
    <td>). Using them will reduce amount of classes
    assigned to individual cells.-->
    <colgroup>
      <col class='name'>
      <col class='type'>
      <col class='carried'>
      <col class='earned'>
      <col class='used'>
      <col class='scheduled'>
      <col class='balance'>
      <col class='yet'>
      <col class='available'>
    </colgroup>
    <thead>
      <tr>
        <th>Name</th>
        <th>Leave Type</th>
        <th>Carried Over</th>
        <th>Earned</th>
        <th>Used</th>
        <th>Scheduled</th>
        <th>Balance</th>
        <th>Yet Earned</th>
        <th>Avaliable</th>
      </tr>
    </thead>
    <!--
|[<tbody> (Required)
    Instead of using a whole new <table> and shoving it
    inside of a <td>, use a <tbody>. <tbody> is semantically,
    logically, and aesthetically a superior choice 
    compared to a nested <table>.
    
    <tbody> is one of the 3 major sections of a <table>
    and it's the only one of those 3 (the other 2 are 
    <thead> and <tfoot>) that are actually required when
    building a <table>. Although one can build a <table>
    and neglect adding the <tbody>, all modern browsers
    will add it in automatically. Another unique character
    istic of <tbody> that the other 2 lacks is that we 
    can have multiple <tbody> in a <table>.
-->
    <!--| Each <tbody> represents an employee's leave data
      The class is .full (fulltime employee) or .part
      (parttime employee). The id is the employee's 
      first initial, last name, and ID number.
-->
    <tbody class='full' id='e-hunt-40318'>
      <tr>
        <!--| The first column comprises of <th>:
      - Data: Employee's Full Name
      - Class: .part or .full
      - Style: From col.name
      - Markup: <th> one row if th.part; 3 rows if th.full
        by using the rowspan attribute.
-->
        <th rowspan='3'>
          <!--| <label>s toggle the radio buttons and the radio
      buttons toggle row highlighting.
-->
          <label for='rad1' class='on'>Ethan Hunt</label>
          <label for='reset' class='reset'>Ethan Hunt</label>
        </th>
        <td>Vacation</td>
        <td>10</td>
        <td>20</td>
        <td>20</td>
        <td>5</td>
        <td>0</td>
        <td>10</td>
        <td>5</td>
      </tr>
      <tr>
        <td>Illness</td>
        <td>10</td>
        <td>20</td>
        <td>20</td>
        <td>5</td>
        <td>0</td>
        <td>10</td>
        <td>5</td>
      </tr>
      <tr>
        <td>Training</td>
        <td>10</td>
        <td>20</td>
        <td>20</td>
        <td>5</td>
        <td>0</td>
        <td>10</td>
        <td>5</td>
      </tr>
    </tbody>
    <tbody class='part' id='l-craft-61232'>
      <tr>
        <th>
          <label for='rad2' class='on'>Lara Craft</label>
          <label for='reset' class='reset'>Lara Craft</label>
        </th>
        <td>Training</td>
        <td>10</td>
        <td>20</td>
        <td>20</td>
        <td>5</td>
        <td>0</td>
        <td>10</td>
        <td>5</td>
      </tr>
    </tbody>
    <tbody class='full' id='r-hertz-20663'>
      <tr>
        <th rowspan='3'>
          <label for='rad3' class='on'>Richard Hertz</label>
          <label for='reset' class='reset'>Richard Hertz</label>
        </th>
        <td>Vacation</td>
        <td>10</td>
        <td>20</td>
        <td>20</td>
        <td>5</td>
        <td>0</td>
        <td>10</td>
        <td>5</td>
      </tr>
      <tr>
        <td>Illness</td>
        <td>10</td>
        <td>20</td>
        <td>20</td>
        <td>5</td>
        <td>0</td>
        <td>10</td>
        <td>5</td>
      </tr>
      <tr>
        <td>Training</td>
        <td>10</td>
        <td>20</td>
        <td>20</td>
        <td>5</td>
        <td>0</td>
        <td>10</td>
        <td>5</td>
      </tr>
    </tbody>
    <!--<label for='id'> (Optional)
  |[<label for='id'></label> <input id='id' type='radio'>
    <tfoot> contains the <label>s that toggle the
    columns' highlighting. Note that each <label>
    has a for attribute which value is the id of
    the checkbox that the <label> is associated with.
    This association allows the hidden <input>s
    to react from any click on it's associated 
    <label>
-->
    <tfoot>
      <tr>
        <td>
          <label for='chx1'>COL1</label>
        </td>
        <td>
          <label for='chx2'>COL2</label>
        </td>
        <td>
          <label for='chx3'>COL3</label>
        </td>
        <td>
          <label for='chx4'>COL4</label>
        </td>
        <td>
          <label for='chx5'>COL5</label>
        </td>
        <td>
          <label for='chx6'>COL6</label>
        </td>
        <td>
          <label for='chx7'>COL7</label>
        </td>
        <td>
          <label for='chx8'>COL8</label>
        </td>
        <td>
          <label for='chx9'>COL9</label>
        </td>
      </tr>
    </tfoot>
  </table>

</body>

</html>