html - 响应表 - 静态标题列到行

标签 html css newsletter

我正在尝试创建一个与此示例类似的表(来源来自 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, th, div, p, 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,
      th,
      div,
      p {
        font-family: "Open Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
      }
      .webfont {
        font-family: "Lato", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, 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, 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, 255, 0)), linear-gradient(to right, rgba(255, 255, 255, 0), white 70%) 0 100%, radial-gradient( farthest-side at 0% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0)), radial-gradient( farthest-side at 100% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 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, white 30%, rgba(255, 255, 255, 0)),
                linear-gradient(to right, rgba(255, 255, 255, 0), white 70%) 0 100%,
                radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)),
                radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 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;
            }
          */
    }
  </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>
                                    <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>
                                    <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, 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, 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, 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

我的应用中有一个限制:我只能使用 class='insider_company_table' 更改 table 的 CSS，因为其他部分是新闻通讯模板的一部分.

有什么建议我做错了什么以及为什么行与文本不一致？

感谢您的回复!

最佳答案

我真的怀疑您是否能够接近您共享的屏幕截图，主要原因是您将表格显示为 flex 表格，并且您的行将根据内容的长度展开/折叠。为所有单元格实现相同高度的唯一方法是在应用 @media screen 和 (max-width: 1140px) 时为所有单元格指定特定高度。

话虽如此，您可以使用 CSS-grid 来:

  1. 自动设置内容的高度(如果所有单元格的内容长度不同，它看起来会变形)
@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;
  }
  ...
}


<!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, th, div, p, 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,
      th,
      div,
      p {
        font-family: "Open Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
      }
      .webfont {
        font-family: "Lato", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, 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, 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, 255, 0)), linear-gradient(to right, rgba(255, 255, 255, 0), white 70%) 0 100%, radial-gradient( farthest-side at 0% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0)), radial-gradient( farthest-side at 100% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 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, white 30%, rgba(255, 255, 255, 0)),
                linear-gradient(to right, rgba(255, 255, 255, 0), white 70%) 0 100%,
                radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)),
                radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 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;
            }
          */
    }
  </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>
                                    <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>
                                    <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, 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, 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, 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>

  • 在 tr 上使用 grid-auto-rows: 1fr 为所有单元格设置相同的高度:
    • @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: 1fr;
  }
  ...
}

    enter image description here

    关于html - 响应表 - 静态标题列到行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64524260/

    上一篇：ios - 如何在 Swift 中设置属性本身可变的属性值

    下一篇：haskell - 堆栈 : random dependency cycle(s) detected

    相关文章：

    javascript - `queue` 回调只执行一次？

    html - 如何在 HTML 通讯中嵌入类似 facebook 的按钮？

    时事通讯的 html 表

    html - 背景图像 1px 偏移

    javascript - 为什么有些css、js文件的名字里面有随机数？

    html - 如何强制忽略一个div？

    html - 文本未与 li ul 中的中心对齐

    zend-framework - 使用 Zend Mail 处理未送达的电子邮件

    html - 使响应图像在 div 内垂直居中

    HTML 大胆的音乐尖锐的标志

    ©2024 IT工具网  联系我们