table 横向滚动

<!doctype html>Document
12345
1 2 3 4 5 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="widtd=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    div {
      width: 500px;
      overflow: auto;
    }
    th {
      min-width: 200px;
      /* z-index: -1; */
    }
    td {
      text-align: center;
      /* z-index: -1; */
    }
    .name {
      position: sticky;
      left: 0px;
      background-color: lightpink;

      /* z-index: 0; */
    }

    p {
      width: 0;
      height: 0;
      border: 10px solid transparent;
      border-top-color: #f60;
    }
  </style>
  <body>
    <div>
      <table border="1" cellspacing="0">
        <tr>
          <th class="name">1</th>
          <th>2</th>
          <th>3</th>
          <th>4</th>
          <th>5</th>
        </tr>

        <tr>
          <td class="name">1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
      </table>
    </div>

    <p></p>
  </body>
</html>

　　

 

posted @ 2023-11-03 10:46  外行的小白  阅读(112)  评论(0)  编辑  收藏  举报