Responsive Table trên mobile với CSS/HTML như thế nào?

Thảo luận trong 'Ngôn ngữ lập trình CSS, HTML, HTML5' bắt đầu bởi seolagi, 11/3/21.

  1. seolagi

    seolagi

    Moderator

    Thành viên BQT

    Tham gia ngày:
    16/4/14
    Bài viết:
    950
    Đã được thích:
    77
    Điểm thành tích:
    28
    Cho mình xin code css responsive trên table với ạ, tại dữ liệu trên table ở trên latop thì bình thường, còn trên mobi nó bị co lại và bị mất dữ liệu. Bạn nào có code css responsive cho mình xin đoạn code css nhé, cảm ơn
     
    Cảm ơn đã xem bài:

    Responsive Table trên mobile với CSS/HTML như thế nào?

  2. admin

    admin Phạm Công Sơn Thành viên BQT

    Tham gia ngày:
    22/5/13
    Bài viết:
    4,620
    Đã được thích:
    1,132
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Cách căn bản, bạn add css sau vào nhé:
    HTML:
    @media (max-width:767px){
        table{
            border-collapse:collapse;
            border-spacing:0;
            margin:0 auto;
            width:100%;
            overflow-x:auto;
            display:block;
            background-color:#f4f4f4;
            max-width:400px
        }
    }
    Responsive theo chiều đứng:

    responsive-table.jpg
    HTML:
    table {
      border: 1px solid #ccc;
      border-collapse: collapse;
      margin: 0;
      padding: 0;
      width: 100%;
      table-layout: fixed;
    }
    
    table caption {
      font-size: 1.5em;
      margin: .5em 0 .75em;
    }
    
    table tr {
      background-color: #f8f8f8;
      border: 1px solid #ddd;
      padding: .35em;
    }
    
    table th,
    table td {
      padding: .625em;
      text-align: center;
    }
    
    table th {
      font-size: .85em;
      letter-spacing: .1em;
      text-transform: uppercase;
    }
    
    @media screen and (max-width: 600px) {
      table {
        border: 0;
      }
    
      table caption {
        font-size: 1.3em;
      }
     
      table thead {
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
      }
     
      table tr {
        border-bottom: 3px solid #ddd;
        display: block;
        margin-bottom: .625em;
      }
     
      table td {
        border-bottom: 1px solid #ddd;
        display: block;
        font-size: .8em;
        text-align: right;
      }
     
      table td::before {
        /*
        * aria-label has no advantage, it won't be read inside a table
        content: attr(aria-label);
        */
        content: attr(data-label);
        float: left;
        font-weight: bold;
        text-transform: uppercase;
      }
     
      table td:last-child {
        border-bottom: 0;
      }
    }
    
    Muốn nâng cao bạn xem các bài viết sau:
    Code khác trên wodpress:
    HTML:
    .entry-content table
    {
    
    border: 1px solid #ccc;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    width: 100%;
    table-layout: fixed;
    word-wrap: break-word;
    }
    @media screen and (max-width: 767px) {
    .entry-content table td,
    .entry-content table th,
    .entry-content table tr
    {
    height: auto !important;
    vertical-align: top;
    }
    
    .entry-content table{
            border-collapse:collapse;
            border-spacing:0;
            margin:0 auto;
            width:100%;
            overflow-x:auto;
            display:block;
            background-color:#f4f4f4;
            max-width:400px;
    height: auto !important;
    }
    .entry-content table td,
    .entry-content table th
    {
    max-width: 300px !important;
    }
    }
     
    Chỉnh sửa cuối: 4/3/22


Like và Share ủng hộ ITSEOVN