div inside td is resetting the width of td

Question

I have few circle divs,

.green-circle {
    height: 20px;
    width: 20px;
    background-color: green;
    border-radius: 50%;
    display: inline-block;
    /*margin-left: 40px;
    margin-right: 40px;*/
    /*margin-top: 10px;*/
}

Which is getting applied to table > td , during run time.

Now the problem is it's resetting the td width and the next td kind of overlaps with current one.But I want to keep the td width intact irrespective of div applied (circle)

.green-circle {
    height: 20px;
    width: 20px;
    background-color: green;
    border-radius: 50%;
    display: inline-block;
    /*margin-left: 40px;
    margin-right: 40px;*/
    /*margin-top: 10px;*/
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<table id="tblRandomSummary" class="table table-hover table-striped table-bordered table-condensed responsive no-footer dtr-inline dataTable collapsed" role="grid" aria-describedby="tblRandomSummary_info" style="width: 1029px;">
	<thead>
	<tr role="row">
		<th class="sorting_asc" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 47px;" aria-label="Circuit: activate to sort column descending" aria-sort="ascending">Circuit</th>
		<th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 71px;" aria-label="WashType: activate to sort column ascending">WashType</th>
		<th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 115px;" aria-label="AverageDuration: activate to sort column ascending">AverageDuration</th>
		<th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 71px;" aria-label="FirstRinse: activate to sort column ascending">FirstRinse</th>
		<th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 143px;" aria-label="CausticRecirculation: activate to sort column ascending">CausticRecirculation</th>
		<th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 125px;" aria-label="IntermediateRinse: activate to sort column ascending">IntermediateRinse</th>
		<th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 123px;" aria-label="AcidRecirculation: activate to sort column ascending">AcidRecirculation</th>
		<th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 126px;" aria-label="IntermediateRinse: activate to sort column ascending">IntermediateRinse</th>
		<th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 0px; display: none;" aria-label="HeatSterilizeNoPulsing: activate to sort column ascending">HeatSterilizeNoPulsing</th>
		<th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 0px; display: none;" aria-label="HeatSterilizePulsing: activate to sort column ascending">HeatSterilizePulsing</th>
		<th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 0px; display: none;" aria-label="SecondSemiAutoRecirculation: activate to sort column ascending">SecondSemiAutoRecirculation</th>
		<th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 0px; display: none;" aria-label="SanitiserRecirculation: activate to sort column ascending">SanitiserRecirculation</th>
		<th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 0px; display: none;" aria-label="FinalRinse: activate to sort column ascending">FinalRinse</th>
		<th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 0px; display: none;" aria-label="Idle: activate to sort column ascending">Idle</th>
	</tr>
</thead>
<tbody>
	<tr role="row" class="odd">
		<td tabindex="0" class="sorting_1">Engine001</td>
		<td>Acid</td>
		<td>3.75 mins</td>
		<td>0</td>
		<td class="green-circle">0</td>
		<td>0</td>
		<td>0</td>
		<td>0</td>
		<td style="display: none;">0</td>
		<td class="red-circle" style="display: none;">4</td>
		<td style="display: none;">0</td>
		<td style="display: none;">0</td>
		<td style="display: none;"></td>
		<td style="display: none;">0</td></tr><tr role="row" class="even"><td tabindex="0" class="sorting_1">Engine001</td>
		<td>SemiAuto</td>
		<td>3.75 mins</td>
		<td class="green-circle">0</td>
		<td class="green-circle">0</td>
		<td>0</td>
		<td>0</td>
		<td>0</td>
		<td style="display: none;">0</td>
		<td class="red-circle" style="display: none;">4</td>
		<td style="display: none;">0</td>
		<td style="display: none;">0</td>
		<td style="display: none;"></td>
		<td style="display: none;">0</td></tr><tr role="row" class="odd"><td tabindex="0" class="sorting_1">Engine001</td>
		<td>SemiAuto &amp; Acid</td>
		<td>3.75 mins</td>
		<td class="green-circle">0</td>
		<td class="green-circle">0</td>
		<td>0</td>
		<td>0</td>
		<td>0</td>
		<td style="display: none;">0</td>
		<td class="red-circle" style="display: none;">4</td>
		<td style="display: none;">0</td>
		<td style="display: none;">0</td>
		<td style="display: none;"></td>
		<td style="display: none;">0</td></tr><tr role="row" class="even"><td tabindex="0" class="sorting_1">Engine001</td>
		<td>No Wash</td>
		<td>4.13 mins</td>
		<td class="green-circle">0</td>
		<td class="green-circle">0</td>
		<td>0</td>
		<td>0</td>
		<td>0</td>
		<td style="display: none;">0</td>
		<td class="red-circle" style="display: none;">4</td>
		<td style="display: none;">0</td>
		<td style="display: none;">0</td>
		<td style="display: none;"></td>
		<td style="display: none;">0</td></tr><tr role="row" class="odd"><td tabindex="0" class="sorting_1">Engine001</td>
		<td>Rinse</td>
		<td>4.44 mins</td>
		<td class="green-circle">0</td>
		<td class="green-circle">0</td>
		<td>0</td>
		<td>0</td>
		<td>0</td>
		<td style="display: none;">0</td>
		<td class="red-circle" style="display: none;">4</td>
		<td style="display: none;">0</td>
		<td style="display: none;">0</td>
		<td style="display: none;"></td>
		<td style="display: none;">0</td></tr></tbody>
</table>

Answer 1

Instead of altering td width you can use :before pseudo element.

Here is an working example

.green-circle {
  position: relative;
  color: #FFF;
}
.green-circle:before {
  content: '';
  height: 20px;
  width: 20px;
  background-color: green;
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  left: 6px;
  top: 14px;
  z-index: -1;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<table id="tblRandomSummary" class="table table-hover table-striped table-bordered table-condensed responsive no-footer dtr-inline dataTable collapsed" role="grid" aria-describedby="tblRandomSummary_info" style="width: 1029px;">
  <thead>
    <tr role="row">
      <th class="sorting_asc" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 47px;" aria-label="Circuit: activate to sort column descending" aria-sort="ascending">Circuit</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 71px;" aria-label="WashType: activate to sort column ascending">WashType</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 115px;" aria-label="AverageDuration: activate to sort column ascending">AverageDuration</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 71px;" aria-label="FirstRinse: activate to sort column ascending">FirstRinse</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 143px;" aria-label="CausticRecirculation: activate to sort column ascending">CausticRecirculation</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 125px;" aria-label="IntermediateRinse: activate to sort column ascending">IntermediateRinse</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 123px;" aria-label="AcidRecirculation: activate to sort column ascending">AcidRecirculation</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 126px;" aria-label="IntermediateRinse: activate to sort column ascending">IntermediateRinse</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 0px; display: none;" aria-label="HeatSterilizeNoPulsing: activate to sort column ascending">HeatSterilizeNoPulsing</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 0px; display: none;" aria-label="HeatSterilizePulsing: activate to sort column ascending">HeatSterilizePulsing</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 0px; display: none;" aria-label="SecondSemiAutoRecirculation: activate to sort column ascending">SecondSemiAutoRecirculation</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 0px; display: none;" aria-label="SanitiserRecirculation: activate to sort column ascending">SanitiserRecirculation</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 0px; display: none;" aria-label="FinalRinse: activate to sort column ascending">FinalRinse</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 0px; display: none;" aria-label="Idle: activate to sort column ascending">Idle</th>
    </tr>
  </thead>
  <tbody>
    <tr role="row" class="odd">
      <td tabindex="0" class="sorting_1">Engine001</td>
      <td>Acid</td>
      <td>3.75 mins</td>
      <td>0</td>
      <td class="green-circle">0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td style="display: none;">0</td>
      <td class="red-circle" style="display: none;">4</td>
      <td style="display: none;">0</td>
      <td style="display: none;">0</td>
      <td style="display: none;"></td>
      <td style="display: none;">0</td>
    </tr>
    <tr role="row" class="even">
      <td tabindex="0" class="sorting_1">Engine001</td>
      <td>SemiAuto</td>
      <td>3.75 mins</td>
      <td class="green-circle">0</td>
      <td class="green-circle">0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td style="display: none;">0</td>
      <td class="red-circle" style="display: none;">4</td>
      <td style="display: none;">0</td>
      <td style="display: none;">0</td>
      <td style="display: none;"></td>
      <td style="display: none;">0</td>
    </tr>
    <tr role="row" class="odd">
      <td tabindex="0" class="sorting_1">Engine001</td>
      <td>SemiAuto &amp; Acid</td>
      <td>3.75 mins</td>
      <td class="green-circle">0</td>
      <td class="green-circle">0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td style="display: none;">0</td>
      <td class="red-circle" style="display: none;">4</td>
      <td style="display: none;">0</td>
      <td style="display: none;">0</td>
      <td style="display: none;"></td>
      <td style="display: none;">0</td>
    </tr>
    <tr role="row" class="even">
      <td tabindex="0" class="sorting_1">Engine001</td>
      <td>No Wash</td>
      <td>4.13 mins</td>
      <td class="green-circle">0</td>
      <td class="green-circle">0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td style="display: none;">0</td>
      <td class="red-circle" style="display: none;">4</td>
      <td style="display: none;">0</td>
      <td style="display: none;">0</td>
      <td style="display: none;"></td>
      <td style="display: none;">0</td>
    </tr>
    <tr role="row" class="odd">
      <td tabindex="0" class="sorting_1">Engine001</td>
      <td>Rinse</td>
      <td>4.44 mins</td>
      <td class="green-circle">0</td>
      <td class="green-circle">0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td style="display: none;">0</td>
      <td class="red-circle" style="display: none;">4</td>
      <td style="display: none;">0</td>
      <td style="display: none;">0</td>
      <td style="display: none;"></td>
      <td style="display: none;">0</td>
    </tr>
  </tbody>
</table>

EDIT

@Simsons - check if it works for you and if it does remove !important from css. If then it does not it means that some other styles are overwriting your styles. My quess is, that position is overwritten.

.green-circle {
  position: relative!important;
  color: #FFF;
}
.green-circle:before {
  content: '';
  height: 20px;
  width: 20px;
  background-color: green;
  border-radius: 50%;
  display: inline-block!important;
  position: absolute!important;
  left: 6px!important;
  top: 14px!important;
  z-index: -1!important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<table id="tblRandomSummary" class="table table-hover table-striped table-bordered table-condensed responsive no-footer dtr-inline dataTable collapsed" role="grid" aria-describedby="tblRandomSummary_info" style="width: 1029px;">
  <thead>
    <tr role="row">
      <th class="sorting_asc" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 47px;" aria-label="Circuit: activate to sort column descending" aria-sort="ascending">Circuit</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 71px;" aria-label="WashType: activate to sort column ascending">WashType</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 115px;" aria-label="AverageDuration: activate to sort column ascending">AverageDuration</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 71px;" aria-label="FirstRinse: activate to sort column ascending">FirstRinse</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 143px;" aria-label="CausticRecirculation: activate to sort column ascending">CausticRecirculation</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 125px;" aria-label="IntermediateRinse: activate to sort column ascending">IntermediateRinse</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 123px;" aria-label="AcidRecirculation: activate to sort column ascending">AcidRecirculation</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 126px;" aria-label="IntermediateRinse: activate to sort column ascending">IntermediateRinse</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 0px; display: none;" aria-label="HeatSterilizeNoPulsing: activate to sort column ascending">HeatSterilizeNoPulsing</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 0px; display: none;" aria-label="HeatSterilizePulsing: activate to sort column ascending">HeatSterilizePulsing</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 0px; display: none;" aria-label="SecondSemiAutoRecirculation: activate to sort column ascending">SecondSemiAutoRecirculation</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 0px; display: none;" aria-label="SanitiserRecirculation: activate to sort column ascending">SanitiserRecirculation</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 0px; display: none;" aria-label="FinalRinse: activate to sort column ascending">FinalRinse</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 0px; display: none;" aria-label="Idle: activate to sort column ascending">Idle</th>
    </tr>
  </thead>
  <tbody>
    <tr role="row" class="odd">
      <td tabindex="0" class="sorting_1">Engine001</td>
      <td>Acid</td>
      <td>3.75 mins</td>
      <td>0</td>
      <td class="green-circle">0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td style="display: none;">0</td>
      <td class="red-circle" style="display: none;">4</td>
      <td style="display: none;">0</td>
      <td style="display: none;">0</td>
      <td style="display: none;"></td>
      <td style="display: none;">0</td>
    </tr>
    <tr role="row" class="even">
      <td tabindex="0" class="sorting_1">Engine001</td>
      <td>SemiAuto</td>
      <td>3.75 mins</td>
      <td class="green-circle">0</td>
      <td class="green-circle">0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td style="display: none;">0</td>
      <td class="red-circle" style="display: none;">4</td>
      <td style="display: none;">0</td>
      <td style="display: none;">0</td>
      <td style="display: none;"></td>
      <td style="display: none;">0</td>
    </tr>
    <tr role="row" class="odd">
      <td tabindex="0" class="sorting_1">Engine001</td>
      <td>SemiAuto &amp; Acid</td>
      <td>3.75 mins</td>
      <td class="green-circle">0</td>
      <td class="green-circle">0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td style="display: none;">0</td>
      <td class="red-circle" style="display: none;">4</td>
      <td style="display: none;">0</td>
      <td style="display: none;">0</td>
      <td style="display: none;"></td>
      <td style="display: none;">0</td>
    </tr>
    <tr role="row" class="even">
      <td tabindex="0" class="sorting_1">Engine001</td>
      <td>No Wash</td>
      <td>4.13 mins</td>
      <td class="green-circle">0</td>
      <td class="green-circle">0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td style="display: none;">0</td>
      <td class="red-circle" style="display: none;">4</td>
      <td style="display: none;">0</td>
      <td style="display: none;">0</td>
      <td style="display: none;"></td>
      <td style="display: none;">0</td>
    </tr>
    <tr role="row" class="odd">
      <td tabindex="0" class="sorting_1">Engine001</td>
      <td>Rinse</td>
      <td>4.44 mins</td>
      <td class="green-circle">0</td>
      <td class="green-circle">0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td style="display: none;">0</td>
      <td class="red-circle" style="display: none;">4</td>
      <td style="display: none;">0</td>
      <td style="display: none;">0</td>
      <td style="display: none;"></td>
      <td style="display: none;">0</td>
    </tr>
  </tbody>
</table>

Answer 2

You can try the :before pseudo element for the circle and use position: absolute for the circle position adjustment.

.green-circle {
  position: relative;
  color: #fff;
}

.green-circle:before {
  content: "";
  height: 20px;
  width: 20px;
  background-color: green;
  border-radius: 50%;
  position: absolute;
  z-index: -1;
  left: 7px;
  top: 14px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<table id="tblRandomSummary" class="table table-hover table-striped table-bordered table-condensed responsive no-footer dtr-inline dataTable collapsed" role="grid" aria-describedby="tblRandomSummary_info" style="width: 1029px;">
  <thead>
    <tr role="row">
      <th class="sorting_asc" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 47px;" aria-label="Circuit: activate to sort column descending" aria-sort="ascending">Circuit</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 71px;" aria-label="WashType: activate to sort column ascending">WashType</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 115px;" aria-label="AverageDuration: activate to sort column ascending">AverageDuration</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 71px;" aria-label="FirstRinse: activate to sort column ascending">FirstRinse</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 143px;" aria-label="CausticRecirculation: activate to sort column ascending">CausticRecirculation</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 125px;" aria-label="IntermediateRinse: activate to sort column ascending">IntermediateRinse</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 123px;" aria-label="AcidRecirculation: activate to sort column ascending">AcidRecirculation</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 126px;" aria-label="IntermediateRinse: activate to sort column ascending">IntermediateRinse</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 0px; display: none;" aria-label="HeatSterilizeNoPulsing: activate to sort column ascending">HeatSterilizeNoPulsing</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 0px; display: none;" aria-label="HeatSterilizePulsing: activate to sort column ascending">HeatSterilizePulsing</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 0px; display: none;" aria-label="SecondSemiAutoRecirculation: activate to sort column ascending">SecondSemiAutoRecirculation</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 0px; display: none;" aria-label="SanitiserRecirculation: activate to sort column ascending">SanitiserRecirculation</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 0px; display: none;" aria-label="FinalRinse: activate to sort column ascending">FinalRinse</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 0px; display: none;" aria-label="Idle: activate to sort column ascending">Idle</th>
    </tr>
  </thead>
  <tbody>
    <tr role="row" class="odd">
      <td tabindex="0" class="sorting_1">Engine001</td>
      <td>Acid</td>
      <td>3.75 mins</td>
      <td>0</td>
      <td class="green-circle">0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td style="display: none;">0</td>
      <td class="red-circle" style="display: none;">4</td>
      <td style="display: none;">0</td>
      <td style="display: none;">0</td>
      <td style="display: none;"></td>
      <td style="display: none;">0</td>
    </tr>
    <tr role="row" class="even">
      <td tabindex="0" class="sorting_1">Engine001</td>
      <td>SemiAuto</td>
      <td>3.75 mins</td>
      <td class="green-circle">0</td>
      <td class="green-circle">0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td style="display: none;">0</td>
      <td class="red-circle" style="display: none;">4</td>
      <td style="display: none;">0</td>
      <td style="display: none;">0</td>
      <td style="display: none;"></td>
      <td style="display: none;">0</td>
    </tr>
    <tr role="row" class="odd">
      <td tabindex="0" class="sorting_1">Engine001</td>
      <td>SemiAuto &amp; Acid</td>
      <td>3.75 mins</td>
      <td class="green-circle">0</td>
      <td class="green-circle">0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td style="display: none;">0</td>
      <td class="red-circle" style="display: none;">4</td>
      <td style="display: none;">0</td>
      <td style="display: none;">0</td>
      <td style="display: none;"></td>
      <td style="display: none;">0</td>
    </tr>
    <tr role="row" class="even">
      <td tabindex="0" class="sorting_1">Engine001</td>
      <td>No Wash</td>
      <td>4.13 mins</td>
      <td class="green-circle">0</td>
      <td class="green-circle">0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td style="display: none;">0</td>
      <td class="red-circle" style="display: none;">4</td>
      <td style="display: none;">0</td>
      <td style="display: none;">0</td>
      <td style="display: none;"></td>
      <td style="display: none;">0</td>
    </tr>
    <tr role="row" class="odd">
      <td tabindex="0" class="sorting_1">Engine001</td>
      <td>Rinse</td>
      <td>4.44 mins</td>
      <td class="green-circle">0</td>
      <td class="green-circle">0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td style="display: none;">0</td>
      <td class="red-circle" style="display: none;">4</td>
      <td style="display: none;">0</td>
      <td style="display: none;">0</td>
      <td style="display: none;"></td>
      <td style="display: none;">0</td>
    </tr>
  </tbody>
</table>

Answer 3

Keep your circle class on a div inside td

.green-circle {
  height: 20px;
  width: 20px;
  background-color: green;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /*margin-left: 40px;
    margin-right: 40px;*/
  /*margin-top: 10px;*/
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<table id="tblRandomSummary" class="table table-hover table-striped table-bordered table-condensed responsive no-footer dtr-inline dataTable collapsed" role="grid" aria-describedby="tblRandomSummary_info" style="width: 1029px;">
  <thead>
    <tr role="row">
      <th class="sorting_asc" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 47px;" aria-label="Circuit: activate to sort column descending" aria-sort="ascending">Circuit</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 71px;" aria-label="WashType: activate to sort column ascending">WashType</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 115px;" aria-label="AverageDuration: activate to sort column ascending">AverageDuration</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 71px;" aria-label="FirstRinse: activate to sort column ascending">FirstRinse</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 143px;" aria-label="CausticRecirculation: activate to sort column ascending">CausticRecirculation</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 125px;" aria-label="IntermediateRinse: activate to sort column ascending">IntermediateRinse</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 123px;" aria-label="AcidRecirculation: activate to sort column ascending">AcidRecirculation</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 126px;" aria-label="IntermediateRinse: activate to sort column ascending">IntermediateRinse</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 0px; display: none;" aria-label="HeatSterilizeNoPulsing: activate to sort column ascending">HeatSterilizeNoPulsing</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 0px; display: none;" aria-label="HeatSterilizePulsing: activate to sort column ascending">HeatSterilizePulsing</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 0px; display: none;" aria-label="SecondSemiAutoRecirculation: activate to sort column ascending">SecondSemiAutoRecirculation</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 0px; display: none;" aria-label="SanitiserRecirculation: activate to sort column ascending">SanitiserRecirculation</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 0px; display: none;" aria-label="FinalRinse: activate to sort column ascending">FinalRinse</th>
      <th class="sorting" tabindex="0" aria-controls="tblRandomSummary" rowspan="1" colspan="1" style="width: 0px; display: none;" aria-label="Idle: activate to sort column ascending">Idle</th>
    </tr>
  </thead>
  <tbody>
    <tr role="row" class="odd">
      <td tabindex="0" class="sorting_1">Engine001</td>
      <td>Acid</td>
      <td>3.75 mins</td>
      <td>0</td>
      <td><div class="green-circle">0</div></td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td style="display: none;">0</td>
      <td class="red-circle" style="display: none;">4</td>
      <td style="display: none;">0</td>
      <td style="display: none;">0</td>
      <td style="display: none;"></td>
      <td style="display: none;">0</td>
    </tr>
    <tr role="row" class="even">
      <td tabindex="0" class="sorting_1">Engine001</td>
      <td>SemiAuto</td>
      <td>3.75 mins</td>
      <td><div class="green-circle">0</div></td>
      <td><div class="green-circle">0</div></td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td style="display: none;">0</td>
      <td class="red-circle" style="display: none;">4</td>
      <td style="display: none;">0</td>
      <td style="display: none;">0</td>
      <td style="display: none;"></td>
      <td style="display: none;">0</td>
    </tr>
    <tr role="row" class="odd">
      <td tabindex="0" class="sorting_1">Engine001</td>
      <td>SemiAuto &amp; Acid</td>
      <td>3.75 mins</td>
      <td><div class="green-circle">0</div></td>
      <td><div class="green-circle">0</div></td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td style="display: none;">0</td>
      <td class="red-circle" style="display: none;">4</td>
      <td style="display: none;">0</td>
      <td style="display: none;">0</td>
      <td style="display: none;"></td>
      <td style="display: none;">0</td>
    </tr>
    <tr role="row" class="even">
      <td tabindex="0" class="sorting_1">Engine001</td>
      <td>No Wash</td>
      <td>4.13 mins</td>
      <td><div class="green-circle">0</div></td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td style="display: none;">0</td>
      <td class="red-circle" style="display: none;">4</td>
      <td style="display: none;">0</td>
      <td style="display: none;">0</td>
      <td style="display: none;"></td>
      <td style="display: none;">0</td>
    </tr>
    <tr role="row" class="odd">
      <td tabindex="0" class="sorting_1">Engine001</td>
      <td>Rinse</td>
      <td>4.44 mins</td>
      <td><div class="green-circle">0</div></td>
      <td><div class="green-circle">0</div></td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td style="display: none;">0</td>
      <td class="red-circle" style="display: none;">4</td>
      <td style="display: none;">0</td>
      <td style="display: none;">0</td>
      <td style="display: none;"></td>
      <td style="display: none;">0</td>
    </tr>
  </tbody>
</table>