使用 css + html 复制 Excel 自定义 table

Question

我想使用 CSS + HTML

复制 table

所以一切顺利，直到最后一部分。

Table:

所以我尝试：

#page {
  background: #ffffff;
  width: 878px;
  margin: 0 auto;
  margin-top: 40px;
  display: block;
  border: 1px solid #c4c7c7;
  padding: 40px 40px 50px 40px;
  position: relative;
  z-index: 0;
}

.ship-table {
  border-collapse: collapse;
}

.ship-table--title {
  border-bottom: 3px solid;
  border-top: 3px solid;
  text-align: center;
  background-color: #d3d3d3;
}

.ship-table--text_center {
  text-align: center;
}

.ship-table--divider {
  border-right: 3px solid;
  border-left: 3px solid;
}

.ship-table--bottom {
  border-bottom: 3px solid;
  border-right: 3px solid;
}

.ship-table--image {
  border-top: 3px solid;
  border-right: 3px solid;
}

.ship-table--carrier {
  background-color: #339933;
  text-align: center;
}

.ship-table--due-box {
  border: 3px solid;
}

.ship-table--dueDate {
  background-color: #FFFF00;
}

.ship-table--dueDate_value {
  font-size: 48px;
}

.ship-table--dueDate_field {
  border: 3px solid;
  border-color: red;
  padding-bottom: 25px;
}

.ship-table--bol_value {
  font-size: 28px;
}

<table class="ship-table">
  <tbody>
    <tr>
      <td class="ship-table--title ship-table--divider">SHIP FROM</td>
      <td class="ship-table--image" rowspan="2">pic here</td>
    </tr>
    <tr>
      <td class="ship-table--divider">
        {{ShipFromCompany}}
        <br /> {{ShipFromAddressLineOne}}
        <br /> {{ShipFromAddressLineTwo}}, {{ShipFromPostalCode}}
        <br /> {{ShipFromAttn}}
        <br /> {{ShipFromPhone}}
      </td>
    </tr>
    <tr>
      <td class="ship-table--title ship-table--divider">SHIP TO</td>
      <td class="ship-table--title ship-table--divider">Carrier Name:</td>
    </tr>
    <tr>
      <td class="ship-table--divider">
        {{ShipToCompany}}
        <br /> {{ShipToAddressLineOne}}
        <br /> {{ShipToAddressLineTwo}}, {{ShipToPostalCode}}
        <br /> {{ShipToAttn}}
        <br /> {{ShipToPhone}}

      </td>
      <td class="ship-table--due-box">
        <div class="ship-table--carrier ship-table--due-box ship-table--text_center">
          {{ShipToCarrier}}
        </div>
        <div class="ship-table--dueDate ship-table--due-box ship-table--text_center">
          DUE DATE:
        </div>
        <div class="ship-table--dueDate_value ship-table--dueDate_field ship-table--text_center">
          {{ShipToDueDate}}
        </div>
      </td>

    </tr>
    <tr>
      <td class="ship-table--title ship-table--divider">SHIPPER</td>
      <td>
        <div class="ship-table--title ship-table--divider">
          BILL OF LADING NUMBER
        </div>
        <div class="ship-table--bol_value ship-table--text_center ship-table--divider">
          {{BillOfLadingNumber}}
        </div>
      </td>

    </tr>
    <tr class="ship-table--bottom">
      <td class="ship-table--divider">
        {{ShipperCompany}}
        <br /> {{ShipperAttn}}
        <br /> {{ShipperAddressLineOne}}
        <br /> {{ShipperAddressLineTwo}}
      </td>
      <td></td>
    </tr>
  </tbody>
</table>

如何将嵌套边框更改为原始列的一部分，日期大于底部的提单编号？

对于嵌套边框，我使用 border-colapse: colapse 但它不起作用。

Answer 1

没有巧妙的方法可以做到这一点。您必须依靠 css 技巧来修复边界。我也无法修复右下角的单元格

这是对嵌套边框问题的临时修复（最后一行中的最后一列除外）

更改已用评论突出显示（另请注意，我不推荐这种方法，我只是让您了解嵌套边框问题和重叠它们的技巧）

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
#page {
  background: #ffffff;
  width: 878px;
  margin: 0 auto;
  margin-top: 40px;
  display: block;
  border: 1px solid #c4c7c7;
  padding: 40px 40px 50px 40px;
  position: relative;
  z-index: 0;
}

.ship-table {
  border-collapse: collapse;
}

.ship-table--title {
  border-bottom: 3px solid;
  border-top: 3px solid;
  text-align: center;
  background-color: #d3d3d3;
}

.ship-table--text_center {
  text-align: center;
}

.ship-table--divider {
  border-right: 3px solid;
  border-left: 3px solid;
}

.ship-table--bottom {
  border-bottom: 3px solid;
  border-right: 3px solid;
}

.ship-table--image {
  border-top: 3px solid;
  border-right: 3px solid;
}

.ship-table--carriership-table--carrier {
  background-color: #339933;
  text-align: center;
}


.ship-table--due-box {
  border-right: 3px solid; /*changes */
}

.ship-table--carrier {
   border-right:none;  /* changes*/
}

.ship-table--dueDate {
  background-color: #FFFF00;
  border-right: none;  /*changes*/
}

.ship-table--dueDate_value {
  font-size: 48px;
  /*changes*/
  position: relative;    
  margin-left: -4px;     
  margin-right: -4px;
  margin-bottom: -2px;
}

.ship-table--dueDate_field {
  border: 3px solid;
  border-color: red;
  padding-bottom: 25px;
}

.ship-table--bol_value {
  font-size: 28px;  /*changes*/
  border-left: none;
  position: relative;
  
  margin-right: -2px;
  
 
}

.table-border-fix {    /* new class to fix the borders in bottom column*/
   border: 3px solid;
   position: relative;    
   margin-left: -4px;
   margin-right: -2px;
   border-top: none;
}



</style>
</head>
<body>

<table class="ship-table">
  <tbody>
    <tr>
      <td class="ship-table--title ship-table--divider">SHIP FROM</td>
      <td class="ship-table--image" rowspan="2">pic here</td>
    </tr>
    <tr>
      <td class="ship-table--divider">
        {{ShipFromCompany}}
        <br /> {{ShipFromAddressLineOne}}
        <br /> {{ShipFromAddressLineTwo}}, {{ShipFromPostalCode}}
        <br /> {{ShipFromAttn}}
        <br /> {{ShipFromPhone}}
      </td>
    </tr>
    <tr>
      <td class="ship-table--title ship-table--divider">SHIP TO</td>
      <td class="ship-table--title ship-table--divider">Carrier Name:</td>
    </tr>
    <tr>
      <td class="ship-table--divider">
        {{ShipToCompany}}
        <br /> {{ShipToAddressLineOne}}
        <br /> {{ShipToAddressLineTwo}}, {{ShipToPostalCode}}
        <br /> {{ShipToAttn}}
        <br /> {{ShipToPhone}}

      </td>
      <td class="ship-table--due-box">
        <div class="ship-table--carrier ship-table--due-box ship-table--text_center">
          {{ShipToCarrier}}
        </div>
        <div class="ship-table--dueDate ship-table--due-box ship-table--text_center">
          DUE DATE:
        </div>
        <div class="ship-table--dueDate_value ship-table--dueDate_field ship-table--text_center">
          {{ShipToDueDate}}
        </div>
      </td>

    </tr>
    <tr>
      <td class="ship-table--title ship-table--divider">SHIPPER</td>
      <td>
      <!-- introduced new  class table-border-fix to below 2 divs-->
        <div class="ship-table--title ship-table--divider table-border-fix"> 
          BILL OF LADING NUMBER
        </div>
        <div class="ship-table--bol_value ship-table--text_center ship-table--divider"> 
          {{BillOfLadingNumber}}
        </div>
      </td>

    </tr>
    <tr class="ship-table--bottom">
      <td class="ship-table--divider">
        {{ShipperCompany}}
        <br /> {{ShipperAttn}}
        <br /> {{ShipperAddressLineOne}}
        <br /> {{ShipperAddressLineTwo}}
      </td>

</body>
</html>

参考文献：Nested divs: how can I get overlapping borders?

Answer 2

这是一个简单的解决方案。可以关注一下。

#page {
  background: #ffffff;
  width: 878px;
  margin: 0 auto;
  margin-top: 40px;
  display: block;
  border: 1px solid #c4c7c7;
  padding: 40px 40px 50px 40px;
  position: relative;
  z-index: 0;
}


.ship-table {
  border-collapse: collapse;
  width: 100%;
}

.ship-table tr, .ship-table td{
  border: 1px solid #000;
}

.ship-table-table{
  width: 100%;
}
.ship-table-table tr, .ship-table-table td{
  border:0;
}

.ship-table--title {
  border-bottom: 1px solid;
  text-align: center;
  background-color: #d3d3d3;
}

.ship-table--title-green{
  border-top: 1px solid;
  border-bottom: 1px solid;
  text-align: center;
  background-color: #339933;
}
.ship-table--title-yellow{
  border-bottom: 1px solid;
  text-align: center;
  background-color: #FFFF00;
}

.ship-table--title-red{
  border: 1px solid red !important;
  text-align: center;
  padding: 30px 0;
}

.ship-table--dueDate_value {
  font-size: 48px;
  text-align: center;
}

.ship-table--bol_value {
  font-size: 28px;
  text-align: center;
}

<div id="page">

  <table class="ship-table" cellpadding="0" cellspacing="0">
    <tr>
      <td valign="top">
        <table class="ship-table-table" cellpadding="0" cellspacing="0">
          <tr>
            <th class="ship-table--title">
              SHIP FROM 
            </th>
          </tr>
          <tr>
            <td>
              {{ShipFromCompany}}
              <br /> {{ShipFromAddressLineOne}}
              <br /> {{ShipFromAddressLineTwo}}, {{ShipFromPostalCode}}
              <br /> {{ShipFromAttn}}
              <br /> {{ShipFromPhone}}
            </td>
          </tr>
        </table>
      </td>
       <td>
        pic here
      </td>
    </tr>

    <tr>
      <td valign="top">
        <table class="ship-table-table" cellpadding="0" cellspacing="0">
          <tr>
            <th class="ship-table--title">
              SHIP TO 
            </th>
          </tr>
          <tr>
            <td>
              {{ShipToCompany}}
        <br /> {{ShipToAddressLineOne}}
        <br /> {{ShipToAddressLineTwo}}, {{ShipToPostalCode}}
        <br /> {{ShipToAttn}}
        <br /> {{ShipToPhone}}
            </td>
          </tr>
        </table>
      </td>
       <td valign="top" rowspan="2">
         <table class="ship-table-table" cellpadding="0" cellspacing="0">
          <tr>
            <th class="ship-table--title">
              Carrier Name:
            </th>
          </tr>
          <tr>
            <td>
             CASC
            </td>
          </tr>
        </table>

        <table class="ship-table-table" cellpadding="0" cellspacing="0">
          <tr>
            <th class="ship-table--title-green">
              {{ShipToCarrier}}
            </th>
          </tr>
          <tr>
            <th class="ship-table--title-yellow">
              DUE DATE:
            </th>
          </tr>
          <tr>
            <td class="ship-table--title-red ship-table--dueDate_value">
             {{ShipToDueDate}}
            </td>
          </tr>
        </table>

        <table class="ship-table-table" cellpadding="0" cellspacing="0">
          <tr>
            <th class="ship-table--title">
              BILL OF LADING NUMBER
            </th>
          </tr>
          <tr>
            <td class="ship-table--bol_value">
             {{BillOfLadingNumber}}
            </td>
          </tr>
        </table>

      </td>
    </tr>

    <tr>
      <td valign="top">
        <table class="ship-table-table" cellpadding="0" cellspacing="0">
          <tr>
            <th class="ship-table--title">
              SHIPPER
            </th>
          </tr>
          <tr>
            <td>
             {{ShipperCompany}}
        <br /> {{ShipperAttn}}
        <br /> {{ShipperAddressLineOne}}
        <br /> {{ShipperAddressLineTwo}}
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</div>

使用 css + html 复制 Excel 自定义 table

Replicate Excel custom table using css + html

html

css