javascript - td 内的 div 正在重置 td 的宽度

Question

我有几个圆形 div，

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

它在运行时应用于表 > td。

现在的问题是它正在重置 td 宽度，下一个 td 类型与当前的重叠。但我想保持 td 宽度不变，而不管应用的 div(圆圈)

.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

你可以试试圆的:before伪元素，圆的位置调整使用position: absolute。

.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>