通过 css 更改表格

【问题标题】：Alter a table via css通过 css 更改表格
【发布时间】：2016-06-04 08:40:42
【问题描述】：

我有这张来自 woocommerce 产品收据打印的表格，我有以下问题：数量列有一个宽度：15% 的值，但看起来它占用了表格宽度的 30% 并且占用了大量有用空间。

有人知道为什么会这样吗？

另外，我怎样才能完全通过 css 删除“价格”列而不缩小表格（保持 100% 宽度）

这是我的小提琴：https://jsfiddle.net/ay7ys32L/2/

HTML：

    <div id="page">





                <article class="content">

                                       
                    <div class="company-info">
                        <h1 class="company-name">Flouskounis Food</h1>                      <div class="company-address"><p>2610 424342, Νοταρά 85</p>
</div>
                    </div>

                <div class="order-addresses">

                    <div class="billing-address">
                        <h3>Πελάτης:</h3>
                        <address>

                            customer name<br/>Κυρία<br/>address<br/>ισόγειο<br/>city<br/>Πελοπόννησος<br/>26225
                        </address>
                    </div>

                </div><!-- .order-addresses -->
                phone               
                <div class="order-items">
                    <table>
                        <thead>
                            <tr>
                                <th class="head-quantity"><span>quantity</span></th>
                                <th class="head-name"><span>item</span></th>
                                <th class="head-item-price"><span>price</span></th>
                                <th class="head-price"><span>total</span></th>
                            </tr>
                        </thead>

                        <tbody>


                                    <tr>
                                    <td class="product-quantity">
                                            <span>1</span>
                                        </td>
                                        <td class="product-name">

                                            <span class="name">Πίτα γύρος κοτόπουλο</span>

                                            <dl class="variation">
                        <dt class="variation-euro020">+:</dt>
                        <dd class="variation-euro020"><p>διπλό ζυμαράκι</p>
</dd>

                        <dt class="variation-">+:</dt>
                        <dd class="variation-"><p>Με υλικά της επιλογής σας</p>
</dd>

                        <dt class="variation-">+:</dt>
                        <dd class="variation-"><p>πατάτες</p>
</dd>

                        <dt class="variation-">+:</dt>
                        <dd class="variation-"><p>ντομάτα</p>
</dd>

                        <dt class="variation-">+:</dt>
                        <dd class="variation-"><p>τζατζίκι</p>
</dd>

                        <dt class="variation-">+:</dt>
                        <dd class="variation-"><p>μουστάρδα</p>
</dd>

                        <dt class="variation-">+:</dt>
                        <dd class="variation-"><p>σως μουστάδρας</p>
</dd>

                        <dt class="variation-">+:</dt>
                        <dd class="variation-"><p>μαγιονέζα</p>
</dd>

                        <dt class="variation-">+:</dt>
                        <dd class="variation-"><p>ροζ σως</p>
</dd>

                        <dt class="variation-euro020">+:</dt>
                        <dd class="variation-euro020"><p>μαρούλι</p>
</dd>

                        <dt class="variation-euro050">+:</dt>
                        <dd class="variation-euro050"><p>πιπεριά</p>
</dd>

                        <dt class="variation-euro050">+:</dt>
                        <dd class="variation-euro050"><p>καλαμπόκι</p>
</dd>

                        <dt class="variation-euro070">+:</dt>
                        <dd class="variation-euro070"><p>τυρί τριμμένο</p>
</dd>

                        <dt class="variation-euro070">+:</dt>
                        <dd class="variation-euro070"><p>σαγανάκι</p>
</dd>

                        <dt class="variation-euro070">+:</dt>
                        <dd class="variation-euro070"><p>φέτα</p>
</dd>
                    </dl>                                           
                                            <dl class="extras">

                                                                                            </dl>
                                        </td>
                                        <td class="product-item-price">
                                            <span><span class="amount">&euro;5.30</span></span>
                                        </td>

                                        <td class="product-price">
                                            <span><span class="amount">&euro;5.30</span></span>
                                        </td>
                                    </tr>


                                    <tr>
                                    <td class="product-quantity">
                                            <span>1</span>
                                        </td>
                                        <td class="product-name">

                                            <span class="name">Ντοματοσαλάτα</span>


                                            <dl class="extras">

                                                                                            </dl>
                                        </td>
                                        <td class="product-item-price">
                                            <span><span class="amount">&euro;5.20</span></span>
                                        </td>

                                        <td class="product-price">
                                            <span><span class="amount">&euro;5.20</span></span>
                                        </td>
                                    </tr>


                                    <tr>
                                    <td class="product-quantity">
                                            <span>1</span>
                                        </td>
                                        <td class="product-name">

                                            <span class="name">Χωριάτικη</span>


                                            <dl class="extras">

                                                                                            </dl>
                                        </td>
                                        <td class="product-item-price">
                                            <span><span class="amount">&euro;5.50</span></span>
                                        </td>

                                        <td class="product-price">
                                            <span><span class="amount">&euro;5.50</span></span>
                                        </td>
                                    </tr>
                                                                                    </tbody>

                        <tfoot>                         
                                                                                                <tr>
                                        <td class="total-name"><span>Subtotal</span></td>
                                        <td class="total-item-price"></td>
                                        <td class="total-quantity"></td>
                                        <td class="total-price"><span><span class="amount">&euro;16.00</span></span></td>
                                    </tr>
                                                                    <tr>
                                        <td class="total-name"><span>Shipping</span></td>
                                        <td class="total-item-price"></td>
                                        <td class="total-quantity"></td>
                                        <td class="total-price"><span>Delivery</span></td>
                                    </tr>
                                                                    <tr>
                                        <td class="total-name"><span>Total</span></td>
                                        <td class="total-item-price"></td>
                                        <td class="total-quantity"></td>
                                        <td class="total-price"><span><span class="amount">&euro;16.00</span></span></td>
                                    </tr>
                                                                                    </tfoot>
                    </table>

                                    </div><!-- .order-items -->


                <div class="order-notes">

                                    </div><!-- .order-notes -->




                <div class="order-colophon">
                    <div class="colophon-policies">
                                            </div>

                    <div class="colophon-imprint">
                                            </div>  

                                    </div><!-- .order-colophon -->

                </article><!-- .content -->






        </div><!-- #page -->

CSS：

    /*
 * Template: Default
 */

/* Simple CSS Reset and Print options
------------------------------------------*/


html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, table, ol, ul, dl, li, dt, dd {
    border: 0 none;
    font: inherit;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}


/* Template Page Layout
------------------------------------------*/


/* Main Body */
body {
    background: #fff;
    color: #000;
    font-family: "HelveticaNeue", Helvetica, Arial, sans-serif;
    font-size: 100%;
    line-height: 1.25em;
}

h1,
h2,
h3,
h4 {
    font-weight: bold;
    margin-bottom: 1.2em;
}

ul {
    margin-bottom: 1.25em;
}

li,
dt,
dd  {
    padding: 0.375em 0;
}

dt {
    font-weight: bold;
}

p + p {
    margin-top: 1.25em;
}

address {
    font-style: normal;
}

/* Basic Table Styling */
table {
    page-break-inside: auto;
    width: 100%;
}

tr {
    page-break-inside: avoid;
    page-break-after: auto; 
    border-bottom: 0.12em solid #bbb;
}

td,
th {
    padding: 0.375em 0.75em 0.375em 0;
    vertical-align: top;
}

td img,
th img {
    vertical-align: top;
}

th {
    color: black;
    font-weight: bold;
    text-align: left;
    padding-bottom: 1.25em;
}

tfoot {
    display: table-row-group;
}

/* Page Margins & Basic Stylings */
#page {
    margin-left: 10px !important;
    margin-right: 10px;
    text-align: left;
    font-size: 16px;
}

.content {
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 2%;
    padding-bottom: 2%;
}

.content + .content {
    page-break-before: always;
}

h1,
h2 {
    font-size: 1.572em;
}

.order-branding,
.order-addresses,
.order-info,
.order-items,
.order-notes,
.order-thanks,
.order-colophon {
    margin-bottom: 3em;
}

.order-items {
    page-break-before: auto;
    page-break-after: auto;
}

/* Order Branding */
.order-branding .company-logo {
    margin-bottom: 1em;
}

/* Order Addresses */
.order-addresses {
    margin-bottom: 10px;
}

.order-addresses:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.billing-address {
    width: 50%;
    float: left;
}

.shipping-address {
    width: 50%;
    float: left;
}

.order-addresses.no-shipping-address .shipping-address {
    display: none;
}

/*
.order-addresses.no-shipping-address .billing-address {
    margin-left: 50%;
}
*/

/* Switch the addresses for invoices */

/* Order Info */
.order-info ul {
    border-top: 0.24em solid black;
}

.order-info li {
    border-bottom: 0.12em solid #bbb;
}

.order-info li strong {
    min-width: 18%;
    font-weight: normal;
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-bottom: 0;
    padding-right: 0.35em;
}

/* Order Items */
.order-items {
    margin-bottom: 0.5em;
}

.order-items .head-name,
.order-items .product-name,
.order-items .total-name {
    width: 50%;
}

.order-items .head-quantity,
.order-items .product-quantity,
.order-items .total-quantity,
.order-items .head-item-price,
.order-items .product-item-price,
.order-items .total-item-price {
    width: 15%;
}

.order-items .head-price,
.order-items .product-price,
.order-items .total-price {
    width: 20%;
}

.order-items p {
    display: inline;
}

.order-items small,
.order-items dt,
.order-items dd {
    font-size: 14px;
    font-weight: normal;
    line-height: 150%;
    padding: 0;
    margin: 0;
}

.order-items dt,
.order-items dd {
    display: block;
    float: left;
}

.order-items dt {
    clear: left;
    padding-right: 0.2em;
}

.order-items tfoot tr:first-child,
.order-items tfoot tr:last-child {
    font-weight: bold;
}

.order-items tfoot tr:last-child .total-price .amount:first-child {
    font-weight: bold;
}

.order-items tfoot tr:last-child {
    border-bottom: 0.24em solid black;
}

/* Order Notes */
.order-notes {
    margin-top: 3em;
    margin-bottom: 6em;
}

.order-notes h4 {
    margin-bottom: 0;
}

/* Order Thanks */
.order-thanks {
    margin-left: 50%;
}

/* Order Colophon */
.order-colophon {
    font-size: 0.785em;
    line-height: 150%;
    margin-bottom: 0;
}

.colophon-policies {
    margin-bottom: 1.25em;
}


/* CSS Media Queries for Print
------------------------------------------*/


@media print {
    body {
        font-size: 14px;
    }

    .content {
        /* Remove padding to not generate empty follow up pages */
        padding-bottom: 0;
    }
}

提前感谢您的宝贵时间。

【问题讨论】：

    标签： html css


    【解决方案1】：

    您可以使用:nth-child()。你需要的 CSS 是：

    .order-items table tr > *:nth-child(3) {
  display: none;
}

    工作片段

    /*
 * Template: Default
 */


/* Simple CSS Reset and Print options
------------------------------------------*/

html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
table,
ol,
ul,
dl,
li,
dt,
dd {
  border: 0 none;
  font: inherit;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}


/* Template Page Layout
------------------------------------------*/


/* Main Body */

body {
  background: #fff;
  color: #000;
  font-family: "HelveticaNeue", Helvetica, Arial, sans-serif;
  font-size: 100%;
  line-height: 1.25em;
}

h1,
h2,
h3,
h4 {
  font-weight: bold;
  margin-bottom: 1.2em;
}

ul {
  margin-bottom: 1.25em;
}

li,
dt,
dd {
  padding: 0.375em 0;
}

dt {
  font-weight: bold;
}

p + p {
  margin-top: 1.25em;
}

address {
  font-style: normal;
}


/* Basic Table Styling */

table {
  page-break-inside: auto;
  width: 100%;
}

tr {
  page-break-inside: avoid;
  page-break-after: auto;
  border-bottom: 0.12em solid #bbb;
}

td,
th {
  padding: 0.375em 0.75em 0.375em 0;
  vertical-align: top;
}

td img,
th img {
  vertical-align: top;
}

th {
  color: black;
  font-weight: bold;
  text-align: left;
  padding-bottom: 1.25em;
}

tfoot {
  display: table-row-group;
}


/* Page Margins & Basic Stylings */

#page {
  margin-left: 10px !important;
  margin-right: 10px;
  text-align: left;
  font-size: 16px;
}

.content {
  padding-left: 2%;
  padding-right: 2%;
  padding-top: 2%;
  padding-bottom: 2%;
}

.content + .content {
  page-break-before: always;
}

h1,
h2 {
  font-size: 1.572em;
}

.order-branding,
.order-addresses,
.order-info,
.order-items,
.order-notes,
.order-thanks,
.order-colophon {
  margin-bottom: 3em;
}

.order-items {
  page-break-before: auto;
  page-break-after: auto;
}


/* Order Branding */

.order-branding .company-logo {
  margin-bottom: 1em;
}


/* Order Addresses */

.order-addresses {
  margin-bottom: 10px;
}

.order-addresses:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.billing-address {
  width: 50%;
  float: left;
}

.shipping-address {
  width: 50%;
  float: left;
}

.order-addresses.no-shipping-address .shipping-address {
  display: none;
}


/*
.order-addresses.no-shipping-address .billing-address {
	margin-left: 50%;
}
*/


/* Switch the addresses for invoices */


/* Order Info */

.order-info ul {
  border-top: 0.24em solid black;
}

.order-info li {
  border-bottom: 0.12em solid #bbb;
}

.order-info li strong {
  min-width: 18%;
  font-weight: normal;
  display: inline-block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-bottom: 0;
  padding-right: 0.35em;
}


/* Order Items */

.order-items {
  margin-bottom: 0.5em;
}

.order-items .head-name,
.order-items .product-name,
.order-items .total-name {
  width: 50%;
}

.order-items .head-quantity,
.order-items .product-quantity,
.order-items .total-quantity,
.order-items .head-item-price,
.order-items .product-item-price,
.order-items .total-item-price {
  width: 15%;
}

.order-items .head-price,
.order-items .product-price,
.order-items .total-price {
  width: 20%;
}

.order-items p {
  display: inline;
}

.order-items small,
.order-items dt,
.order-items dd {
  font-size: 14px;
  font-weight: normal;
  line-height: 150%;
  padding: 0;
  margin: 0;
}

.order-items dt,
.order-items dd {
  display: block;
  float: left;
}

.order-items dt {
  clear: left;
  padding-right: 0.2em;
}

.order-items tfoot tr:first-child,
.order-items tfoot tr:last-child {
  font-weight: bold;
}

.order-items tfoot tr:last-child .total-price .amount:first-child {
  font-weight: bold;
}

.order-items tfoot tr:last-child {
  border-bottom: 0.24em solid black;
}


/* Order Notes */

.order-notes {
  margin-top: 3em;
  margin-bottom: 6em;
}

.order-notes h4 {
  margin-bottom: 0;
}


/* Order Thanks */

.order-thanks {
  margin-left: 50%;
}


/* Order Colophon */

.order-colophon {
  font-size: 0.785em;
  line-height: 150%;
  margin-bottom: 0;
}

.colophon-policies {
  margin-bottom: 1.25em;
}


/* CSS Media Queries for Print
------------------------------------------*/

@media print {
  body {
    font-size: 14px;
  }
  .content {
    /* Remove padding to not generate empty follow up pages */
    padding-bottom: 0;
  }
}

.order-items table tr > *:nth-child(3) {
  display: none;
}
    <div id="page">
  <article class="content">

    <div class="company-info">
      <h1 class="company-name">Flouskounis Food</h1>
      <div class="company-address">
        <p>2610 424342, Νοταρά 85</p>
      </div>
    </div>

    <div class="order-addresses">

      <div class="billing-address">
        <h3>Πελάτης:</h3>
        <address>
          customer name<br/>Κυρία<br/>address<br/>ισόγειο<br/>city<br/>Πελοπόννησος<br/>26225
        </address>
      </div>

    </div>
    <!-- .order-addresses -->
    phone
    <div class="order-items">
      <table>
        <thead>
          <tr>
            <th class="head-quantity"><span>quantity</span></th>
            <th class="head-name"><span>item</span></th>
            <th class="head-item-price"><span>price</span></th>
            <th class="head-price"><span>total</span></th>
          </tr>
        </thead>

        <tbody>


          <tr>
            <td class="product-quantity">
              <span>1</span>
            </td>
            <td class="product-name">

              <span class="name">Πίτα γύρος κοτόπουλο</span>

              <dl class="variation">
                <dt class="variation-euro020">+:</dt>
                <dd class="variation-euro020">
                  <p>διπλό ζυμαράκι</p>
                </dd>

                <dt class="variation-">+:</dt>
                <dd class="variation-">
                  <p>Με υλικά της επιλογής σας</p>
                </dd>

                <dt class="variation-">+:</dt>
                <dd class="variation-">
                  <p>πατάτες</p>
                </dd>

                <dt class="variation-">+:</dt>
                <dd class="variation-">
                  <p>ντομάτα</p>
                </dd>

                <dt class="variation-">+:</dt>
                <dd class="variation-">
                  <p>τζατζίκι</p>
                </dd>

                <dt class="variation-">+:</dt>
                <dd class="variation-">
                  <p>μουστάρδα</p>
                </dd>

                <dt class="variation-">+:</dt>
                <dd class="variation-">
                  <p>σως μουστάδρας</p>
                </dd>

                <dt class="variation-">+:</dt>
                <dd class="variation-">
                  <p>μαγιονέζα</p>
                </dd>

                <dt class="variation-">+:</dt>
                <dd class="variation-">
                  <p>ροζ σως</p>
                </dd>

                <dt class="variation-euro020">+:</dt>
                <dd class="variation-euro020">
                  <p>μαρούλι</p>
                </dd>

                <dt class="variation-euro050">+:</dt>
                <dd class="variation-euro050">
                  <p>πιπεριά</p>
                </dd>

                <dt class="variation-euro050">+:</dt>
                <dd class="variation-euro050">
                  <p>καλαμπόκι</p>
                </dd>

                <dt class="variation-euro070">+:</dt>
                <dd class="variation-euro070">
                  <p>τυρί τριμμένο</p>
                </dd>

                <dt class="variation-euro070">+:</dt>
                <dd class="variation-euro070">
                  <p>σαγανάκι</p>
                </dd>

                <dt class="variation-euro070">+:</dt>
                <dd class="variation-euro070">
                  <p>φέτα</p>
                </dd>
              </dl>
              <dl class="extras">

              </dl>
            </td>
            <td class="product-item-price">
              <span><span class="amount">&euro;5.30</span></span>
            </td>

            <td class="product-price">
              <span><span class="amount">&euro;5.30</span></span>
            </td>
          </tr>


          <tr>
            <td class="product-quantity">
              <span>1</span>
            </td>
            <td class="product-name">

              <span class="name">Ντοματοσαλάτα</span>


              <dl class="extras">

              </dl>
            </td>
            <td class="product-item-price">
              <span><span class="amount">&euro;5.20</span></span>
            </td>

            <td class="product-price">
              <span><span class="amount">&euro;5.20</span></span>
            </td>
          </tr>


          <tr>
            <td class="product-quantity">
              <span>1</span>
            </td>
            <td class="product-name">

              <span class="name">Χωριάτικη</span>


              <dl class="extras">

              </dl>
            </td>
            <td class="product-item-price">
              <span><span class="amount">&euro;5.50</span></span>
            </td>

            <td class="product-price">
              <span><span class="amount">&euro;5.50</span></span>
            </td>
          </tr>
        </tbody>

        <tfoot>
          <tr>
            <td class="total-name"><span>Subtotal</span></td>
            <td class="total-item-price"></td>
            <td class="total-quantity"></td>
            <td class="total-price"><span><span class="amount">&euro;16.00</span></span>
            </td>
          </tr>
          <tr>
            <td class="total-name"><span>Shipping</span></td>
            <td class="total-item-price"></td>
            <td class="total-quantity"></td>
            <td class="total-price"><span>Delivery</span></td>
          </tr>
          <tr>
            <td class="total-name"><span>Total</span></td>
            <td class="total-item-price"></td>
            <td class="total-quantity"></td>
            <td class="total-price"><span><span class="amount">&euro;16.00</span></span>
            </td>
          </tr>
        </tfoot>
      </table>

    </div>
    <!-- .order-items -->

    <div class="order-notes">

    </div>
    <!-- .order-notes -->

    <div class="order-colophon">
      <div class="colophon-policies">
      </div>

      <div class="colophon-imprint">
      </div>

    </div>
    <!-- .order-colophon -->

  </article>
  <!-- .content -->

</div>
<!-- #page -->

    预览

    【讨论】：

    • 酷，谢谢，关于如何使数量列成为表格宽度的 10% 而不是 30% 的任何想法？
    • @K.Lykoudis 只需将width="10%"添加到对应的&lt;th&gt;即可。或者只是在 CSS 中使用 .head-quantity {width: 10%;}。
    • 已经试过了，它在 css 上的 15%，但大约需要 35%。在小提琴上检查一下，即使我把它放 1% 它保持不变，如果我让它超过 60%，它会变小（？？？？？？）它让我很困惑..
    • @K.Lykoudis 我明白你想说什么，但这是最大可能的。这就是表格的行为方式。
    • jsfiddle.net/ay7ys32L/4 如果有人要测试它，这里有完整的固定小提琴。非常感谢你，做个好人。
    【解决方案2】：

    问题是一排数量是有50% - class-total-name

    该数量列的所有其他 td 元素都占 15%，除了小计列，它覆盖了整个列的宽度。将小计类添加到 15% 将修复它。

    codepen 网址供参考-http://codepen.io/nagasai/pen/BzNmzp

          <div id="page">





              <article class="content">


                <div class="company-info">
                  <h1 class="company-name">Flouskounis Food</h1>                        <div class="company-address"><p>2610 424342, Νοταρά 85</p>
      </div>
                </div>

              <div class="order-addresses">

                <div class="billing-address">
                  <h3>Πελάτης:</h3>
                  <address>

                    customer name<br/>Κυρία<br/>address<br/>ισόγειο<br/>city<br/>Πελοπόννησος<br/>26225
                  </address>
                </div>

              </div><!-- .order-addresses -->
              phone             
              <div class="order-items">
                <table>
                  <thead>
                    <tr>
                      <th class="head-quantity"><span>quantity</span></th>
                      <th class="head-name"><span>item</span></th>
                      <th class="head-item-price"><span>price</span></th>
                      <th class="head-price"><span>total</span></th>
                    </tr>
                  </thead>

                  <tbody>


                        <tr>
                        <td class="product-quantity">
                            <span>1</span>
                          </td>
                          <td class="product-name">

                            <span class="name">Πίτα γύρος κοτόπουλο</span>

                            <dl class="variation">
                  <dt class="variation-euro020">+:</dt>
                  <dd class="variation-euro020"><p>διπλό ζυμαράκι</p>
      </dd>

                  <dt class="variation-">+:</dt>
                  <dd class="variation-"><p>Με υλικά της επιλογής σας</p>
      </dd>

                  <dt class="variation-">+:</dt>
                  <dd class="variation-"><p>πατάτες</p>
      </dd>

                  <dt class="variation-">+:</dt>
                  <dd class="variation-"><p>ντομάτα</p>
      </dd>

                  <dt class="variation-">+:</dt>
                  <dd class="variation-"><p>τζατζίκι</p>
      </dd>

                  <dt class="variation-">+:</dt>
                  <dd class="variation-"><p>μουστάρδα</p>
      </dd>

                  <dt class="variation-">+:</dt>
                  <dd class="variation-"><p>σως μουστάδρας</p>
      </dd>

                  <dt class="variation-">+:</dt>
                  <dd class="variation-"><p>μαγιονέζα</p>
      </dd>

                  <dt class="variation-">+:</dt>
                  <dd class="variation-"><p>ροζ σως</p>
      </dd>

                  <dt class="variation-euro020">+:</dt>
                  <dd class="variation-euro020"><p>μαρούλι</p>
      </dd>

                  <dt class="variation-euro050">+:</dt>
                  <dd class="variation-euro050"><p>πιπεριά</p>
      </dd>

                  <dt class="variation-euro050">+:</dt>
                  <dd class="variation-euro050"><p>καλαμπόκι</p>
      </dd>

                  <dt class="variation-euro070">+:</dt>
                  <dd class="variation-euro070"><p>τυρί τριμμένο</p>
      </dd>

                  <dt class="variation-euro070">+:</dt>
                  <dd class="variation-euro070"><p>σαγανάκι</p>
      </dd>

                  <dt class="variation-euro070">+:</dt>
                  <dd class="variation-euro070"><p>φέτα</p>
      </dd>
                </dl>                                           
                            <dl class="extras">

                                                    </dl>
                          </td>
                          <td class="product-item-price">
                            <span><span class="amount">&euro;5.30</span></span>
                          </td>

                          <td class="product-price">
                            <span><span class="amount">&euro;5.30</span></span>
                          </td>
                        </tr>


                        <tr>
                        <td class="product-quantity">
                            <span>1</span>
                          </td>
                          <td class="product-name">

                            <span class="name">Ντοματοσαλάτα</span>


                            <dl class="extras">

                                                    </dl>
                          </td>
                          <td class="product-item-price">
                            <span><span class="amount">&euro;5.20</span></span>
                          </td>

                          <td class="product-price">
                            <span><span class="amount">&euro;5.20</span></span>
                          </td>
                        </tr>


                        <tr>
                        <td class="product-quantity">
                            <span>1</span>
                          </td>
                          <td class="product-name">

                            <span class="name">Χωριάτικη</span>


                            <dl class="extras">

                                                    </dl>
                          </td>
                          <td class="product-item-price">
                            <span><span class="amount">&euro;5.50</span></span>
                          </td>

                          <td class="product-price">
                            <span><span class="amount">&euro;5.50</span></span>
                          </td>
                        </tr>
                                                </tbody>

                  <tfoot>                           
                                                      <tr>
                          <td class="total-name"><span>Subtotal</span></td>
                          <td class="total-item-price"></td>
                          <td class="total-quantity"></td>
                          <td class="total-price"><span><span class="amount">&euro;16.00</span></span></td>
                        </tr>
                                        <tr>
                          <td class="total-name"><span>Shipping</span></td>
                          <td class="total-item-price"></td>
                          <td class="total-quantity"></td>
                          <td class="total-price"><span>Delivery</span></td>
                        </tr>
                                        <tr>
                          <td class="total-name"><span>Total</span></td>
                          <td class="total-item-price"></td>
                          <td class="total-quantity"></td>
                          <td class="total-price"><span><span class="amount">&euro;16.00</span></span></td>
                        </tr>
                                                </tfoot>
                </table>

                        </div><!-- .order-items -->


              <div class="order-notes">

                        </div><!-- .order-notes -->




              <div class="order-colophon">
                <div class="colophon-policies">
                            </div>

                <div class="colophon-imprint">
                            </div>  

                        </div><!-- .order-colophon -->

              </article><!-- .content -->






          </div><!-- #page -->

    CSS：

          /*
       * Template: Default
       */

      /* Simple CSS Reset and Print options
      ------------------------------------------*/


      html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, table, ol, ul, dl, li, dt, dd {
        border: 0 none;
        font: inherit;
        margin: 0;
        padding: 0;
        vertical-align: baseline;
      }

      body {
        line-height: 1;
      }

      ol,
      ul {
        list-style: none;
      }

      table {
        border-collapse: collapse;
        border-spacing: 0;
      }


      /* Template Page Layout
      ------------------------------------------*/


      /* Main Body */
      body {
        background: #fff;
        color: #000;
        font-family: "HelveticaNeue", Helvetica, Arial, sans-serif;
        font-size: 100%;
        line-height: 1.25em;
      }

      h1,
      h2,
      h3,
      h4 {
        font-weight: bold;
        margin-bottom: 1.2em;
      }

      ul {
        margin-bottom: 1.25em;
      }

      li,
      dt,
      dd  {
        padding: 0.375em 0;
      }

      dt {
        font-weight: bold;
      }

      p + p {
        margin-top: 1.25em;
      }

      address {
        font-style: normal;
      }

      /* Basic Table Styling */
      table {
        page-break-inside: auto;
        width: 100%;
      }

      tr {
        page-break-inside: avoid;
        page-break-after: auto; 
        border-bottom: 0.12em solid #bbb;
      }

      td,
      th {
        padding: 0.375em 0.75em 0.375em 0;
        vertical-align: top;
      }

      td img,
      th img {
        vertical-align: top;
      }

      th {
        color: black;
        font-weight: bold;
        text-align: left;
        padding-bottom: 1.25em;
      }

      tfoot {
        display: table-row-group;
      }

      /* Page Margins & Basic Stylings */
      #page {
        margin-left: 10px !important;
        margin-right: 10px;
        text-align: left;
        font-size: 16px;
      }

      .content {
        padding-left: 2%;
        padding-right: 2%;
        padding-top: 2%;
        padding-bottom: 2%;
      }

      .content + .content {
        page-break-before: always;
      }

      h1,
      h2 {
        font-size: 1.572em;
      }

      .order-branding,
      .order-addresses,
      .order-info,
      .order-items,
      .order-notes,
      .order-thanks,
      .order-colophon {
        margin-bottom: 3em;
      }

      .order-items {
        page-break-before: auto;
        page-break-after: auto;
      }

      /* Order Branding */
      .order-branding .company-logo {
        margin-bottom: 1em;
      }

      /* Order Addresses */
      .order-addresses {
        margin-bottom: 10px;
      }

      .order-addresses:after {
        content: ".";
          display: block;
          height: 0;
          clear: both;
          visibility: hidden;
      }

      .billing-address {
        width: 50%;
        float: left;
      }

      .shipping-address {
        width: 50%;
        float: left;
      }

      .order-addresses.no-shipping-address .shipping-address {
        display: none;
      }

      /*
      .order-addresses.no-shipping-address .billing-address {
        margin-left: 50%;
      }
      */

      /* Switch the addresses for invoices */

      /* Order Info */
      .order-info ul {
        border-top: 0.24em solid black;
      }

      .order-info li {
        border-bottom: 0.12em solid #bbb;
      }

      .order-info li strong {
        min-width: 18%;
        font-weight: normal;
        display: inline-block;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        margin-bottom: 0;
        padding-right: 0.35em;
      }

      /* Order Items */
      .order-items {
        margin-bottom: 0.5em;
      }

      .order-items .head-name,
      .order-items .product-name,
      {
        width: 50%;
      }

      /*added .order-items .total-name to 15%*/
      .order-items .total-name 
      .order-items .head-quantity,
      .order-items .product-quantity,
      .order-items .total-quantity,
      .order-items .head-item-price,
      .order-items .product-item-price,
      .order-items .total-item-price {
        width: 15%;
      }

      .order-items .head-price,
      .order-items .product-price,
      .order-items .total-price {
        width: 20%;
      }

      .order-items p {
        display: inline;
      }

      .order-items small,
      .order-items dt,
      .order-items dd {
        font-size: 14px;
        font-weight: normal;
        line-height: 150%;
        padding: 0;
        margin: 0;
      }

      .order-items dt,
      .order-items dd {
        display: block;
        float: left;
      }

      .order-items dt {
        clear: left;
        padding-right: 0.2em;
      }

      .order-items tfoot tr:first-child,
      .order-items tfoot tr:last-child {
        font-weight: bold;
      }

      .order-items tfoot tr:last-child .total-price .amount:first-child {
        font-weight: bold;
      }

      .order-items tfoot tr:last-child {
        border-bottom: 0.24em solid black;
      }

      /* Order Notes */
      .order-notes {
        margin-top: 3em;
        margin-bottom: 6em;
      }

      .order-notes h4 {
        margin-bottom: 0;
      }

      /* Order Thanks */
      .order-thanks {
        margin-left: 50%;
      }

      /* Order Colophon */
      .order-colophon {
        font-size: 0.785em;
        line-height: 150%;
        margin-bottom: 0;
      }

      .colophon-policies {
        margin-bottom: 1.25em;
      }


      /* CSS Media Queries for Print
      ------------------------------------------*/


      @media print {
        body {
          font-size: 14px;
        }

        .content {
          /* Remove padding to not generate empty follow up pages */
          padding-bottom: 0;
        }
      }


      .head-item-price{
         visibility:hidden;
       }

      .product-item-price .amount
      {
        display:none;
       }

    希望对你有帮助

    如果您需要帮助，请告诉我:)

    【讨论】：

      猜你喜欢
      • 2021-12-29
      • 2019-12-03
      • 2010-12-29
      • 2020-01-02
      • 1970-01-01
      • 1970-01-01
      • 2013-11-14
      • 2018-04-17
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode