Attachment 369287 Details for Bug 197660 – a test page

a test page

index.html (text/html), 2.20 KB, created by Nikita on 2019-05-07 08:44:24 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Nikita

Created: 2019-05-07 08:44:24 PDT

Size: 2.20 KB

patch

obsolete

><!DOCTYPE html>
><html lang="en">
>  <head>
>    <meta charset="UTF-8">
>    <meta name="viewport" content="width=device-width, initial-scale=1.0">
>    <meta http-equiv="X-UA-Compatible" content="ie=edge">
>    <title>Static Template</title>
>    <style>
>    .flex {
>      display: flex;
>    }
>    .scrollable {
>      position: relative;
>      height: 100px;
>      width: 100%;
>      overflow: auto;
>      flex-grow: 1;
>      -webkit-overflow-scrolling: touch;
>    }
>    table {
>      width: 2000px;
>      height: 40px;
>      position: sticky;
>      position: -webkit-sticky;
>      z-index: 500;
>      overflow: visible;
>      top: 0;
>      border-collapse: collapse;
>    }
>    tr {
>      background: #508abb;
>    }
>    td {
>      border: 1px solid lightgray;
>      padding: 8px;
>    }
>    .sticky {
>      position: sticky;
>      position: -webkit-sticky;
>      left: 0;
>      z-index: 300;
>      background-clip: padding-box;
>      background-color: #fff;
>      overflow: visible;
>    }
>    </style>
>  </head>
>  <body>
>  <div class="flex">
>    <div class="scrollable">
>      <table>
>        <colgroup>
>          <col style="width: 120px;">
>          <col style="width: 50px;">
>          <col style="width: 50px;">
>          <col style="width: 50px;">
>          <col style="width: 50px;">
>          <col style="width: 50px;">
>          <col style="width: 50px;">
>          <col style="width: 50px;">
>          <col style="width: 50px;">
>          <col style="width: 50px;">
>          <col style="width: 50px;">
>          <col style="width: 50px;">
>          <col style="width: 50px;">
>        </colgroup>
>        <thead>
>          <tr>
>            <td class="sticky">content</td>
>            <td>content</td>
>            <td>content</td>
>            <td>content</td>
>            <td>content</td>
>            <td>content</td>
>            <td>content</td>
>            <td>content</td>
>            <td>content</td>
>            <td>content</td>
>            <td>content</td>
>            <td>content</td>
>            <td>content</td>
>            <td>content</td>
>            <td>content</td>
>            <td>content</td>
>            <td>content</td>
>            <td>content</td>
>          </tr>
>        </thead>
>      </table>
>    </div>
>  </div>
>    
>  </body>
></html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
    <style>
    .flex {
      display: flex;
    }
    .scrollable {
      position: relative;
      height: 100px;
      width: 100%;
      overflow: auto;
      flex-grow: 1;
      -webkit-overflow-scrolling: touch;
    }
    table {
      width: 2000px;
      height: 40px;
      position: sticky;
      position: -webkit-sticky;
      z-index: 500;
      overflow: visible;
      top: 0;
      border-collapse: collapse;
    }
    tr {
      background: #508abb;
    }
    td {
      border: 1px solid lightgray;
      padding: 8px;
    }
    .sticky {
      position: sticky;
      position: -webkit-sticky;
      left: 0;
      z-index: 300;
      background-clip: padding-box;
      background-color: #fff;
      overflow: visible;
    }
    </style>
  </head>
  <body>
  <div class="flex">
    <div class="scrollable">
      <table>
        <colgroup>
          <col style="width: 120px;">
          <col style="width: 50px;">
          <col style="width: 50px;">
          <col style="width: 50px;">
          <col style="width: 50px;">
          <col style="width: 50px;">
          <col style="width: 50px;">
          <col style="width: 50px;">
          <col style="width: 50px;">
          <col style="width: 50px;">
          <col style="width: 50px;">
          <col style="width: 50px;">
          <col style="width: 50px;">
        </colgroup>
        <thead>
          <tr>
            <td class="sticky">content</td>
            <td>content</td>
            <td>content</td>
            <td>content</td>
            <td>content</td>
            <td>content</td>
            <td>content</td>
            <td>content</td>
            <td>content</td>
            <td>content</td>
            <td>content</td>
            <td>content</td>
            <td>content</td>
            <td>content</td>
            <td>content</td>
            <td>content</td>
            <td>content</td>
            <td>content</td>
          </tr>
        </thead>
      </table>
    </div>
  </div>
    
  </body>
</html>

Actions: View

Attachments on bug 197660: 369286 | 369287