Пробелы в html макет таблицы печати - PullRequest
0 голосов
/ 02 марта 2020

Пробел или, возможно, пробел был создан во время HTML Table печати макета между строкой таблицы! enter image description here

Вот мой код для печати

@media print {

  .gf-table {
    tbody > tr {
      height: auto;
    }

  }

  * {
    color: #000000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-size: 7pt !important;
  }

  html, body {
    height:100vh;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
  }


  .nav, .footer, .hero-section, {
    display: none !important;
  }

  @page {
    size: A4 landscape;
  }

  @page :left {
    margin-left: auto;
  }

  @page :right {
    margin-left: auto;
  }


  .gf-main-table {
    table{
      table-layout: fixed;
    }

    table {
      page-break-after: auto!important;
      border-collapse: collapse!important;
    }

    tr {
      page-break-inside: avoid!important;
      page-break-after: auto!important;

    }

    td {
      page-break-inside: avoid!important;
      page-break-after: auto!important;

    }

    thead {
      display: table-header-group!important;
    }

    tfoot {
      display: table-footer-group!important;
    }
  }
}

Разметка

<div data-v-67e52cb6="" class="container-fluid">
  <div data-v-67e52cb6="" class="row">
    <div data-v-67e52cb6="" class="col-12">
      <div data-v-67e52cb6="" class="gf-main-table table-md-responsive">
        <table data-v-67e52cb6="" border="1" bordercolor="#001A57" class="gf-table text-center">
          <thead data-v-67e52cb6="">
          <tr data-v-67e52cb6="">
            <th data-v-67e52cb6="" scope="col" class="px-4"></th>
            <th data-v-67e52cb6="" scope="col" colspan="1" class="py-4">
              "E" Term
              Origin
            </th>
            <th data-v-67e52cb6="" scope="col" colspan="3" class="py-4">
              "F" Terms
              Freight charges not paid
            </th>
            <th data-v-67e52cb6="" scope="col" colspan="4" class="py-4">
              "C" Terms
              Freight charges paid
            </th>
            <th data-v-67e52cb6="" scope="col" colspan="3" class="py-4">
              "D" Terms
              Destination/Arrival
            </th>
          </tr>
          <tr data-v-67e52cb6="">
            <td data-v-67e52cb6="">Sales Terms</td>
            <td data-v-67e52cb6=""><h6 data-v-67e52cb6="">EXW</h6><small data-v-67e52cb6="">EX work (place)</small></td>
            <td data-v-67e52cb6=""><h6 data-v-67e52cb6="">FCA</h6><small data-v-67e52cb6="">Free Career</small></td>
            <td data-v-67e52cb6=""><h6 data-v-67e52cb6="">FAS</h6><small data-v-67e52cb6="">Free Alongside Ship</small>
            </td>
            <td data-v-67e52cb6=""><h6 data-v-67e52cb6="">FOB</h6><small data-v-67e52cb6="">Free on Board</small></td>
            <td data-v-67e52cb6=""><h6 data-v-67e52cb6="">CFR</h6><small data-v-67e52cb6="">Cost and Freight</small>
            </td>
            <td data-v-67e52cb6=""><h6 data-v-67e52cb6="">CIF</h6><small data-v-67e52cb6="">Cost Freight and Insurance
              (port)</small></td>
            <td data-v-67e52cb6=""><h6 data-v-67e52cb6="">CPT</h6><small data-v-67e52cb6="">Charge Paid to
              (place)</small></td>
            <td data-v-67e52cb6=""><h6 data-v-67e52cb6="">CIP</h6><small data-v-67e52cb6="">Charge &amp; Insurance Paid
              to (place)</small></td>
            <td data-v-67e52cb6=""><h6 data-v-67e52cb6="">DAP</h6><small data-v-67e52cb6="">Delivered at Place</small>
            </td>
            <td data-v-67e52cb6=""><h6 data-v-67e52cb6="">DPU</h6><small data-v-67e52cb6="">Delivered at Place
              Unloaded</small></td>
            <td data-v-67e52cb6=""><h6 data-v-67e52cb6="">DDP</h6><small data-v-67e52cb6="">Delivery Duty
              (Paid/Place)</small></td>
          </tr>
          </thead>
          <tbody data-v-67e52cb6="">
          <tr data-v-67e52cb6="">
            <td data-v-67e52cb6="" class="px-5">Services</td>
            <td data-v-67e52cb6="" colspan="11" class="gf-red">Responsibility &amp; Charges</td>
          </tr>
          <tr data-v-67e52cb6="">
            <td data-v-67e52cb6="" class="pl-5"><p data-v-67e52cb6="" class="text-left">Warehouse services</p></td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
          </tr>
          <tr data-v-67e52cb6="">
            <td data-v-67e52cb6="" class="pl-5"><p data-v-67e52cb6="" class="text-left">Export Packing</p></td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
          </tr>
          <tr data-v-67e52cb6="">
            <td data-v-67e52cb6="" class="pl-5"><p data-v-67e52cb6="" class="text-left">Origin Loading</p></td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
          </tr>
          <tr data-v-67e52cb6="">
            <td data-v-67e52cb6="" class="pl-5"><p data-v-67e52cb6="" class="text-left">Inland Freight</p></td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
          </tr>
          <tr data-v-67e52cb6="">
            <td data-v-67e52cb6="" class="pl-5"><p data-v-67e52cb6="" class="text-left">Port Rec Charges</p></td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
          </tr>
          <tr data-v-67e52cb6="">
            <td data-v-67e52cb6="" class="pl-5"><p data-v-67e52cb6="" class="text-left">Forwarder Charges</p></td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
          </tr>
          <tr data-v-67e52cb6="">
            <td data-v-67e52cb6="" class="pl-5"><p data-v-67e52cb6="" class="text-left">Ocean/Air Freight</p></td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
          </tr>
          <tr data-v-67e52cb6="">
            <td data-v-67e52cb6="" class="pl-5"><p data-v-67e52cb6="" class="text-left">Dest Port Charges</p></td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
          </tr>
          <tr data-v-67e52cb6="">
            <td data-v-67e52cb6="" class="pl-5"><p data-v-67e52cb6="" class="text-left">Customs Clearance</p></td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
          </tr>
          <tr data-v-67e52cb6="">
            <td data-v-67e52cb6="" class="pl-5"><p data-v-67e52cb6="" class="text-left">Customs Duties</p></td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
          </tr>
          <tr data-v-67e52cb6="">
            <td data-v-67e52cb6="" class="pl-5"><p data-v-67e52cb6="" class="text-left">Dest Delivery Charges</p></td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
          </tr>
          <tr data-v-67e52cb6="">
            <td data-v-67e52cb6="" class="pl-5"><p data-v-67e52cb6="" class="text-left">Insurance</p></td>
            <td data-v-67e52cb6="" class="gf-null"></td>
            <td data-v-67e52cb6="" class="gf-null"></td>
            <td data-v-67e52cb6="" class="gf-null"></td>
            <td data-v-67e52cb6="" class="gf-null"></td>
            <td data-v-67e52cb6="" class="gf-null"></td>
            <td data-v-67e52cb6="" class="gf-Seller &quot;Free of Particular Average&quot;">Seller "Free of Particular
              Average"
            </td>
            <td data-v-67e52cb6="" class="gf-null"></td>
            <td data-v-67e52cb6="" class="gf-Seller &quot;All Risks&quot;">Seller "All Risks"</td>
            <td data-v-67e52cb6="" class="gf-null"></td>
            <td data-v-67e52cb6="" class="gf-null"></td>
            <td data-v-67e52cb6="" class="gf-null"></td>
          </tr>
          <tr data-v-67e52cb6="">
            <td data-v-67e52cb6=""></td>
            <td data-v-67e52cb6="" colspan="11" class="gf-red">Risk/Responsibility Transfers</td>
          </tr>
          <tr data-v-67e52cb6="" class="new-bg">
            <td data-v-67e52cb6="">Risk Transfers</td>
            <td data-v-67e52cb6="">At Warehouse named place</td>
            <td data-v-67e52cb6="">At truck at named place</td>
            <td data-v-67e52cb6="">At named port alongside ship</td>
            <td data-v-67e52cb6="">At named board on ship</td>
            <td data-v-67e52cb6="">On board vessel at port of shipment</td>
            <td data-v-67e52cb6="">On board vessel at port of shipment</td>
            <td data-v-67e52cb6="">On board vessel at port of shipment</td>
            <td data-v-67e52cb6="">On board vessel at port of shipment</td>
            <td data-v-67e52cb6="">On Delivery Carrier at named place</td>
            <td data-v-67e52cb6="">Unloaded at the port or Cargo terminal named place</td>
            <td data-v-67e52cb6="">On Delivery Carrier at named place Duty and Tax paid</td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

1 Ответ

0 голосов
/ 02 марта 2020

Я добавил два класса в табличный тег и добавил следующий CSS, рабочий пример

table {
    border-collapse: collapse;
}
.table {
    width: 100%;
    margin-bottom: 1rem;
    color: #212529;
}
.table-bordered {
    border: 1px solid #dee2e6;
}
.table td, .table th {
    padding: .7rem;
    vertical-align: middle;
    border: 1px solid #dee2e6;
    text-align:center;
}
.table td h6, .table th h6{
    margin:0;
}
<div data-v-67e52cb6="" class="container-fluid">
  <div data-v-67e52cb6="" class="row">
    <div data-v-67e52cb6="" class="col-12">
      <div data-v-67e52cb6="" class="gf-main-table table-md-responsive">
        <table data-v-67e52cb6="" bordercolor="#001A57" class="table table-bordered">
          <thead data-v-67e52cb6="">
          <tr data-v-67e52cb6="">
            <th data-v-67e52cb6="" scope="col" class="px-4"></th>
            <th data-v-67e52cb6="" scope="col" colspan="1" class="py-4">
              "E" Term
              Origin
            </th>
            <th data-v-67e52cb6="" scope="col" colspan="3" class="py-4">
              "F" Terms
              Freight charges not paid
            </th>
            <th data-v-67e52cb6="" scope="col" colspan="4" class="py-4">
              "C" Terms
              Freight charges paid
            </th>
            <th data-v-67e52cb6="" scope="col" colspan="3" class="py-4">
              "D" Terms
              Destination/Arrival
            </th>
          </tr>
          <tr data-v-67e52cb6="">
            <td data-v-67e52cb6="">Sales Terms</td>
            <td data-v-67e52cb6=""><h6 data-v-67e52cb6="">EXW</h6><small data-v-67e52cb6="">EX work (place)</small></td>
            <td data-v-67e52cb6=""><h6 data-v-67e52cb6="">FCA</h6><small data-v-67e52cb6="">Free Career</small></td>
            <td data-v-67e52cb6=""><h6 data-v-67e52cb6="">FAS</h6><small data-v-67e52cb6="">Free Alongside Ship</small>
            </td>
            <td data-v-67e52cb6=""><h6 data-v-67e52cb6="">FOB</h6><small data-v-67e52cb6="">Free on Board</small></td>
            <td data-v-67e52cb6=""><h6 data-v-67e52cb6="">CFR</h6><small data-v-67e52cb6="">Cost and Freight</small>
            </td>
            <td data-v-67e52cb6=""><h6 data-v-67e52cb6="">CIF</h6><small data-v-67e52cb6="">Cost Freight and Insurance
              (port)</small></td>
            <td data-v-67e52cb6=""><h6 data-v-67e52cb6="">CPT</h6><small data-v-67e52cb6="">Charge Paid to
              (place)</small></td>
            <td data-v-67e52cb6=""><h6 data-v-67e52cb6="">CIP</h6><small data-v-67e52cb6="">Charge &amp; Insurance Paid
              to (place)</small></td>
            <td data-v-67e52cb6=""><h6 data-v-67e52cb6="">DAP</h6><small data-v-67e52cb6="">Delivered at Place</small>
            </td>
            <td data-v-67e52cb6=""><h6 data-v-67e52cb6="">DPU</h6><small data-v-67e52cb6="">Delivered at Place
              Unloaded</small></td>
            <td data-v-67e52cb6=""><h6 data-v-67e52cb6="">DDP</h6><small data-v-67e52cb6="">Delivery Duty
              (Paid/Place)</small></td>
          </tr>
          </thead>
          <tbody data-v-67e52cb6="">
          <tr data-v-67e52cb6="">
            <td data-v-67e52cb6="" class="px-5">Services</td>
            <td data-v-67e52cb6="" colspan="11" class="gf-red">Responsibility &amp; Charges</td>
          </tr>
          <tr data-v-67e52cb6="">
            <td data-v-67e52cb6="" class="pl-5"><p data-v-67e52cb6="" class="text-left">Warehouse services</p></td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
          </tr>
          <tr data-v-67e52cb6="">
            <td data-v-67e52cb6="" class="pl-5"><p data-v-67e52cb6="" class="text-left">Export Packing</p></td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
          </tr>
          <tr data-v-67e52cb6="">
            <td data-v-67e52cb6="" class="pl-5"><p data-v-67e52cb6="" class="text-left">Origin Loading</p></td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
          </tr>
          <tr data-v-67e52cb6="">
            <td data-v-67e52cb6="" class="pl-5"><p data-v-67e52cb6="" class="text-left">Inland Freight</p></td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
          </tr>
          <tr data-v-67e52cb6="">
            <td data-v-67e52cb6="" class="pl-5"><p data-v-67e52cb6="" class="text-left">Port Rec Charges</p></td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
          </tr>
          <tr data-v-67e52cb6="">
            <td data-v-67e52cb6="" class="pl-5"><p data-v-67e52cb6="" class="text-left">Forwarder Charges</p></td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
          </tr>
          <tr data-v-67e52cb6="">
            <td data-v-67e52cb6="" class="pl-5"><p data-v-67e52cb6="" class="text-left">Ocean/Air Freight</p></td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
          </tr>
          <tr data-v-67e52cb6="">
            <td data-v-67e52cb6="" class="pl-5"><p data-v-67e52cb6="" class="text-left">Dest Port Charges</p></td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
          </tr>
          <tr data-v-67e52cb6="">
            <td data-v-67e52cb6="" class="pl-5"><p data-v-67e52cb6="" class="text-left">Customs Clearance</p></td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
          </tr>
          <tr data-v-67e52cb6="">
            <td data-v-67e52cb6="" class="pl-5"><p data-v-67e52cb6="" class="text-left">Customs Duties</p></td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
          </tr>
          <tr data-v-67e52cb6="">
            <td data-v-67e52cb6="" class="pl-5"><p data-v-67e52cb6="" class="text-left">Dest Delivery Charges</p></td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-buyer">buyer</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
            <td data-v-67e52cb6="" class="gf-seller">seller</td>
          </tr>
          <tr data-v-67e52cb6="">
            <td data-v-67e52cb6="" class="pl-5"><p data-v-67e52cb6="" class="text-left">Insurance</p></td>
            <td data-v-67e52cb6="" class="gf-null"></td>
            <td data-v-67e52cb6="" class="gf-null"></td>
            <td data-v-67e52cb6="" class="gf-null"></td>
            <td data-v-67e52cb6="" class="gf-null"></td>
            <td data-v-67e52cb6="" class="gf-null"></td>
            <td data-v-67e52cb6="" class="gf-Seller &quot;Free of Particular Average&quot;">Seller "Free of Particular
              Average"
            </td>
            <td data-v-67e52cb6="" class="gf-null"></td>
            <td data-v-67e52cb6="" class="gf-Seller &quot;All Risks&quot;">Seller "All Risks"</td>
            <td data-v-67e52cb6="" class="gf-null"></td>
            <td data-v-67e52cb6="" class="gf-null"></td>
            <td data-v-67e52cb6="" class="gf-null"></td>
          </tr>
          <tr data-v-67e52cb6="">
            <td data-v-67e52cb6=""></td>
            <td data-v-67e52cb6="" colspan="11" class="gf-red">Risk/Responsibility Transfers</td>
          </tr>
          <tr data-v-67e52cb6="" class="new-bg">
            <td data-v-67e52cb6="">Risk Transfers</td>
            <td data-v-67e52cb6="">At Warehouse named place</td>
            <td data-v-67e52cb6="">At truck at named place</td>
            <td data-v-67e52cb6="">At named port alongside ship</td>
            <td data-v-67e52cb6="">At named board on ship</td>
            <td data-v-67e52cb6="">On board vessel at port of shipment</td>
            <td data-v-67e52cb6="">On board vessel at port of shipment</td>
            <td data-v-67e52cb6="">On board vessel at port of shipment</td>
            <td data-v-67e52cb6="">On board vessel at port of shipment</td>
            <td data-v-67e52cb6="">On Delivery Carrier at named place</td>
            <td data-v-67e52cb6="">Unloaded at the port or Cargo terminal named place</td>
            <td data-v-67e52cb6="">On Delivery Carrier at named place Duty and Tax paid</td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
...