Probleme Tabellenköpfe Einstellung horizontal

Invoice Picture Probleme Tabellenköpfe Einstellung horizontal

Hallo Leute zu erweitern,

Ich habe gerade angefangen HTML und CSS zu lernen und entschied sich für mein erstes Lernprojekt zu starten. Ich versuche, eine Rechnungsvorlage genau wie die auf dem angehängten Bild neu zu erstellen. Ich habe Probleme beim Ausrichten der Tabellenköpfe, die "Ship Method, Orde Date ..." sagen, um wie auf dem Bild zu erweitern. Ich habe versucht, die Breite innerhalb des th-Tags anzupassen und einen Pixelwert zu setzen, aber ich bleibe stecken.

Danke für Ihre Hilfe, Leute!

Hier ist, was ich bisher codiert:

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

Quelle

2017-02-17 Ceejay86

Sie verwenden können, height:0/auto, auch min-height und die :empty Pseudo einige Zellen zu verstecken.

rowspan und colspan können auch

Der Tag caption kann sehr nützlich sein, auch

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>

Quelle

2017-02-18 01:02:08

Vielen Dank für die Zeit nehmen, um mir zu helfen verwendet werden. Ich schätze es. – 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>

Quelle

2017-02-17 23:08:53 Mers

Probleme Tabellenköpfe Einstellung horizontal

Antwort

Verwandte Themen