用于为订单/详细信息创建重复标题+详细信息行的HTML

时间:2016-07-01 15:01:04

标签: html css

我不太熟悉HTML,所以我正在向HTML向导寻求帮助。我的目标是创建一个表,在一行上显示Order Header信息,其中包含订单详细信息。然后,这将重复每个订单。这是我到目前为止所拥有的。我要求在正确的方向上轻推,以便为每个新订单重复订单#。

这是在使用命令{BEGIN * REPEAT}重复数据行的软件中。

enter image description here

这是我的代码:

{BEGIN*HTML}

<head>
  <style>
    table,
    td,
    th {
      border: 1px solid green;
      font-family: Arial, Helvetica, sans- serif;
    }
    td {
      padding: 1px 5px 1px 5px;
    }
    th {
      background-color: purple;
      color: white;
      padding: 1px 5px 1px 5px;
    }
    text {
      font-family: Arial, Helvetica, sans-serif;
    }
    p {
      font-family: Arial, Helvetica, sans-serif;
    }
  </style>
</head>

<!--Used to add image
<table style="border:0px">
            <tr style="border:0px">
            <td style="border:0px"><p><img src="" style="position:relative;      left:-20px; width:475px;"</td>
        </tr>
<table>

Used to right justify numeric fields: style="text-align:right;"
-->

<p>Below is a list of orders created for your customers.</p>

<p><b>Order Details</b>
</p>

<table>
  <thead>
    <tr>
      <th>Ord.#</th>
      <th>Date</th>
      <th>Cust.</th>
      <th>Ship-to</th>
      <th>City</th>
      <th>ST</th>
      <th>ExpectedShip</th>
      <th>Item</th>
      <th>Qty</th>
      <th>UnitPrice</th>
      <th>Location</th>
    </tr>
  </thead>

  <tbody>

    <tr>
      <th>{ORDNUMBER}</th>
    </tr>

    {BEGIN*REPEAT}


    <tr>
      <td>{ORDNUMBER}</td>
      <td>{OrdDateYYYYMMDD}</td>
      <td>{NAMECUST}</td>
      <td>{SHPNAME}</td>
      <td>{SHPCITY}</td>
      <td>{SHPSTATE}</td>
      <td>{EXPDATE}</td>
      <td>{ITEM}</td>
      <td>{ORIGQTY}</td>
      <td>{UNITPRICE}</td>
      <td>{LOCATION}</td>
    </tr>

    {END*REPEAT}
  </tbody>
</table>
<p></p>
<p></p>
{END*HTML} 

1 个答案:

答案 0 :(得分:0)

以下是您开始使用的示例。

&#13;
&#13;
table {
  border-collapse: collapse;
}
tr:not(:first-child) {
  counter-increment: order;
}
td {
  border: 1px solid grey;
  padding: 5px 10px;
}
td:first-child:after {
  content: "ORD000" counter(order);
}
td:nth-child(2):after {
  content: "20060717";
}
tr:first-child td:after {
  display: none;
}
&#13;
<table>
  <tr>
    <td>This Column increases by 1</td>
    <td>This Column just repeats</td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
&#13;
&#13;
&#13;