div里面的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;*/
}

哪个适用于表＆gt; td，在运行期间。

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以尝试圈子的BitmapDescriptorFactory伪元素，并使用:before进行圈子位置调整。

＆＃13;

＆＃13;

position: absolute

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

将你的圈子类放在td内的div上

Javascript

    function origin() {

        var url = "http://localhost:8000/api/v1/origin";
        petition.onreadystatechange = ResponseOrigin;
        petition.open("GET", url, true);
        petition.send();
        }

    function ResponseOrigin(){
        var response;
        text="<tr><th>Identifier</th><th>Name</th><th>Numero</th><th>City</th></tr>";
                if (petition.readyState == 4)
                    if (petition.status == 200) {
                        responser = petition.responseText;
                        var responseC = response.split("<");
                        var responseV = responseC[0];
                        var data = JSON.parse(responseV);
                        for (var i = 0; i < data.length; i++) {

                                text += "<tr id =" + data[i].id + "><td>" + data[i].id + "</td><td id='name'>" + data[i].name + "</td><td>" + 
                                data[i].city + "</td>                                 

                        document.getElementById('table').innerHTML = text;

                        document.formOrigin.style.display="none";
                    }
                    else alert("Problem with URL");
            }

     function formOrigin() {


         var url = "http://localhost:8000/api/v1/origin";
            petition.onreadystatechange = responseAddOrigin;
            petition.open("POST", url, true);
            petition.send(JSON.stringify({name: document.formOrigin.name.value,
                city: document.formOrigin.city.value}));

       }
      function responseAddOrigen(){

            var response;
            if (petition.readyState == 4)
                if (petition.status == 200) {
                    response = petition.responseText;
                    alert ("data recorded correctly");
                }
                else
                    alert("Problem with URL");
        }

Answer 3

您可以使用td伪元素，而不是更改width :before。

以下是一个工作示例

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

修改

@Simsons - 检查它是否适合您，以及它是否从css中删除了!important。如果那么它不会意味着其他一些样式会覆盖你的样式。我的问题是，position被覆盖了。

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