微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

响应表-静态标题列到行

分类：编程问答

如何解决响应表-静态标题列到行

我正在尝试创建一个与此示例相似的表（我猜来源是this article，这是codepen）：

在下面的示例中，标题栏在响应模式下保持固定：

enter image description here

<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
  <Meta charset="utf-8">
  <Meta http-equiv="x-ua-compatible" content="ie=edge">
  <Meta name="viewport" content="width=device-width,initial-scale=1">
  <Meta name="x-apple-disable-message-reformatting">
  <title>{subject}</title>
  <!--[if mso]>
    <xml>
        <o:OfficeDocumentSettings>
            <o:AllowPNG/>
            <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
    </xml>
    <style>
        table {
            border-collapse: collapse;
        }

        .spacer,.divider {
            mso-line-height-rule: exactly;
        }

        td,th,div,p,a {
            font-size: 13px;
            line-height: 22px;
        }

        td,a,h1,h2,h3,h4,h5,h6 {
            font-family: "Segoe UI",Helvetica,Arial,sans-serif;
        }
    </style>
    <![endif]-->
  <style type="text/css">
    @import url('https://fonts.googleapis.com/css?family=Lato:300,400,700|Open+Sans');
    @media only screen {
      .col,td,p {
        font-family: "Open Sans",-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",sans-serif;
      }
      .webfont {
        font-family: "Lato",sans-serif;
      }
    }
    
    a {
      text-decoration: none;
    }
    
    .underline {
      text-decoration: underline;
    }
    
    #outlook a,.links-inherit-color a {
      padding: 0;
      color: inherit;
    }
    
    img {
      border: 0;
      line-height: 100%;
      max-width: 100%;
      vertical-align: middle;
    }
    
    .col {
      font-size: 13px;
      line-height: 22px;
      vertical-align: top;
    }
    
    .hover-scale:hover {
      transform: scale(1.2);
    }
    
    .video {
      display: block;
      height: auto;
      object-fit: cover;
    }
    
    .star:hover a,.star:hover~.star a {
      color: #FFCF0F !important;
    }
    /* Table */
    
    #overall-table {
      width: 100%;
      min-width: 100%;
    }
    
    #overall-table td {
      border-right: 1px solid #00a9e0/*Lines*/
      ;
      border-bottom: 1px solid #00a9e0;
      text-align: center;
    }
    
    #overall-table td.last {
      border-right: 0;
    }
    
    #overall-table th {
      text-align: center;
      border-bottom: 1px solid #00a9e0;
    }
    /* Table */
    
    @media only screen and (max-width: 800px) {
      .video {
        width: 100%;
      }
      u~div .wrapper {
        min-width: 100vw;
      }
      .container {
        width: 100% !important;
        -webkit-text-size-adjust: 100%;
      }
    }
    
    @media only screen and (max-width: 480px) {
      .col {
        Box-sizing: border-Box;
        display: inline-block !important;
        line-height: 20px;
        width: 100% !important;
      }
      .col-sm-1 {
        max-width: 25%;
      }
      .col-sm-2 {
        max-width: 50%;
      }
      .col-sm-3 {
        max-width: 75%;
      }
      .col-sm-third {
        max-width: 33.33333%;
      }
      .col-sm-auto {
        width: auto !important;
      }
      .col-sm-push-1 {
        margin-left: 25%;
      }
      .col-sm-push-2 {
        margin-left: 50%;
      }
      .col-sm-push-3 {
        margin-left: 75%;
      }
      .col-sm-push-third {
        margin-left: 33.33333%;
      }
      .full-width-sm {
        display: table !important;
        width: 100% !important;
      }
      .stack-sm-first {
        display: table-header-group !important;
      }
      .stack-sm-last {
        display: table-footer-group !important;
      }
      .stack-sm-top {
        display: table-caption !important;
        max-width: 100%;
        padding-left: 0 !important;
      }
      .toggle-content {
        max-height: 0;
        overflow: auto;
        transition: max-height .4s linear;
        -webkit-transition: max-height .4s linear;
      }
      .toggle-trigger:hover+.toggle-content,.toggle-content:hover {
        max-height: 999px !important;
      }
      .show-sm {
        display: inherit !important;
        font-size: inherit !important;
        line-height: inherit !important;
        max-height: none !important;
      }
      .hide-sm {
        display: none !important;
      }
      .align-sm-center {
        display: table !important;
        float: none;
        margin-left: auto !important;
        margin-right: auto !important;
      }
      .align-sm-left {
        float: left;
      }
      .align-sm-right {
        float: right;
      }
      .text-sm-center {
        text-align: center !important;
      }
      .text-sm-left {
        text-align: left !important;
      }
      .text-sm-right {
        text-align: right !important;
      }
      .nav-sm-vertical .nav-item {
        display: block !important;
      }
      .nav-sm-vertical .nav-item a {
        display: inline-block;
        padding: 5px 0 !important;
      }
      .h1 {
        font-size: 32px !important;
      }
      .h2 {
        font-size: 24px !important;
      }
      .h3 {
        font-size: 16px !important;
      }
      .borderless-sm {
        border: none !important;
      }
      .height-sm-auto {
        height: auto !important;
      }
      .line-height-sm-0 {
        line-height: 0 !important;
      }
      .overlay-sm-bg {
        background: #232323;
        background: rgba(0,0.4);
      }
      u~div .wrapper .toggle-trigger {
        display: none !important;
      }
      u~div .wrapper .toggle-content {
        max-height: none;
      }
      u~div .wrapper .nav-item {
        display: inline-block !important;
        padding: 0 10px !important;
      }
      u~div .wrapper .nav-sm-vertical .nav-item {
        display: block !important;
      }
      .p-sm-0 {
        padding: 0 !important;
      }
      .p-sm-8 {
        padding: 8px !important;
      }
      .p-sm-16 {
        padding: 16px !important;
      }
      .p-sm-24 {
        padding: 24px !important;
      }
      .pt-sm-0 {
        padding-top: 0 !important;
      }
      .pt-sm-8 {
        padding-top: 8px !important;
      }
      .pt-sm-16 {
        padding-top: 16px !important;
      }
      .pt-sm-24 {
        padding-top: 24px !important;
      }
      .pr-sm-0 {
        padding-right: 0 !important;
      }
      .pr-sm-8 {
        padding-right: 8px !important;
      }
      .pr-sm-16 {
        padding-right: 16px !important;
      }
      .pr-sm-24 {
        padding-right: 24px !important;
      }
      .pb-sm-0 {
        padding-bottom: 0 !important;
      }
      .pb-sm-8 {
        padding-bottom: 8px !important;
      }
      .pb-sm-16 {
        padding-bottom: 16px !important;
      }
      .pb-sm-24 {
        padding-bottom: 24px !important;
      }
      .pl-sm-0 {
        padding-left: 0 !important;
      }
      .pl-sm-8 {
        padding-left: 8px !important;
      }
      .pl-sm-16 {
        padding-left: 16px !important;
      }
      .pl-sm-24 {
        padding-left: 24px !important;
      }
      .px-sm-0 {
        padding-right: 0 !important;
        padding-left: 0 !important;
      }
      .px-sm-8 {
        padding-right: 8px !important;
        padding-left: 8px !important;
      }
      .px-sm-16 {
        padding-right: 16px !important;
        padding-left: 16px !important;
      }
      .px-sm-24 {
        padding-right: 24px !important;
        padding-left: 24px !important;
      }
      .py-sm-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
      }
      .py-sm-8 {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
      }
      .py-sm-16 {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
      }
      .py-sm-24 {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
      }
      /**
            Responsive table - taken from https://codepen.io/smashing-magazine/pen/PVGZEQ?editors=1100
             */
      @media screen and (max-width: 1140px) {
        .insider_company_table {
          display: flex;
        }
        #ic_body_id {
          display: flex;
          position: relative;
          overflow-x: auto;
          overflow-y: hidden;
          max-width: 100%;
          background: linear-gradient(to right,white 30%,rgba(255,255,0)),linear-gradient(to right,0),white 70%) 0 100%,radial-gradient( farthest-side at 0% 50%,rgba(0,0.4),radial-gradient( farthest-side at 100% 50%,0.2),0)) 0 100%;
          background-repeat: no-repeat;
          background-color: white;
          background-size: 40px 100%,40px 100%,14px 100%,14px 100%;
          background-position: 0 0,100%,0 0,100%;
          background-attachment: local,local,scroll,scroll;
        }
        #ic_head_id>tr>th,#ic_body_id>tr>td {
          display: block;
        }
        .numeric {
          text-align: right;
        }
        .text {
          text-align: center;
        }
      }
      /*
            .table-wrapper {
                overflow: auto;
                max-width: 100%;
                background: linear-gradient(to right,radial-gradient(farthest-side at 0% 50%,.2),radial-gradient(farthest-side at 100% 50%,0)) 0 100%;
                background-repeat: no-repeat;
                background-color: white;
                background-size: 40px 100%,14px 100%;
                background-position: 0 0,100%;
                background-attachment: local,scroll;
            }
          */
    }
  </style>
</head>

<body style="Box-sizing:border-Box;margin:0;padding:0;width:100%;word-break:break-word;-webkit-font-smoothing:antialiased;">
  <div style="display:none;font-size:0;line-height:0;">{preheader}</div>

  <modules>







    <module label="Text Grid 1 Column" auto="">
      <table class="wrapper" cellpadding="0" cellspacing="0" role="presentation" width="100%">
        <tbody>
          <tr>
            <td class="px-sm-16" align="center" bgcolor="#EEEEEE">
              <table class="container" cellpadding="0" cellspacing="0" role="presentation" width="800">
                <tbody>
                  <tr>
                    <td class="px-sm-8" align="left" bgcolor="#FFFFFF" style="padding: 0 24px;">
                      <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
                        <tbody>
                          <tr>
                            <td class="col" width="100%" style="padding: 0 8px;">
                              <multi label="Text">
                                <h1>Transactions</h1>
                              </multi>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </tbody>
      </table>
    </module>

    <module label="Table" auto="">
      <table class="wrapper" cellpadding="0" cellspacing="0" role="presentation" width="100%">
        <tbody>
          <tr>
            <td class="px-sm-16" align="center" bgcolor="#EEEEEE">
              <table class="container" cellpadding="0" cellspacing="0" role="presentation" width="800">
                <tbody>
                  <tr>
                    <td class="px-sm-8" align="left" bgcolor="#FFFFFF" style="padding: 0 24px;">
                      <div class="spacer line-height-sm-0 py-sm-8" style="line-height: 24px;">&zwnj;</div>
                      <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
                        <tbody>
                          <tr>
                            <td class="col" width="100%" align="center">

                              <div class="table-wrapper" tabindex="0">
                                <table class="insider_company_table" style="border-collapse:collapse" width="100%" id="overall-table" cellpadding="0" cellspacing="0" role="presentation">
                                  <thead id="ic_head_id">
                                    <tr>
                                      <th class="text" style="padding:2px;width:110px" align="left">Product</th>
                                      <th class="text" style="padding:2px" align="center">Name</th>
                                      <th class="text" style="padding:2px" align="center">Buy/Sell</th>
                                      <th class="text" style="padding:2px" align="left">Price</th>
                                      <th class="text" style="padding:2px;width:110px" align="left">Total Transaction</th>
                                      <th class="text" style="padding:2px" align="left">Transaction Date</th>
                                    </tr>
                                  </thead>
                                  <tbody id="ic_body_id" class="insider_company_body">
                                    <tr style="border-bottom: 1px solid #ccc;" valign="middle" repeatable="" label="Row">
                                      <td class="text" style="padding:2px" align="left">Company 1</td>
                                      <td class="text" style="padding:2px" align="left">Mark<br>Sutterlanderer<br>Dir</td>
                                      <td class="text" style="padding:2px" align="middle">Buy</td>
                                      <td class="text" style="padding:2px; width: 70px;" align="left">4000 packages @<br>52.41</td>
                                      <td class="text" style="padding:2px; width: 70px;" align="left">$191,125</td>
                                      <td class="text" style="padding:2px" align="right">2020-10-23</td>
                                    </tr>
                                    <tr style="border-bottom: 1px solid #ccc;" valign="middle" repeatable="" label="Row">
                                      <td class="text" style="padding:2px" align="left">Company 3<br>(ABC)</td>
                                      <td class="text" style="padding:2px" align="left">Joseph<br>Dir</td>
                                      <td class="text" style="padding:2px" align="middle">Buy</td>
                                      <td class="text" style="padding:2px; width: 70px;" align="left">4000 packages @<br>12.06</td>
                                      <td class="text" style="padding:2px; width: 70px;" align="left">$48,440</td>
                                      <td class="text" style="padding:2px" align="right">2020-10-23</td>
                                    </tr>
                                    <tr style="border-bottom: 1px solid #ccc;" valign="middle" repeatable="" label="Row">
                                      <td class="text" style="padding:2px" align="left">Company 3<br>(ABC)</td>
                                      <td class="text" style="padding:2px" align="left">Joseph<br>Dir</td>
                                      <td class="text" style="padding:2px" align="middle">Buy</td>
                                      <td class="text" style="padding:2px; width: 70px;" align="left">4000 packages @<br>10.47</td>
                                      <td class="text" style="padding:2px; width: 70px;" align="left">$48,440</td>
                                      <td class="text" style="padding:2px" align="right">2020-10-23</td>
                                    </tr>
                                    <tr style="border-bottom: 1px solid #ccc;" valign="middle" repeatable="" label="Row">
                                      <td class="text" style="padding:2px" align="left">Company 3<br>(ABC)</td>
                                      <td class="text" style="padding:2px" align="left">Joseph<br>Dir</td>
                                      <td class="text" style="padding:2px" align="middle">Buy</td>
                                      <td class="text" style="padding:2px; width: 70px;" align="left">4000 packages @<br>9.97</td>
                                      <td class="text" style="padding:2px; width: 70px;" align="left">$48,440</td>
                                      <td class="text" style="padding:2px" align="right">2020-10-23</td>
                                    </tr>
                                  </tbody>
                                </table>
                              </div>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </tbody>
      </table>
    </module>
    <module label="Footer 5">
      <table class="wrapper" cellpadding="0" cellspacing="0" role="presentation" width="100%">
        <tbody>
          <tr>
            <td class="px-sm-16" align="center" bgcolor="#EEEEEE">
              <table class="container" cellpadding="0" cellspacing="0" role="presentation" width="800">
                <tbody>
                  <tr>
                    <td class="px-sm-8" bgcolor="#FFFFFF" style="padding: 0 24px;">
                      <div class="spacer line-height-sm-0 py-sm-8" style="line-height: 24px;">&zwnj;</div>
                      <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
                        <tbody>
                          <tr>
                            <td class="col" align="center" width="100%" style="padding: 0 8px;">
                              <div>

                                <a href="{homepage}"><img editable="" label="Footer logo" src="" alt="Footer logo" width="94" class=""></a>
                              </div>
                              <div class="spacer" style="line-height: 12px;">&zwnj;</div>
                              <table class="textbutton" cellpadding="0" cellspacing="0" role="presentation">
                                <tbody>
                                  <tr>
                                    <td>
                                      <a href="{unsublink}" editable="" style="color: #888888;">Unsubscribe</a>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                              <div class="spacer" style="line-height: 10px;">&zwnj;</div>
                              <div class="spacer line-height-sm-0 py-sm-8" style="line-height: 24px;">
                                &zwnj;
                              </div>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                      <div class="spacer line-height-sm-0 py-sm-8" style="line-height: 24px;">&zwnj;</div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </tbody>
      </table>
    </module>
  </modules>
  <p id="a11y-speak-intro-text" class="a11y-speak-intro-text" style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px,1px,1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
    hidden="hidden">Notifications</p>
  <div id="a11y-speak-assertive" class="a11y-speak-region" style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px,1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
    aria-live="assertive" aria-relevant="additions text" aria-atomic="true"></div>
  <div id="a11y-speak-polite" class="a11y-speak-region" style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px,1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
    aria-live="polite" aria-relevant="additions text" aria-atomic="true"></div>
</body>

</html>

我的模板应该显示在新闻稿中，因此我使用了大量表格。

如您在上方看到的，在响应模式下，标题栏不会保持固定：

enter image description here

我的应用程序有一个限制：我只能用table来更改class='insider_company_table'的css，因为其他部分是新闻稿模板的一部分。

有人建议我做错了什么，为什么行与文本不符？

感谢您的答复！

解决方法

我真的很怀疑您能否获得与共享的屏幕截图接近的主要原因，主要原因是您将表格显示为Flex，并且行会根据内容的长度进行扩展/折叠。对于所有单元格，达到相同高度的唯一方法是在应用HOA fee:时为所有单元格指定特定高度。

话虽如此，您可以使用CSS-grid进行以下操作：

  1. 自动设置内容的高度（如果所有单元格都具有不同长度的内容，它将看起来失真）
@media screen and (max-width: 1140px)

@media screen and (max-width: 1140px) {
  .wrapper {
    display: block;
    overflow: auto;  
  }
  .insider_company_table {
    display: flex;
  }
  .insider_company_table thead,tbody {
    display: grid;
  }
  .insider_company_table thead tr,tbody tr {
    display: grid;
    grid-auto-rows: auto;
  }
  ...
}

  1. 在<!DOCTYPE html> <html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="x-apple-disable-message-reformatting"> <title>{subject}</title> <!--[if mso]> <xml> <o:OfficeDocumentSettings> <o:AllowPNG/> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml> <style> table { border-collapse: collapse; } .spacer,.divider { mso-line-height-rule: exactly; } td,th,div,p,a { font-size: 13px; line-height: 22px; } td,a,h1,h2,h3,h4,h5,h6 { font-family: "Segoe UI",Helvetica,Arial,sans-serif; } </style> <![endif]--> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Lato:300,400,700|Open+Sans'); @media only screen { .col,td,p { font-family: "Open Sans",-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",sans-serif; } .webfont { font-family: "Lato",sans-serif; } } a { text-decoration: none; } .underline { text-decoration: underline; } #outlook a,.links-inherit-color a { padding: 0; color: inherit; } img { border: 0; line-height: 100%; max-width: 100%; vertical-align: middle; } .col { font-size: 13px; line-height: 22px; vertical-align: top; } .hover-scale:hover { transform: scale(1.2); } .video { display: block; height: auto; object-fit: cover; } .star:hover a,.star:hover~.star a { color: #FFCF0F !important; } /* Table */ #overall-table { width: 100%; min-width: 100%; } #overall-table td { border-right: 1px solid #00a9e0/*Lines*/ ; border-bottom: 1px solid #00a9e0; text-align: center; } #overall-table td.last { border-right: 0; } #overall-table th { text-align: center; border-bottom: 1px solid #00a9e0; } /* Table */ @media only screen and (max-width: 800px) { .video { width: 100%; } u~div .wrapper { min-width: 100vw; } .container { width: 100% !important; -webkit-text-size-adjust: 100%; } } @media only screen and (max-width: 480px) { .col { box-sizing: border-box; display: inline-block !important; line-height: 20px; width: 100% !important; } .col-sm-1 { max-width: 25%; } .col-sm-2 { max-width: 50%; } .col-sm-3 { max-width: 75%; } .col-sm-third { max-width: 33.33333%; } .col-sm-auto { width: auto !important; } .col-sm-push-1 { margin-left: 25%; } .col-sm-push-2 { margin-left: 50%; } .col-sm-push-3 { margin-left: 75%; } .col-sm-push-third { margin-left: 33.33333%; } .full-width-sm { display: table !important; width: 100% !important; } .stack-sm-first { display: table-header-group !important; } .stack-sm-last { display: table-footer-group !important; } .stack-sm-top { display: table-caption !important; max-width: 100%; padding-left: 0 !important; } .toggle-content { max-height: 0; overflow: auto; transition: max-height .4s linear; -webkit-transition: max-height .4s linear; } .toggle-trigger:hover+.toggle-content,.toggle-content:hover { max-height: 999px !important; } .show-sm { display: inherit !important; font-size: inherit !important; line-height: inherit !important; max-height: none !important; } .hide-sm { display: none !important; } .align-sm-center { display: table !important; float: none; margin-left: auto !important; margin-right: auto !important; } .align-sm-left { float: left; } .align-sm-right { float: right; } .text-sm-center { text-align: center !important; } .text-sm-left { text-align: left !important; } .text-sm-right { text-align: right !important; } .nav-sm-vertical .nav-item { display: block !important; } .nav-sm-vertical .nav-item a { display: inline-block; padding: 5px 0 !important; } .h1 { font-size: 32px !important; } .h2 { font-size: 24px !important; } .h3 { font-size: 16px !important; } .borderless-sm { border: none !important; } .height-sm-auto { height: auto !important; } .line-height-sm-0 { line-height: 0 !important; } .overlay-sm-bg { background: #232323; background: rgba(0,0.4); } u~div .wrapper .toggle-trigger { display: none !important; } u~div .wrapper .toggle-content { max-height: none; } u~div .wrapper .nav-item { display: inline-block !important; padding: 0 10px !important; } u~div .wrapper .nav-sm-vertical .nav-item { display: block !important; } .p-sm-0 { padding: 0 !important; } .p-sm-8 { padding: 8px !important; } .p-sm-16 { padding: 16px !important; } .p-sm-24 { padding: 24px !important; } .pt-sm-0 { padding-top: 0 !important; } .pt-sm-8 { padding-top: 8px !important; } .pt-sm-16 { padding-top: 16px !important; } .pt-sm-24 { padding-top: 24px !important; } .pr-sm-0 { padding-right: 0 !important; } .pr-sm-8 { padding-right: 8px !important; } .pr-sm-16 { padding-right: 16px !important; } .pr-sm-24 { padding-right: 24px !important; } .pb-sm-0 { padding-bottom: 0 !important; } .pb-sm-8 { padding-bottom: 8px !important; } .pb-sm-16 { padding-bottom: 16px !important; } .pb-sm-24 { padding-bottom: 24px !important; } .pl-sm-0 { padding-left: 0 !important; } .pl-sm-8 { padding-left: 8px !important; } .pl-sm-16 { padding-left: 16px !important; } .pl-sm-24 { padding-left: 24px !important; } .px-sm-0 { padding-right: 0 !important; padding-left: 0 !important; } .px-sm-8 { padding-right: 8px !important; padding-left: 8px !important; } .px-sm-16 { padding-right: 16px !important; padding-left: 16px !important; } .px-sm-24 { padding-right: 24px !important; padding-left: 24px !important; } .py-sm-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .py-sm-8 { padding-top: 8px !important; padding-bottom: 8px !important; } .py-sm-16 { padding-top: 16px !important; padding-bottom: 16px !important; } .py-sm-24 { padding-top: 24px !important; padding-bottom: 24px !important; } /** Responsive table - taken from https://codepen.io/smashing-magazine/pen/PVGZEQ?editors=1100 */ @media screen and (max-width: 1140px) { .wrapper { display: block; overflow: auto; } .insider_company_table { display: flex; } .insider_company_table thead,tbody { display: grid; } .insider_company_table thead tr,tbody tr { display: grid; grid-auto-rows: auto; } #ic_body_id { display: flex; position: relative; overflow-x: auto; overflow-y: hidden; max-width: 100%; background: linear-gradient(to right,white 30%,rgba(255,255,0)),linear-gradient(to right,0),white 70%) 0 100%,radial-gradient( farthest-side at 0% 50%,rgba(0,0.4),radial-gradient( farthest-side at 100% 50%,0.2),0)) 0 100%; background-repeat: no-repeat; background-color: white; background-size: 40px 100%,40px 100%,14px 100%,14px 100%; background-position: 0 0,100%,0 0,100%; background-attachment: local,local,scroll,scroll; } #ic_head_id>tr>th,#ic_body_id>tr>td { display: block; } .numeric { text-align: right; } .text { text-align: center; } } /* .table-wrapper { overflow: auto; max-width: 100%; background: linear-gradient(to right,radial-gradient(farthest-side at 0% 50%,.2),radial-gradient(farthest-side at 100% 50%,0)) 0 100%; background-repeat: no-repeat; background-color: white; background-size: 40px 100%,14px 100%; background-position: 0 0,100%; background-attachment: local,scroll; } */ } </style> </head> <body style="box-sizing:border-box;margin:0;padding:0;width:100%;word-break:break-word;-webkit-font-smoothing:antialiased;"> <div style="display:none;font-size:0;line-height:0;">{preheader}</div> <modules> <module label="Text Grid 1 Column" auto=""> <table class="wrapper" cellpadding="0" cellspacing="0" role="presentation" width="100%"> <tbody> <tr> <td class="px-sm-16" align="center" bgcolor="#EEEEEE"> <table class="container" cellpadding="0" cellspacing="0" role="presentation" width="800"> <tbody> <tr> <td class="px-sm-8" align="left" bgcolor="#FFFFFF" style="padding: 0 24px;"> <table cellpadding="0" cellspacing="0" role="presentation" width="100%"> <tbody> <tr> <td class="col" width="100%" style="padding: 0 8px;"> <multi label="Text"> <h1>Transactions</h1> </multi> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </module> <module label="Table" auto=""> <table class="wrapper" cellpadding="0" cellspacing="0" role="presentation" width="100%"> <tbody> <tr> <td class="px-sm-16" align="center" bgcolor="#EEEEEE"> <table class="container" cellpadding="0" cellspacing="0" role="presentation" width="800"> <tbody> <tr> <td class="px-sm-8" align="left" bgcolor="#FFFFFF" style="padding: 0 24px;"> <div class="spacer line-height-sm-0 py-sm-8" style="line-height: 24px;">&zwnj;</div> <table cellpadding="0" cellspacing="0" role="presentation" width="100%"> <tbody> <tr> <td class="col" width="100%" align="center"> <div class="table-wrapper" tabindex="0"> <table class="insider_company_table" style="border-collapse:collapse" width="100%" id="overall-table" cellpadding="0" cellspacing="0" role="presentation"> <thead id="ic_head_id"> <tr> <th class="text" style="padding:2px;width:110px" align="left">Product</th> <th class="text" style="padding:2px" align="center">Name</th> <th class="text" style="padding:2px" align="center">Buy/Sell</th> <th class="text" style="padding:2px" align="left">Price</th> <th class="text" style="padding:2px;width:110px" align="left">Total Transaction</th> <th class="text" style="padding:2px" align="left">Transaction Date</th> </tr> </thead> <tbody id="ic_body_id" class="insider_company_body"> <tr style="border-bottom: 1px solid #ccc;" valign="middle" repeatable="" label="Row"> <td class="text" style="padding:2px" align="left">Company 1</td> <td class="text" style="padding:2px" align="left">Mark<br>Sutterlanderer<br>Dir</td> <td class="text" style="padding:2px" align="middle">Buy</td> <td class="text" style="padding:2px; width: 70px;" align="left">4000 packages @<br>52.41</td> <td class="text" style="padding:2px; width: 70px;" align="left">$191,125</td> <td class="text" style="padding:2px" align="right">2020-10-23</td> </tr> <tr style="border-bottom: 1px solid #ccc;" valign="middle" repeatable="" label="Row"> <td class="text" style="padding:2px" align="left">Company 3<br>(ABC)</td> <td class="text" style="padding:2px" align="left">Joseph<br>Dir</td> <td class="text" style="padding:2px" align="middle">Buy</td> <td class="text" style="padding:2px; width: 70px;" align="left">4000 packages @<br>12.06</td> <td class="text" style="padding:2px; width: 70px;" align="left">$48,440</td> <td class="text" style="padding:2px" align="right">2020-10-23</td> </tr> <tr style="border-bottom: 1px solid #ccc;" valign="middle" repeatable="" label="Row"> <td class="text" style="padding:2px" align="left">Company 3<br>(ABC)</td> <td class="text" style="padding:2px" align="left">Joseph<br>Dir</td> <td class="text" style="padding:2px" align="middle">Buy</td> <td class="text" style="padding:2px; width: 70px;" align="left">4000 packages @<br>10.47</td> <td class="text" style="padding:2px; width: 70px;" align="left">$48,440</td> <td class="text" style="padding:2px" align="right">2020-10-23</td> </tr> <tr style="border-bottom: 1px solid #ccc;" valign="middle" repeatable="" label="Row"> <td class="text" style="padding:2px" align="left">Company 3<br>(ABC)</td> <td class="text" style="padding:2px" align="left">Joseph<br>Dir</td> <td class="text" style="padding:2px" align="middle">Buy</td> <td class="text" style="padding:2px; width: 70px;" align="left">4000 packages @<br>9.97</td> <td class="text" style="padding:2px; width: 70px;" align="left">$48,440</td> <td class="text" style="padding:2px" align="right">2020-10-23</td> </tr> </tbody> </table> </div> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </module> <module label="Footer 5"> <table class="wrapper" cellpadding="0" cellspacing="0" role="presentation" width="100%"> <tbody> <tr> <td class="px-sm-16" align="center" bgcolor="#EEEEEE"> <table class="container" cellpadding="0" cellspacing="0" role="presentation" width="800"> <tbody> <tr> <td class="px-sm-8" bgcolor="#FFFFFF" style="padding: 0 24px;"> <div class="spacer line-height-sm-0 py-sm-8" style="line-height: 24px;">&zwnj;</div> <table cellpadding="0" cellspacing="0" role="presentation" width="100%"> <tbody> <tr> <td class="col" align="center" width="100%" style="padding: 0 8px;"> <div> <a href="{homepage}"><img editable="" label="Footer Logo" src="" alt="Footer Logo" width="94" class=""></a> </div> <div class="spacer" style="line-height: 12px;">&zwnj;</div> <table class="textbutton" cellpadding="0" cellspacing="0" role="presentation"> <tbody> <tr> <td> <a href="{unsublink}" editable="" style="color: #888888;">Unsubscribe</a> </td> </tr> </tbody> </table> <div class="spacer" style="line-height: 10px;">&zwnj;</div> <div class="spacer line-height-sm-0 py-sm-8" style="line-height: 24px;"> &zwnj; </div> </td> </tr> </tbody> </table> <div class="spacer line-height-sm-0 py-sm-8" style="line-height: 24px;">&zwnj;</div> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </module> </modules> <p id="a11y-speak-intro-text" class="a11y-speak-intro-text" style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px,1px,1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;" hidden="hidden">Notifications</p> <div id="a11y-speak-assertive" class="a11y-speak-region" style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px,1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;" aria-live="assertive" aria-relevant="additions text" aria-atomic="true"></div> <div id="a11y-speak-polite" class="a11y-speak-region" style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px,1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;" aria-live="polite" aria-relevant="additions text" aria-atomic="true"></div> </body> </html>上使用grid-auto-rows: 1fr为所有单元格设置相同的高度：
tr

enter image description here

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

Selenium Web驱动程序和Java元素在(x，y)点处不可单击其他元素将获得点击?
Selenium Web驱动程序和Java。元素在(x，y)点处不可单击。其他元素将获得点击?
Python-如何使用点“” 访问字典成员？
Python-如何使用点“。” 访问字典成员？
Java 字符串是不可变的到底是什么意思？
Java 字符串是不可变的。到底是什么意思？
Java中的“ final”关键字如何工作？我仍然可以修改对象
Java中的“ final”关键字如何工作？（我仍然可以修改对象。）
“loop:”在Java代码中这是什么，为什么要编译？
“loop:”在Java代码中。这是什么，为什么要编译？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常为什么？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么？
这是用Java进行XML解析的最佳库
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构为什么？
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么？
如何在Java中聆听按键时移动图像
如何在Java中聆听按键时移动图像。
Java“Program to an interface”这是什么意思？
Java“Program to an interface”。这是什么意思？
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot