td 데이터 레이블 속성으로 콘텐츠를 가져옵니다.

작은 화면 크기에 대해 접히고 각 셀 앞에 표 머리글을 표시하는 반응 형 테이블 스타일을 사용하고 있습니다.td 데이터 레이블 속성으로 콘텐츠를 가져옵니다.

HTML :

<table> 
    <caption>Statement Summary</caption> 
    <thead> 
    <tr> 
     <th scope="col">Account</th> 
     <th scope="col">Estimated arrival date</th> 
     <th scope="col">Amount</th> 
     <th scope="col">Period</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td data-label="Account">Visa - 3412</td> 
     <td data-label="Really freaking long div magic">04/01/2016</td> 
     <td data-label="Amount">$1,190</td> 
     <td data-label="Period">03/01/2016 - 03/31/2016</td> 
    </tr> 
    <tr> 
     <td scope="row" data-label="Account">Visa - 6076</td> 
     <td data-label="Due Date">03/01/2016</td> 
     <td data-label="Amount">$2,443</td> 
     <td data-label="Period">02/01/2016 - 02/29/2016</td> 
    </tr> 
    <tr> 
     <td scope="row" data-label="Account">Corporate AMEX</td> 
     <td data-label="Due Date">03/01/2016</td> 
     <td data-label="Amount">$1,181</td> 
     <td data-label="Period">02/01/2016 - 02/29/2016</td> 
    </tr> 
</tbody> 
</table>

CSS :

body { 
    font-family: "Open Sans", sans-serif; 
    line-height: 1.25; 
} 
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: #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; 
    color: red; 
    background-color:#000; 
    } 
    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; 
    } 
    table td:first-child{ 
    color:white; 
    background: #000; 
    } 
}

열 헤더가 대응하는 각 테이블 셀에 데이터 label 속성을 이용하여 표현된다. CSS에서는 content : attr (data-label)을 사용하여 호출됩니다. 이 스타일을 꽤 큰 테이블에 적용하고 있으며 HTML의 모든 단일 셀에 대한 데이터 레이블을 작성하고 싶지 않습니다. Javascript를 사용하여 데이터 레이블 속성으로 가져 오는 방법이 있습니까?

출처

2017-11-03 kfievel

당신은 테이블이에서 갈래 :

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Table Flipping</title> 
    <style> 
    .table { 
     border-collapse: collapse; 
     display: inline-table; 
    } 

    .tr { 
     display: table-row; 
    } 

    .th, .td { 
     display: table-cell; 
     border: 1px solid #555; 
     padding: 3px 6px; 
    } 

    .th { 
     background-color: #ddd; 
     font-weight: bold; 
     text-align: center; 
    } 

    .td { 
     text-align: right; 
    } 

    .my-table.show-thin { 
     display: block; 
    } 

    .show-thin .tr { 
     border-bottom: 1px solid black; 
     display: block; 
     margin-bottom: 2px; 
     padding-bottom: 2px; 
    } 

    .show-thin .td { 
     border: none; 
     display: block; 
     padding: 0; 
     text-align: left; 
    } 

    .show-thin .td:before { 
     content: attr(title) ':'; 
     display: inline-block; 
     font-weight: bold; 
     padding-right: 5px; 
    } 

    .show-thin .thin-hide { 
     display: none; 
    } 
    </style> 
    <script> 
    function toggle() { 
     var table = document.querySelector('.my-table'); 
     table.classList.toggle('show-thin'); 
    } 
    </script> 
    </head> 
    <body> 
    <button onclick="toggle()">Toggle</button> 
    <hr/> 
    <div class="my-table"> 
     <div class="tr thin-hide"> 
     <span class="th">Account</span> 
     <span class="th">Estimated arrival date</span> 
     <span class="th">Amount</span> 
     <span class="th">Period</span> 
     </div> 
     <div class="tr"> 
     <span class="td" title="Account">1234</span> 
     <span class="td" title="Estimated Arrival Date">03/15/2001</span> 
     <span class="td" title="Amount">$1.00</span> 
     <span class="td" title="Period">3rd</span> 
     </div> 
     <div class="tr"> 
     <span class="td" title="Account">1235</span> 
     <span class="td" title="Estimated Arrival Date">04/21/2002</span> 
     <span class="td" title="Amount">$12.00</span> 
     <span class="td" title="Period">4th</span> 
     </div> 
     <div class="tr"> 
     <span class="td" title="Account">4594</span> 
     <span class="td" title="Estimated Arrival Date">11/11/2011</span> 
     <span class="td" title="Amount">$45.50</span> 
     <span class="td" title="Period">2nd</span> 
     </div> 
    </div> 
    </body> 
</html>

내 예를 사용 :이으로

| Account | Estimated arrival date | Amount | Period | 
| ------- | ---------------------- | ------ | ------ | 
| 1234 |    03/15/2001 | $1.00 | 3rd | 
| 1235 |    04/21/2002 | $12.00 | 4th | 
| 4594 |    11/11/2011 | $45.00 | 2nd |

는

----------- 
Account: 1234 
Estimated Arrival Date: 03/15/2001 
Amount: $1.00 
Period: 3rd 
----------- 
Account: 1235 
Estimated Arrival Date: 04/21/2002 
Amount: $12.00 
Period: 4th 
----------- 
Account: 4594 
Estimated Arrival Date: 11/11/2011 
Amount: $45.00 
Period: 2nd 
-----------

UPDATE 이 코드를 시도? : 값을 표 형식에서 라인으로 변경하는 클래스 d 포맷. 그러나 미디어 쿼리를 사용하여 수행 할 수도 있습니다. 이것은 데모하기가 더 쉬웠습니다.

모든 셀에 title 속성을 삽입하는 것이 트릭입니다. 그런 다음 CSS를 사용하여 씬 모드에서 title을 표시합니다.

이

테이블은 와이드 모드

의 모습을 보여줍니다 그리고이는 얇은 모드

,536,913을처럼 무엇인지 보여줍니다

두 이미지를 보면 표준 표 형식에서 "예상 도착 날짜"라는 용어가 첫 번째 작품의 대문자로 사용된다는 것을 알 수 있습니다. 얇은 버전은 "Estimated Arrival Date"를 사용하며 모든 단어는 대문자로 표기됩니다. 이것은 값이 다른 장소에서 왔음을 보여줍니다. 헤더는 여기에서 오는 다양한 모드에서

<div class="tr thin-hide"> 
    <span class="th">Account</span> 
    <span class="th">Estimated arrival date</span> 
    <span class="th">Amount</span> 
    <span class="th">Period</span> 
</div>

그리고 얇은 모드는 title 속성에서 비롯됩니다.

당신이 <table>, <tr>, <th> 및 <td> 태그를 사용하려고하면이 문제가 해결되지 않습니다.

출처

2017-11-03 19:50:08 Intervalia

예, 맞습니다. – kfievel

필요에 맞는 코드를 포함하도록 코드를 변경했습니다. – Intervalia

필자가 가장 중요하게 생각하는 것은이 대용량 스타일을 다소 큰 데이터 테이블에 적용하기 위해서이며 HTML로 들어가서 각 셀에 대한 데이터 레이블이나 제목 특성을 설정하지 않아도된다는 것입니다. 그래서 자바를 사용하여 적용 가능한 모든 에 대해 콘텐츠를 기반으로 해당 속성을 설정하고 싶습니다. – kfievel

td 데이터 레이블 속성으로 콘텐츠를 가져옵니다.

답변

관련 문제