Align <div>'s in <td> horizontally - html

Question

I want to align three div's horizontally in a td.
I want also change div of A and B in the picture below:
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 1

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>

Answer 2

Add this to the style part of your middle 3 divs:
float: left;
So it becomes:
<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; float: left;">
A
</div>
<div style="width: 75px; background: green; margin-left: 50px;float: left;">
SecondOne
</div>
<div style="width: 11px; background: red; margin-left: 50px;float: left;">
B
</div>
</td>
<td>
<div style="width: 65px; background: blue; margin-left: 50px;">
ThirdOne
</div>
</td>

Answer 3

You can use float property
below is the working fiddle
https://jsfiddle.net/w5zu09ny/1/

Answer 4

user "float: left" to put div on left and remove "margin-left" for secondOne and B
<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;float: left;">
A
</div>
<div style="width: 75px; background: green; float: left;">
SecondOne
</div>
<div style="width: 11px; background: red;float: left;">
B
</div>
</td>
<td>
<div style="width: 65px; background: blue; margin-left: 50px;">
ThirdOne
</div>
</td>
</tr>
</table>

Answer 5

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