Как я могу преобразовать этот HTML-фрагмент в начальную загрузку

Question

Как эту таблицу можно преобразовать в строки и столбцы начальной загрузки?Я не слишком знаком с начальной загрузкой, но я хотел бы попытаться преобразовать это как можно лучше, но не уверен, с чего начать.Большое спасибо за любую помощь.Я вставил свой HTML и CSS.спасибо

<div id="section1">
     <header>WEEKLY HOURS</header>
     <table class="section1table">
    <tr class="last-row">
        <th>Clocked</th>
        <th>Regular</th>
        <th>Overtime</th>
        <th>Incentive</th>
        <th>Holiday</th>
        <th>Personal</th>
        <th>Vacation</th>

        <th colspan=4>Off-Clock</th>
        <th class="total"><strong>Total</strong></th>
    </tr>

    <tr class="last-row">
        <td id="clockHours">clockHrs</td>
        <td id="regularHours">regularHrs</td>
        <td id="overtime">overtimeHrs</td>
        <td id="Incentive">incentiveHrs</td>
        <td id="holiday">holidayHrs</td>
        <td id="personal">sickHrs</td>
        <td id="vacation">vacationHrs</td>
        <td colspan=4>offClockHrs</td>
        <td class="total">totalHrs</td>
    </tr>

</table>

    #printPage 
{
  margin: 0px;
  padding: 0px;
  width: 910px;
  margin-bottom: 0.4%;
  font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Open Sans', 'Helvetica Neue', 'sans-serif';
}
#timetitle
{
    font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Open Sans', 'Helvetica Neue', 'sans-serif';
    font-weight: bolder;
    font-size: 14pt;
    margin-bottom: 0%;
}
#name
{
    font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Open Sans', 'Helvetica Neue', 'sans-serif';
    font-weight: normal;
    margin-top: 0;
    margin-left: 15px

}
div#namesection
{
    margin-top: 1%;
    padding: 0px;
    width: 670px; 
    margin-left:0%;


}

div#section1
{
    margin-top: 5px;
    padding: 0px;
    border-top: 2px solid black;
    width: 870px; 
    margin-bottom: 5px;


}
div#section1 header
{
    margin-left: 10px;
    margin-top: 5px;
    margin-bottom: 0px;
    font-weight: bold;
}
table.section1table td 
{
    vertical-align:top;
    text-align: left;
    padding: 5px;

}
table.section1table th 
{
    font-weight: normal;
    padding: 0 5px 0 5px;
    vertical-align:top;
    text-align: left;
}
div#section2 /*labeled wrong, this is the sec2 header*/
{
  padding: 0;
  border-top: 2px solid black;
  width: 870px;
  margin-left:0;
  margin-bottom: 0;


}
table.section1table 
{
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 0%;
    margin-top: 0.15%;
}

div#section2 header /*labeled wrong, this is the actual box in sec2*/
{
  margin-left: 0.5%;
  margin-top: 5px;
  font-weight: bold;
  font-size: 14pt;
}

table.section2table 
{
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 0;
  margin-top: .15%;
}

table.section2table th,
table.section2table td 
{
  vertical-align:top;
  text-align: left;
  font-size: 12pt;
  /* The following rule (white-space) is used to allow the last cell   */
  /* to fill the remaining width.                                      */

  white-space: nowrap;
}

table.section2table th 
{
  /* padding to keep THs right aligned with TDs                        */
  padding: 0 5px 0 5px;
}

table.section2table td 
{
  padding: 5px;
}

table.section2table tr.last-row th,
table.section2table tr.last-row td 
{
  background-color: #dddddd;
}

table.section2table tr.last-row th.total,
table.section2table tr.last-row td.total 
{
  /* The following rule (width) is used to allow the last cell to fill */
  /* the remaining width.                                              */

  width: 99%;
  text-align: right;
}

Как эту таблицу можно преобразовать в строки и столбцы начальной загрузки?

Answer 1

Прежде всего вы должны пройти через bootstrap и ознакомиться с ним, сделав это, вы сможете сделать это самостоятельно.

Во-вторых, если речь идет только об этой таблице, то нижеприведенный кодбудет делать вашу работу.

, что здесь происходит, это начальная загрузка структура сетки , <tr> заменяется на <div class="row">, строка делится на 12 столбцов, поэтому здесь мы используем<div class="col-sm-1">, а для ячейки с colspan=4 вы можете использовать class="col-sm-4".

здесь, в этом фрагменте, у нас есть небольшая область отображения, поэтому я использовал col-sm-*, для большего размера экрана вы можете использовать col-md-* / col-lg-*.Просмотрите подробности в документации по начальной загрузке.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-1 text-center">Clocked</div>
    <div class="col-sm-1 text-center">Regular</div>
    <div class="col-sm-1 text-center">Overtime</div>
    <div class="col-sm-1 text-center">Incentive</div>
    <div class="col-sm-1 text-center">Holiday</div>
    <div class="col-sm-1 text-center">Personal</div>
    <div class="col-sm-1 text-center">Vacation</div>
    <div class="col-sm-4 text-center">Off-Clock</div>
    <div class="total col-sm-1 text-center"><strong>Total</strong></div>
  </div>

  <div class="row">
    <div class="col-sm-1 text-center" id="clockHours">clockHrs</div>
    <div class="col-sm-1 text-center" id="regularHours">regularHrs</div>
    <div class="col-sm-1 text-center" id="overtime">overtimeHrs</div>
    <div class="col-sm-1 text-center" id="Incentive">incentiveHrs</div>
    <div class="col-sm-1 text-center" id="holiday">holidayHrs</div>
    <div class="col-sm-1 text-center" id="personal">sickHrs</div>
    <div class="col-sm-1 text-center" id="vacation">vacationHrs</div>
    <div class="col-sm-4 text-center">offClockHrs</div>
    <div class="total col-sm-1 text-center">totalHrs</div>
  </div>
</div>