reshad reshad - 7 months ago 7
HTML Question

Align <div>'s in <td> horizontally

I want to align three

div
's horizontally in a
td
.

I want also change
div
of
A
and
B
in the picture below:

enter image description here

It is just important that
A
goes left side of the
SecondOne
and
B
on the right of it. I used
span
as well but it didn't work.

jsFiddle



<table>
<tr>
<td>
<div style="width: 55px; background: yellow; margin-left: 50px;">
FirstOne
</div>
</td>

<td>
<div style="width: 11px; background: red; margin-left: 50px">
A
</div>
<div style="width: 75px; background: green; margin-left: 50px;">
SecondOne
</div>
<div style="width: 11px; background: red; margin-left: 50px">
B
</div>
</td>
<td>
<div style="width: 65px; background: blue; margin-left: 50px;">
ThirdOne
</div>
</td>

</tr>
</table>




Answer

set div to display:inline:block

Don't use inline styles.

.table-divs {
  font-size: 0;
  /*fix inline-block gap*/
  border: 1px dashed red
}
.table-divs div {
  display: inline-block;
  font-size: 16px
  /* set font-size again */
}
.table-divs td:nth-of-type(2) {
  padding: 0 50px
}
.first {
  width: 55px;
  background: yellow;
}
.second {
  width: 75px;
  background: green;
}
.third {
  width: 65px;
  background: blue;
}
.a,
.b {
  width: 11px;
  background: red;
}
   
<table class="table-divs">
  <tr>
    <td>
      <div class="first">
        FirstOne
      </div>
    </td>

    <td>
      <div class="a">
        A
      </div>
      <div class="second">
        SecondOne
      </div>
      <div class="b">
        B
      </div>
    </td>
    <td>
      <div class="third">
        ThirdOne
      </div>
    </td>

  </tr>
</table>
<hr />
<div class="a">
  A
</div>
<div class="second">
  SecondOne
</div>
<div class="b">
  B
</div>

<div class="third">
  ThirdOne
</div>