Question

Hello Guys，

我刚刚开始学习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>

Answer 1

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

Answer 2

您可以使用height:0/auto，min-height和:empty伪来隐藏某些单元格。

rowspan和colspan也非常有用

也可以使用标记caption

＆＃13;

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

＆＃13;

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

＆＃13;

设置表标题以水平扩展时出现问题

2 个答案: