将最后一个HTML表格单元格放置在正文的右侧

时间：2018-10-16 17:49:40

标签： html css html-table

更新的问题包括代码*** 我尝试了一些方法让他们排队，但是还没有走运。可能需要尝试使用col，但是我不确定该怎么做。如果有人感兴趣，我可以发布我的代码。 *更新的问题包括代码***

这就是我想要的样子： This is how I want it to look

这是当前外观： This is how it currently looks 

#printPage {
  margin: 0px;
  padding: 0px;
  width: 910px;
  height: 40px;
  margin-bottom: 0.4%;
}

#tableheadtitle {
  margin-bottom: 0px;
  margin-right: 0px;
}

#tabledataname {
  margin-top: 0px;
  background-color: white;
}

#tablehead1 {
  font-weight: normal;
}

#tabledata1 {
  background-color: white;
}

#section1 {
  margin-top: 1%;
  padding: 0px;
  border: 1.5px solid black;
  width: 670px;
  height: 114px;
  /* clear: both;
        page-break-after: always; */
}

#header {
  margin-left: 0.5%;
  font-weight: bold;
  margin-bottom: 0px;
}

table {
  font-family: arial, sans-serif;
  width: 75%;
  margin-bottom: 0%;
  margin-top: 0.3%;
}

th {
  text-align: left;
  font-size: 8pt;
}

td {
  text-align: left;
  padding: 5px;
  font-size: 8pt;
}

#data1 {
  background-color: white;
}

#s1total {
  float: right;
  font-weight: bold;
  font-size: 11pt;
  background-color: #dddddd;
  margin-right: 2%;
  margin-top: 0px;
  margin-bottom: 0px;
}

#totalnum {
  float: right;
  font-weight: bold;
  font-size: 12pt;
  margin-right: 2%;
  margin-top: 0px;
  margin-bottom: 0px;
  background-color: #dddddd;
}

#section2 {
  margin-top: 0.5%;
  padding: 0px;
  border: 1.5px solid black;
  width: 670px;
  height: 925px;
}

#header2 {
  margin-left: 0.5%;
  font-weight: bold;
  margin-bottom: 0px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

#s2total {
  float: right;
  font-weight: bold;
  margin-right: 2%;
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 11pt;
  background-color: #dddddd;
}

#totalnum2 {
  float: right;
  font-weight: bold;
  font-size: 12pt;
  margin-bottom: 0px;
  margin-right: 2%;
  margin-top: 0px;
  background-color: #dddddd;
}
<!DOCTYPE html>
<html>

<head>
  <title>time card</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>

  <div id="printPage">
    <table id="table1">
      <colgroup>
        <col span="1" style="width:100%; ;text-align:left;">

      </colgroup>

      <tr id="tablerow1">
        <th id="tableheadtitle">TIMECARD</th>
        <th id="tablehead1">Employee Signature</th>
        <th id="tablehead1">Authorized</th>
      </tr>
      <tr id="tablerow1">
        <td id="tabledataname">John Doe - JXD</td>
        <td id="tabledata1"><input type="text"></td>
        <td id="tabledata1"><input type="text"></td>

      </tr>

    </table>

  </div>

  <div id="section1">
    <p id="header">WEEKLY HOURS</p>
    <table>
      <tr>
        <th>Clocked</th>
        <th>Regular</th>
        <th>Overtime</th>
        <th>Incentive</th>
        <th>Holiday</th>
        <th>Personal</th>
        <th>Vacation</th>
        <th>Off-Clock</th>
      </tr>

      <tr>
        <td id="data1">4.35</td>
        <td id="data1">0.00</td>
        <td id="data1">0.00</td>
        <td id="data1">0.00</td>
        <td id="data1">0.00</td>
        <td id="data1">0.00</td>
        <td id="data1">0.00</td>
        <td id="data1">0.00</td>
      </tr>
      <p id="s1total">Total</p>
      <br>
      <p id="totalnum">4.35</p>
    </table>

  </div>
  <div id="section2">
    <p id="header2">WED 10/3/2018</p>
    <table>

      <tr>
        <th>Shift start</th>
        <th>Time In</th>
        <th>Time Out</th>
        <th>Break 1</th>
        <th>Break 2</th>
        <th>Break Hours</th>
        <th>Clocked Hours</th>
        <th>Payable</th>

      </tr>

      <tr>
        <td id="data1">9:00 AM</td>
        <td id="data1">8:52 AM</td>
        <td id="data1">-</td>
        <td id="data1">11:30 AM- <br>12:00 PM</td>
        <td id="data1">-</td>
        <td id="data1">0.5</td>
        <td id="data1">4.85</td>
        <td id="data1">4.35</td>
      </tr>

      <tr>
        <th>Incentive</th>
        <th>Holiday</th>
        <th>Personal</th>
        <th>Vacation</th>
        <th>Off-Clock</th>
      </tr>
      <tr>
        <td>0.00</td>
        <td>0.00</td>
        <td>0.00</td>
        <td>0.00</td>
        <td>0.00</td>

      </tr>

    </table>
    <p id="s2total">Total</p>

    <p id="totalnum2">4.35</p>

    <p id="header2">THUR 10/4/2018</p>
    <table>
      <tr>
        <th>Shift start</th>
        <th>Time In</th>
        <th>Time Out</th>
        <th>Break 1</th>
        <th>Break 2</th>
        <th>Break Hours</th>
        <th>Clocked Hours</th>
        <th>Payable</th>

      </tr>

      <tr>
        <td id="data1">9:00 AM</td>
        <td id="data1">8:52 AM</td>
        <td id="data1">-</td>
        <td id="data1">11:30 AM- <br>12:00 PM</td>
        <td id="data1">-</td>
        <td id="data1">0.5</td>
        <td id="data1">4.85</td>
        <td id="data1">4.35</td>
      </tr>

      <tr>
        <th>Incentive</th>
        <th>Holiday</th>
        <th>Personal</th>
        <th>Vacation</th>
        <th>Off-Clock</th>

      </tr>
      <tr>
        <td>0.00</td>
        <td>0.00</td>
        <td>0.00</td>
        <td>0.00</td>
        <td>0.00</td>
      </tr>
    </table>
    <p id="s2total">Total</p>

    <p id="totalnum2">4.35</p>
    <p id="header2">FRI 10/5/2018</p>
    <table>
      <tr>
        <th>Shift start</th>
        <th>Time In</th>
        <th>Time Out</th>
        <th>Break 1</th>
        <th>Break 2</th>
        <th>Break Hours</th>
        <th>Clocked Hours</th>
        <th>Payable</th>

      </tr>

      <tr>
        <td id="data1">9:00 AM</td>
        <td id="data1">8:52 AM</td>
        <td id="data1">-</td>
        <td id="data1">11:30 AM- <br>12:00 PM</td>
        <td id="data1">-</td>
        <td id="data1">0.5</td>
        <td id="data1">4.85</td>
        <td id="data1">4.35</td>
      </tr>

      <tr>
        <th>Incentive</th>
        <th>Holiday</th>
        <th>Personal</th>
        <th>Vacation</th>
        <th>Off-Clock</th>
      </tr>
      <tr>
        <td>0.00</td>
        <td>0.00</td>
        <td>0.00</td>
        <td>0.00</td>
        <td>0.00</td>

      </tr>
    </table>
    <p id="s2total">Total</p>

    <p id="totalnum2">4.35</p>
    <p id="header2">SAT 10/6/2018</p>
    <table>
      <tr>
        <th>Shift start</th>
        <th>Time In</th>
        <th>Time Out</th>
        <th>Break 1</th>
        <th>Break 2</th>
        <th>Break Hours</th>
        <th>Clocked Hours</th>
        <th>Payable</th>

      </tr>

      <tr>
        <td id="data1">9:00 AM</td>
        <td id="data1">8:52 AM</td>
        <td id="data1">-</td>
        <td id="data1">11:30 AM- <br>12:00 PM</td>
        <td id="data1">-</td>
        <td id="data1">0.5</td>
        <td id="data1">4.85</td>
        <td id="data1">4.35</td>
      </tr>

      <tr>
        <th>Incentive</th>
        <th>Holiday</th>
        <th>Personal</th>
        <th>Vacation</th>
        <th>Off-Clock</th>
      </tr>
      <tr>
        <td>0.00</td>
        <td>0.00</td>
        <td>0.00</td>
        <td>0.00</td>
        <td>0.00</td>

      </tr>
    </table>
    <p id="s2total">Total</p>

    <p id="totalnum2">4.35</p>
    <p id="header2">SUN 10/7/2018</p>
    <table>
      <tr>
        <th>Shift start</th>
        <th>Time In</th>
        <th>Time Out</th>
        <th>Break 1</th>
        <th>Break 2</th>
        <th>Break Hours</th>
        <th>Clocked Hours</th>
        <th>Payable</th>

      </tr>

      <tr>
        <td id="data1">9:00 AM</td>
        <td id="data1">8:52 AM</td>
        <td id="data1">-</td>
        <td id="data1">11:30 AM- <br>12:00 PM</td>
        <td id="data1">-</td>
        <td id="data1">0.5</td>
        <td id="data1">4.85</td>
        <td id="data1">4.35</td>
      </tr>

      <tr>
        <th>Incentive</th>
        <th>Holiday</th>
        <th>Personal</th>
        <th>Vacation</th>
        <th>Off-Clock</th>
      </tr>
      <tr>
        <td>0.00</td>
        <td>0.00</td>
        <td>0.00</td>
        <td>0.00</td>
        <td>0.00</td>
      </tr>
    </table>
    <p id="s2total">Total</p>

    <p id="totalnum2">4.35</p>
    <p id="header2">MON 10/8/2018</p>
    <table>
      <tr>
        <th>Shift start</th>
        <th>Time In</th>
        <th>Time Out</th>
        <th>Break 1</th>
        <th>Break 2</th>
        <th>Break Hours</th>
        <th>Clocked Hours</th>
        <th>Payable</th>

      </tr>

      <tr>
        <td id="data1">9:00 AM</td>
        <td id="data1">8:52 AM</td>
        <td id="data1">-</td>
        <td id="data1">11:30 AM- <br>12:00 PM</td>
        <td id="data1">-</td>
        <td id="data1">0.5</td>
        <td id="data1">4.85</td>
        <td id="data1">4.35</td>
      </tr>

      <tr>
        <th>Incentive</th>
        <th>Holiday</th>
        <th>Personal</th>
        <th>Vacation</th>
        <th>Off-Clock</th>
      </tr>
      <tr>
        <td>0.00</td>
        <td>0.00</td>
        <td>0.00</td>
        <td>0.00</td>
        <td>0.00</td>

      </tr>
    </table>
    <p id="s2total">Total</p>

    <p id="totalnum2">4.35</p>
    <p id="header2">TUE 10/9/2018</p>
    <table>
      <tr>
        <th>Shift start</th>
        <th>Time In</th>
        <th>Time Out</th>
        <th>Break 1</th>
        <th>Break 2</th>
        <th>Break Hours</th>
        <th>Clocked Hours</th>
        <th>Payable</th>

      </tr>

      <tr>
        <td id="data1">9:00 AM</td>
        <td id="data1">8:52 AM</td>
        <td id="data1">-</td>
        <td id="data1">11:30 AM- <br>12:00 PM</td>
        <td id="data1">-</td>
        <td id="data1">0.5</td>
        <td id="data1">4.85</td>
        <td id="data1">4.35</td>
      </tr>

      <tr>
        <th>Incentive</th>
        <th>Holiday</th>
        <th>Personal</th>
        <th>Vacation</th>
        <th>Off-Clock</th>
      </tr>
      <tr>
        <td>0.00</td>
        <td>0.00</td>
        <td>0.00</td>
        <td>0.00</td>
        <td>0.00</td>

      </tr>
    </table>
    <p id="s2total">Total</p>

    <p id="totalnum2">4.35</p>

  </div>


</body>

</html>

2 个答案:

答案 0 :(得分：0)

在无法看到代码的情况下回答这个问题有点困难。我可以想到的是，它们似乎不在同一容器中。

如果将所有项目放入div并执行了诸如display：flex;之类的操作；您应该让它们全部连续排列。

答案 1 :(得分：0)

为简单起见，我只保留了相关部分。

首先，如上所述，id是唯一的。请勿为多个元素设置相同的ID。从个性上讲，我避免滥用它们（仅当我需要在DOM操作或CSS设计中直接引用它们时）。

也要避免重复CSS规则，如果某些元素共享设计，请明智地重新组合其规则。易于维护是短期和长期的目标。

最后，如您所见，在下面的代码段中，我使用了语义ID和类名，以便以后能够找到设计的依据。

#printPage {
  margin: 0px;
  padding: 0px;
  width: 910px;
  height: 40px;
  margin-bottom: 0.4%;
  font-family: arial, sans-serif;
}

div#section-example {
  margin-top: 0.5%;
  padding: 0px;
  border: 1.5px solid black;
  width: 670px;
  height: 925px;
}

div#section-example header {
  margin-left: 0.5%;
  font-weight: bold;
  margin-bottom: 0px;
}

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

table.example th,
table.example td {
  vertical-align:top;
  text-align: left;
  font-size: 8pt;
  /* The following rule (white-space) is used to allow the last cell   */
  /* to fill the remaining width.                                      */
  /* see https://stackoverflow.com/a/1060967/4375327                   */
  white-space: nowrap;
}

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

table.example td {
  padding: 5px;
}

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

table.example tr.last-row th.total,
table.example tr.last-row td.total {
  /* The following rule (width) is used to allow the last cell to fill */
  /* the remaining width.                                              */
  /* see https://stackoverflow.com/a/1060967/4375327                   */
  width: 99%;
  text-align: right;
}
<div id="printPage">

  <div id="section-example">
    <header>WED 10/3/2018</header>
    <table class="example">

      <tr>
        <th>Shift start</th>
        <th>Time In</th>
        <th>Time Out</th>
        <th>Break 1</th>
        <th>Break 2</th>
        <th>Break Hours</th>
        <th>Clocked Hours</th>
        <th>Payable</th>
      </tr>

      <tr>
        <td>9:00 AM</td>
        <td>8:52 AM</td>
        <td>-</td>
        <td>11:30 AM- <br>12:00 PM</td>
        <td>-</td>
        <td>0.5</td>
        <td>4.85</td>
        <td>4.35</td>
      </tr>

      <tr class="last-row">
        <th>Incentive</th>
        <th>Holiday</th>
        <th>Personal</th>
        <th>Vacation</th>
        <th colspan=4>Off-Clock</th>
        <th class="total">Total</th>
      </tr>

      <tr class="last-row">
        <td>0.00</td>
        <td>0.00</td>
        <td>0.00</td>
        <td>0.00</td>
        <td colspan=4>0.00</td>
        <td class="total">4.35</td>
      </tr>

    </table>

  </div>

相关问题
最新问题