問題設置表頭擴大水平

好傢伙，

我剛開始學習HTML和CSS，並決定開始我的第一次學習的項目。我正在嘗試重新創建發票模板，與附圖上的發票模板完全相同。我遇到的問題是，將表格標題對齊爲「船方法，訂單日期...」以便像圖片一樣展開。我已經嘗試調整th標籤內的寬度並設置像素值，但我卡住了。

感謝您的幫助，夥計們！

這是我迄今編碼：

 <!DOCTYPE html> 
<head> 
    <link rel="stylesheet" type="text/css" 
     href="https://fonts.googleapis.com/css?family=Roboto"> 
<style> 
    body { 
     font-family: 'Roboto'; 
     margin: 0; 
     body: 0; 
     } 

    .shipto { 

     color: #fff; 
     white-space: pre; 
     background:#000; 
     width: 40px; 
     height: 225px; 
     position: relative; 
     left: 400px; 
     bottom: 30px; 
      } 

    .top-box { 
     color: #fff; 
     table-layout: fixed; 
      } 

    th { 
     white-space: nowrap; 
     width: 100%; 
     height: 100%; 
     } 


</style> 
</head> 
<body> 
<img src="https://c1.staticflickr.com/3/2926/32085237484_4b8c92a6b2_z.jpg" width="300" height="44" alt="Adidas Logo"> 
<div class="shipto"> 
<h4> 
    S 
    h 
    i 
    p 

    T 
    o 
    </h4> 
    <div class="top-box"> 
    <table border="1" summary="order information" bgcolor="black" cellpadding="15" cellspacing="0"> 

    <tr> 
    <th>SHIP METHOD</th> 
    <th>ORDER DATE</th> 
    <th>ORDER NO.</th> 
    <th>DELIVERY NO.</th> 
    <th>PAYMENT TYPE</th> 

    </tr> 
</div> 

</body>

來源

2017-02-17 Ceejay86

可以使用，height:0/auto，也min-height和:empty僞隱藏某些細胞。

行跨度和列跨度可能也非常有用

標籤caption也可以用來

table { 
 
    border-collapse: collapse; 
 
    height:80vh; 
 
    margin:auto; 
 
} 
 
tr >*{ 
 
height:0; 
 
} 
 
tr:first-child, 
 
tr:nth-child(3) { 
 
    background-color: black; 
 
    color: white; 
 
} 
 

 
tr:last-child >*{ 
 
    height: auto; 
 
    vertical-align: top; 
 
} 
 

 
th, 
 
td { 
 
    border: solid 1px; 
 
    padding: 0.2em 1em 0.5em; 
 
} 
 

 
th:empty { 
 
    display: none; 
 
} 
 
caption { 
 
caption-side:left; 
 
writing-mode:vertical-lr; 
 
text-align:center; 
 
min-height:80vh; 
 
font-size:2em; 
 
background:lightgray; 
 
}

<table> 
 
<caption>Shipto</caption> 
 
    <tr> 
 
    <th colspan="2">Ship Method</th> 
 
    <th>Order Date</th> 
 
    <th>Order No.</th> 
 
    <th>Delivery No.</th> 
 
    <th>Payment Type</th> 
 
    <th></th> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="2">UPS 2 Days Res. UPSZ</td> 
 
    <td>06/27/2015</td> 
 
    <td>A002324434a</td> 
 
    <td>2203552102</td> 
 
    <td>VISA9738</td> 
 
    <td>Unit Pr</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Line #</td> 
 
    <td>ITEM/UPC</td> 
 
    <td colspan="4">Desciption</td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>AQ432_11</td> 
 
    <td colspan="4">YEEZY BOOST 350 mULTI</td> 
 
    <td>$ 2222.22</td> 
 
    </tr> 
 
</table>

來源

2017-02-18 01:02:08

感謝您抽出寶貴時間來幫助我。我很感激。 – Ceejay86

<table border="1"> 
    <tr> 
    <th colspan="2">Ship Method</th> 
    <th>Order Date</th> 
    <th>Order No.</th> 
    <th>Delivery No.</th> 
    <th>Payment Type</th> 
    </tr> 
    <tr> 
    <td colspan="2">UPS 2 Days Res. UPSZ</td> 
    <td>06/27/2015</td> 
    <td>A002324434a</td> 
    <td>2203552102</td> 
    <td>VISA9738</td> 
    <td>Unit ..</td> 
    </tr> 
    <tr> 
    <td>Line #</td> 
    <td>ITEM/UPC</td> 
    <td colspan="4">Desciption</td> 
    <td></td> 
    </tr> 
    <tr> 
    <td>1</td> 
    <td>AQ432_11</td> 
    <td colspan="4">YEEZY BOOST 350 mULTI</td> 
    <td>$ 2...</td> 
    </tr> 



</table>

table { 
 
    border-collapse: collapse; 
 
    text-align: center; 
 
} 
 
tr:first-child, tr:nth-child(3) { 
 
    background-color: black; 
 
    color: white; 
 
} 
 
tr:last-child { 
 
height: 300px; 
 
    vertical-align: top; 
 
}

<table border="1"> 
 
    <tr> 
 
    <th colspan="2">Ship Method</th> 
 
    <th>Order Date</th> 
 
    <th>Order No.</th> 
 
    <th>Delivery No.</th> 
 
    <th>Payment Type</th> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="2">UPS 2 Days Res. UPSZ</td> 
 
    <td>06/27/2015</td> 
 
    <td>A002324434a</td> 
 
    <td>2203552102</td> 
 
    <td>VISA9738</td> 
 
    <td>Unit ..</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Line #</td> 
 
    <td>ITEM/UPC</td> 
 
    <td colspan="4">Desciption</td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>AQ432_11</td> 
 
    <td colspan="4">YEEZY BOOST 350 mULTI</td> 
 
    <td>$ 2...</td> 
 
    </tr> 
 
    
 
    
 
    
 
</table>

來源

2017-02-17 23:08:53 Mers

問題設置表頭擴大水平

回答

相關問題