Блог

Главная - Вопросы по программированию - Отступ таблицы нарушен

Отступ таблицы нарушен

#html #css #bootstrap-4

Вопрос:

У меня есть отступы в таблице, контролируемые заполнением. Я установил class=»отступ-(number_inches)», чтобы выбрать уровень отступа. Я сталкиваюсь с проблемой, когда <th> теги всегда отступают на основе класса с отступом 18 вместо назначенного класса.

  • Всякий раз, когда я удаляю класс .indent-18 из своего CSS, вместо этого он приобретает свойства класса .indent-12.
  • Замена th на th:первый потомок в css не работает
  • Я также открыт для любой другой, не связанной с этим критики моего кода. Я все еще учусь, так что научить меня правильному способу очень помогло бы
 /* TABLE CLASSES*/

.units {
  text-align: left;
}

.table-header {
  font-size: 20px;
  text-align: center;
  border-bottom: 2px solid black;
}

.big-header {
  font-size: 16px;
}

.small-header {
  font-size: 16px;
}


/* 
Nest table based on these values
Indent 0" 6" 12" or 18", based off of excel indentations
*/

.indent-0 td:first-child,
th {
  padding: 10px;
  padding-left: 10px;
}

.indent-6 td:first-child,
th {
  padding: 10px;
  padding-left: 3%;
}

.indent-12 td:first-child,
th {
  padding: 10px;
  padding-left: 6%;
}

.indent-18 td:first-child,
th {
  padding: 10px;
  padding-left: 9%;
} 
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<!-- USER FORM STARTS-->
<form action="/update_car_data/" method="post">
  <div class="row">
    <!-- TABLE 1 -->
    <div class="col-md-6 col-sm-12 col-xs-12">
      <table>
        <thead>
          <th class="table-header" colspan="3">Model Inputs, Internal Combustion Engine</th>
        </thead>
        <!--
                        Structure of table row: 
                        Title | value | units
                    -->
        <tr class="indent-0">
          <td>Vehicle Life</td>
          <td><input name="G18_Car" value="{{data['G18_Car']}}"></td>
          <td class="units">Years</td>
        </tr>
        <tr class="indent-0">
          <td>Distance Traveled Per Year After Purchase</td>
          <td><input name="G19_Car" value="{{data['G19_Car']}}"></td>
          <td class="units">Miles</td>
        </tr>
        <!--Generation, Assembly, and Delivery-->
        <th class="big-header indent-0">Manufacture, Assembly, and Delivery</th>
        <tr class="indent-6">
          <td>Manufacture Assembly - GHG Emissions</td>
          <td><input name="G22_Car" value="{{data['G22_Car']}}"></td>
          <td class="units">MT CO2e</td>
        </tr>
        <tr class="indent-6">
          <td>Delivery - GHG Emissions</td>
          <td><input name="G23_Car" value="{{data['G23_Car']}}"></td>
          <td class="units">MT CO2e</td>
        </tr>
        <!--Operation and Disposal-->
        <tr>
          <th class="big-header indent-0">Operation and Disposal</th>
        </tr>
        <!--Tailpipe emissions-->
        <tr>
          <th class="small-header indent-6">Tailpipe Emissions</th>
        </tr>
        <tr class="indent-12">
          <td>Emissions Per Gallon of Gasoline</td>
          <td><input name="G28_Car" value="{{data['G28_Car']}}"></td>
          <td class="units">kg CO2e/gal</td>
        </tr>
        <tr class="indent-12">
          <td>Fuel Efficiency</td>
          <td><input name="G29_Car" value="{{data['G29_Car']}}"></td>
          <td class="units">Miles/gal</td>
        </tr>
        <!--Fuel Cycle-->
        <tr>
          <th class="small-header indent-6">Fuel Cycle</th>
        </tr>
        <tr>
          <th class="small-header indent-12">Ethanol Fuel Cycle</th>
        </tr>
        <tr class="indent-18">
          <td>Volume % of Ethanol</td>
          <td><input name="G23_Car" value="{{data['G32_Car']}}"></td>
          <td class="units">%</td>
        </tr>
        <tr class="indent-18">
          <td>Ethanol Fuel Cycle Basis</td>
          <td><input name="G44_Car" value="{{data['G44_Car']}}"></td>
          <td class="units">kg CO2e/gal</td>
        </tr>
        <tr>
          <th class="small-header indent-12">Petroleum (Gasoline) Fuel Cycle</th>
        </tr>
        <tr class="indent-18">
          <td>Upstream (Well to Refining Emissions)</td>
          <td><input name="G33_Car" value="{{data['G33_Car']}}"></td>
          <td class="units">MT CO2e/BBL-crude</td>
        </tr>

        <!--Refining-->
        <tr>
          <th class="small-header indent-18">Refining</th>
        </tr>
        <tr class="indent-18">
          <td>Processing (Volumetric) Gain</td>
          <td><input name="G36_Car" value="{{data['G36_Car']}}"></td>
          <td class="units">%</td>
        </tr>
        <tr class="indent-18">
          <td>Refining GHG Emissions Basis</td>
          <td><input name="G37_Car" value="{{data['G37_Car']}}"></td>
          <td class="units">MT CO2e/BBL-crude</td>
        </tr>
        <!--Distrubition (Refining to sales)-->
        <tr>
          <th class="small-header indent-12">Distrubition (Refining to Sales)</th>
        </tr>
        <tr class="child-row indent-18">
          <td>Evaporative Loss</td>
          <td><input name="G40_Car" value="{{data['G40_Car']}}"></td>
          <td class="units">%</td>
        </tr>
        <tr class="indent-18">
          <td>Carbon Intensity (GWP 100) of Motor Gasoline</td>
          <td><input name="G41_Car" value="{{data['G41_Car']}}"></td>
          <td class="units">MT CO2e/MT</td>
        </tr>
        <tr class="indent-18">
          <td>Tank-Truck Shipment to Sales Centers</td>
          <td><input name="G42_Car" value="{{data['G42_Car']}}"></td>
          <td class="units">MT CO2e/year</td>
        </tr>
        <tr class="indent-0">
          <td>Disposal -GHG Emissions</td>
          <td><input name="G46_Car" value="{{data['G46_Car']}}"></td>
          <td class="units">MT CO2e</td>
        </tr>
      </table>
    </div>
    <!-- TABLE 2 -->
    <div class="col-md-6 col-sm-12 col-xs-12">
      <table>
        <tr>
          <th class="table-header" colspan="3">Model Inputs, EV (Electric Vehicle)</th>
        </tr>
        <tr class="child-row">
          <td>Vehicle Life</td>
          <td><input name="G18_Car" value="{{data['G18_Car']}}"></td>
          <td>Years</td>
        </tr>
        <tr class="child-row">
          <td>Delivery -GHG emissions</td>
          <td><input name="G19_Car" value="{{data['G19_Car']}}"></td>
          <td>Miles</td>
        </tr>
      </table>
    </div>
    <br>
    <div class="col-12">
      <button name="updateBtn" type="submit">Update</button>
    </div>
  </div>
</form>

Комментарии:

1. Я бы рекомендовал использовать класс начальной загрузки на вашем столе и встроенные утилиты начальной загрузки, где это необходимо. table Утилиты интервала начальной загрузки 4.0

Ответ №1:

Вы должны изменить CSS следующим образом :

 .indent-0 td:first-child, th.indent-0 {
    padding: 10px;
    padding-left: 10px;
}
.indent-6 td:first-child, th.indent-6 {
    padding: 10px;
    padding-left: 3%;
}
.indent-12 td:first-child, th.indent-12 {
    padding: 10px;
    padding-left: 6%;
}
.indent-18 td:first-child, th.indent-18 {
    padding: 10px;
    padding-left: 9%;
}

Скрипка

Метки: