注文/詳細の繰り返しヘッダ+詳細行を作成するHTML

私はHTMLに慣れていないので、HTMLウィザードに手伝ってもらうことにしました。私の目標は、1行にOrder Header情報を表示し、その下の行にOrder Details情報を表示するテーブルを作成することです。その後、それはすべての注文に対して繰り返されます。ここに私がこれまで持っているものがあります。私は新しい注文ごとに注文番号を繰り返すよう正しい方向に微調整を求めています。注文/詳細の繰り返しヘッダ+詳細行を作成するHTML

これは、コマンドの{BEGIN * REPEAT}を使用してデータの行を繰り返すソフトウェアの中にあります。ここで

私のコードです：あなたが始めるためにのためにここで

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

出典

2016-07-01 SQL Learner

は一例です。

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

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

出典

2016-07-01 15:21:29 Pugazh

注文/詳細の繰り返しヘッダ+詳細行を作成するHTML

答えて

関連する問題