Bảng đáp ứng, cách thông minh

Question

Tôi có một bảng chứa dữ liệu. Dữ liệu dạng bảng. Và nó trông như thế này

Xem this fiddle.

Bây giờ những gì tôi muốn là, khi nó được hiển thị trên một màn hình hẹp hơn, cho bảng để trông như thế này, do đó bạn không nhận được một thanh cuộn ngang và nó giữ cùng một cấu trúc hình ảnh:

(hoặc nếu bạn muốn, như this fiddle.)

Bây giờ câu hỏi của tôi là, làm thế nào để bạn làm điều đó? Tôi thích một cách CSS duy nhất, nhưng cho đến nay, tôi đã không quản lý để làm điều đó chỉ trong CSS. (Các fiddle thứ hai chứa rowspan thuộc tính, mà không có tương đương CSS.)

HTML là tạo ra phía máy chủ, vì vậy tôi có thể tạo ra một trong hai bố trí tùy thuộc vào chiều rộng cửa sổ, nhưng sau đó nó wouldn' t trả lời thay đổi kích thước cửa sổ.

Tôi không chống lại một chút Javascript, nhưng trong trường hợp này, để dịch bảng đầu tiên thành thứ hai trên cửa sổ thay đổi kích thước, nó sẽ cần phải được tháo rời và xây dựng lại, tế bào của tế bào, và tôi nghĩ rằng đó là quá mức cần thiết . Vẫn đang tìm kiếm truy vấn phương tiện có thể thực hiện tất cả công việc.

Thử nghiệm một chút, tôi đã đến this close, nhưng điều đó không hoạt động trong IE8 và IE9.

Vì vậy, không ai có bất kỳ ý tưởng nào về cách giải quyết vấn đề này? Giải pháp lý tưởng sẽ hoạt động trên các ô bảng có chiều cao khác nhau (2 dòng văn bản trở lên) và bất kỳ số lượng cột nào.

Answer 1

Bạn có thể chặn nội tuyến các phần tử. Tôi không có nhiều thời gian để chơi, nhưng giống như sau:

#content { 
    border:1px solid; 
    border-collapse:collapse; 
} 
#content td, #content th { 
    border:1px solid; 
    text-align:left; 
    padding:.07em .2em; 
    white-space:nowrap; 
    font-weight:400; 
} 
#content td { 
    display: inline-block; 
    width: 100px; 
} 

Đây không phải là sự sáng tạo đẹp nhất!

http://jsfiddle.net/8H3bN/

Answer 2

ya như html của bạn là tương tự như bạn có thể thay đổi phong cách cho các thuộc tính css theo truy vấn phương tiện truyền thông là một giải pháp tốt hơn sẽ be- fiddle

@media only screen and (min-width: 769px) { 
     #content { 
    border:1px solid; 
    border-collapse:collapse; 
} 
#content td, #content th { 
    border:1px solid; 
    text-align:left; 
    padding:.07em .2em; 
    white-space:nowrap; 
    font-weight:400; 
} 
} 
@media only screen and (max-width: 768px) { 
#content { 
    border:1px solid; 
    border-collapse:collapse; 
} 
#content tr { 
    height:4em; border-bottom:1px solid; 
} 
#content th { 
    border:1px solid; 
    text-align:left; 
    padding:.07em .2em; 
    white-space:nowrap; 
    font-weight:400; 
    height:4em; 
} 
#content td { 
    padding:.07em .2em; 
    white-space:nowrap; 
    height:1.4em; 
    display:inline; 
} 
#content td:not(:last-child)::after { 
    display:block; content:''; 
    height:0; 
    border-bottom:1px solid; 
} 

} 

một giải pháp khả thi là sử dụng truy vấn phương tiện ẩn một khối tương ứng hoặc thay đổi kiểu cho phù hợp

đây là fiddle
thay đổi bảng id nhỏ hơn để content2

@media only screen and (max-width: 768px) { 
    #content{ 
     display:none !important; 
    } 
} 
@media only screen and (min-width: 769px) { 
    #content2{ 
     display:none !important; 
    } 
} 

Answer 3

Tôi biết điều này là không chính xác những gì bạn muốn nhưng tôi đã tạo ra một jsfiddle một số thời gian trước đây như một tài liệu tham khảo mà có thể giúp: jsfiddle.net/webbymatt/MVsVj/1

về cơ bản đánh dấu vẫn giữ nguyên, không có JS và nội dung chỉ hiển thị như mong đợi. bạn chỉ cần thêm thuộc tính kiểu dữ liệu vào ô bảng.

Answer 4

Kiểm tra điều này CodePen.

Tôi đã tìm thấy giải pháp này từ lâu trong css-tricks.com.

Bảng được một chút lộn xộn:

<table> 
    <tr> 
     <td> 
      Description 1 
     </td> 
     <td> 
      <table class="responsive" cellpadding="0" cellspacing="0"> 
       <tbody> 
        <tr> 
         <td class="text-center">Data 1A</td> 
         <td class="text-center">Data 1B</td> 
         <td class="text-center">Data 1C</td> 
        </tr> 
       </tbody> 
      </table>     
     </td> 
    </tr> 
    <tr> 
     <td> 
      Description 2 
     </td> 
     <td> 
      <table class="responsive" cellpadding="0" cellspacing="0"> 
       <tbody> 
        <tr> 
         <td>Data 2A</td> 
         <td>Data 2B</td> 
         <td>Data 2C</td> 
        </tr> 
       </tbody> 
      </table>     
     </td> 
    </tr> 
</table> 

Và đây là css:

/* Small display targeting */ 
    @media only screen and (max-width: 767px) { 
     /* Force table to not be like tables anymore */ 
     .responsive, .responsive thead, .responsive tbody, .responsive th, .responsive td, .responsive tr { 
      display: block; 
     } 

     /* Hide table headers (but not display: none;, for accessibility) */ 
     .responsive thead tr { 
      position: absolute; 
      top: -9999px; 
      left: -9999px; 
     } 

     .responsive td { 
      /* Behave like a "row" */ 
      position: relative; 
     } 

     .responsive td:before { 
      /* Now like a table header */ 
      position: absolute; 
     } 
    }