CODEWITHSUNDEEP
htmlcss
thefriend
thefriend

Reputation: 339

Why is the first row misaligned?

Why are the cells in first row misaligned? JSfiddle link

This is the code:

 .box3 {
   margin: auto;
   width: auto;
   height: 300px;
 }
 .tb2 {
   border-collapse: collapse;
   color: black;
   text-align: center;
   margin-top: 10px;
   margin-left: 10px;
   width: 950px;
   height: 300px;
   display: inline-block;
   overflow: auto;
 }
 .tb2 > tbody > tr > th {
   border: 1px solid black;
   background-color: black;
   color: white;
   font-weight: bold;
 }
 .tbd {
   width: auto;
   height: 330px;
   background-color: white;
   color: black;
   overflow: auto;
   display: block;
 }
 .tbd > tr > td {
   border: 1px solid black;
   width: 5%;
   height: 100%;
 }
<div class="box3">
  <table class="tb2">
    <tr>
      <th></th>
      <th>Day</th>
      <th>Theory Class</th>
      <th>Practical Class</th>
      <th>English Class</th>
      <th>Start Time</th>
      <th>End Time</th>
      <th>Decription</th>
      <th>Checked</th>
      <th></th>
      <th></th>
      <tr>
        <tbody class="tbd">
          <tr>
            <td>1</td>
            <td>Mon</td>
            <td>XXXXXXXXXXXX</td>
            <td>XXXXXXX</td>
            <td>XXXXXXX</td>
            <td>hh:mm</td>
            <td>hh:mm</td>
            <td>XXXXXXXXXXXX</td>
            <td>Yes</td>
            <td>Update</td>
            <td>Delete</td>
          </tr>
        </tbody>
  </table>
</div>
</div>

How the columns of the first row coincides with the bottom column? Sorry for my bad English.

Upvotes: 2

Views: 181

Answers (1)

Oriol
Oriol

Reputation: 288480

Because you use

.tb2 { display: inline-block; }
.tbd { display: block; }

This removes the tabular displays. Instead, use

.tb2 { display: inline-table; }
.tbd { display: table-row-group; } /* default value */


.box3 {
  margin: auto;
  width: auto;
  height: 300px;
}
.tb2 {
  border-collapse: collapse;
  color: black;
  text-align: center;
  margin-top: 10px;
  margin-left: 10px;
  width: 950px;
  height: 300px;
  display: inline-table;
  overflow: auto;
}
.tb2 > tbody > tr > th {
  border: 1px solid black;
  background-color: black;
  color: white;
  font-weight: bold;
}
.tbd {
  width: auto;
  height: 330px;
  background-color: white;
  color: black;
  overflow: auto;
  display: table-row-group;
}
.tbd > tr > td {
  border: 1px solid black;
  width: 5%;
  height: 100%;
}
<div class="box3">
  <table class="tb2">
    <tr>
      <th></th>
      <th>Day</th>
      <th>Working Class</th>
      <th>Start Class</th>
      <th>End Class</th>
      <th>Start Time</th>
      <th>End Time</th>
      <th>Note</th>
      <th>Checked</th>
      <th></th>
      <th></th>
    </tr>
    <tbody class="tbd">
      <tr>
        <td>1</td>
        <td>Mon</td>
        <td>XXXXXXXXXXXX</td>
        <td>XXXXXXX</td>
        <td>XXXXXXX</td>
        <td>hh:mm</td>
        <td>hh:mm</td>
        <td>XXXXXXXXXXXX</td>
        <td>Yes</td>
        <td>Update</td>
        <td>Delete</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Mon</td>
        <td>XXXXXXXXXXXX</td>
        <td>XXXXXXX</td>
        <td>XXXXXXX</td>
        <td>hh:mm</td>
        <td>hh:mm</td>
        <td>XXXXXXXXXXXX</td>
        <td>Yes</td>
        <td>Update</td>
        <td>Delete</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Mon</td>
        <td>XXXXXXXXXXXX</td>
        <td>XXXXXXX</td>
        <td>XXXXXXX</td>
        <td>hh:mm</td>
        <td>hh:mm</td>
        <td>XXXXXXXXXXXX</td>
        <td>Yes</td>
        <td>Update</td>
        <td>Delete</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Mon</td>
        <td>XXXXXXXXXXXX</td>
        <td>XXXXXXX</td>
        <td>XXXXXXX</td>
        <td>hh:mm</td>
        <td>hh:mm</td>
        <td>XXXXXXXXXXXX</td>
        <td>Yes</td>
        <td>Update</td>
        <td>Delete</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Mon</td>
        <td>XXXXXXXXXXXX</td>
        <td>XXXXXXX</td>
        <td>XXXXXXX</td>
        <td>hh:mm</td>
        <td>hh:mm</td>
        <td>XXXXXXXXXXXX</td>
        <td>Yes</td>
        <td>Update</td>
        <td>Delete</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Mon</td>
        <td>XXXXXXXXXXXX</td>
        <td>XXXXXXX</td>
        <td>XXXXXXX</td>
        <td>hh:mm</td>
        <td>hh:mm</td>
        <td>XXXXXXXXXXXX</td>
        <td>Yes</td>
        <td>Update</td>
        <td>Delete</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Mon</td>
        <td>XXXXXXXXXXXX</td>
        <td>XXXXXXX</td>
        <td>XXXXXXX</td>
        <td>hh:mm</td>
        <td>hh:mm</td>
        <td>XXXXXXXXXXXX</td>
        <td>Yes</td>
        <td>Update</td>
        <td>Delete</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Mon</td>
        <td>XXXXXXXXXXXX</td>
        <td>XXXXXXX</td>
        <td>XXXXXXX</td>
        <td>hh:mm</td>
        <td>hh:mm</td>
        <td>XXXXXXXXXXXX</td>
        <td>Yes</td>
        <td>Update</td>
        <td>Delete</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Mon</td>
        <td>XXXXXXXXXXXX</td>
        <td>XXXXXXX</td>
        <td>XXXXXXX</td>
        <td>hh:mm</td>
        <td>hh:mm</td>
        <td>XXXXXXXXXXXX</td>
        <td>Yes</td>
        <td>Update</td>
        <td>Delete</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Mon</td>
        <td>XXXXXXXXXXXX</td>
        <td>XXXXXXX</td>
        <td>XXXXXXX</td>
        <td>hh:mm</td>
        <td>hh:mm</td>
        <td>XXXXXXXXXXXX</td>
        <td>Yes</td>
        <td>Update</td>
        <td>Delete</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Mon</td>
        <td>XXXXXXXXXXXX</td>
        <td>XXXXXXX</td>
        <td>XXXXXXX</td>
        <td>hh:mm</td>
        <td>hh:mm</td>
        <td>XXXXXXXXXXXX</td>
        <td>Yes</td>
        <td>Update</td>
        <td>Delete</td>
      </tr>
    </tbody>
  </table>
</div>

Upvotes: 3

Related Questions