하나의 테이블 열만 반응 형으로 변환하는 방법

Question

3 개 열 (앨범 노래를 표시하는 데 사용)이있는 테이블이 있습니다. 번호, 트랙 제목 및 아티스트. Number와 Artist의 컬럼을 작게 유지하고 Title이 컬럼의 대부분의 공간을 배치 할 수있게하고 싶었습니다. 모바일 용으로 반응 형으로 만들고 싶었습니다.

white-space: nowrap, overflow: auto으로 올바르게 만들고 테이블 td에 max-width을 추가했습니다. 대형 디스플레이가있는 데스크탑에서는보기에 좋지만 모바일 화면에서는 에 사용 된 width:100%이 적용되지 않습니다. 테이블이 화면의 한계를 초과하기 때문입니다.

작은 화면에 전체 표를 표시하고 수정하려면 어떻게해야합니까? @media으로 만 가능합니까?

수행 작업은 여기에 있습니다 :

table { 
 
    width: 100%; 
 
} 
 

 
table th { 
 
    background: #E4E4E4; 
 
    line-height: 23px; 
 
    padding-top: 6px; 
 
    color: #626262; 
 
    letter-spacing: 0.05em; 
 
    text-transform: uppercase; 
 
    font-size: 11px; 
 
    border: 1px solid #DBDBDB; 
 
} 
 

 
table td { 
 
    font-size: 13px; 
 
    line-height: 22px; 
 
    background: #F7F7F7; 
 
    border-top: 1px solid #F3F3F3; 
 
    white-space: nowrap; 
 
    overflow: auto; 
 
    max-width: 300px; 
 
} 
 

 
table td, 
 
table th { 
 
    text-align: left; 
 
    padding: 3px 20px; 
 
}

<table cellpadding="0" cellspacing="0"> 
 
    <tbody> 
 
    <tr> 
 
     <th>Nº</th> 
 
     <th class="largura-min">Title</th> 
 
     <th>Artist</th> 
 
    </tr> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>I need this column placing most of this space/Superlong String Superlong String Superlong String Superlong String Superlong String Superlong String Superlong String Superlong String Superlong String Superlong String</td> 
 
     <td>ARTIST</td> 
 
    </tr> 
 
    <tr class="even"> 
 
     <td>2</td> 
 
     <td>TITLE 2</td> 
 
     <td>I NEED A SMALLER ARTIST SPACE/SUPERLONG ARTIST SUPERLONG ARTIST SUPERLONG ARTIST SUPERLONG ARTIST SUPERLONG ARTIST SUPERLONG ARTIST</td> 
 
    </tr> 
 

 
    </tbody> 
 
</table>

Answer 1

당신이 말할 때 그 폭 : 100 % 무시, 당신은 테이블의 폭이 화면의 폭과 수평보다 큰되고 있음을 의미합니까 스크롤바가 나타 납니까?

각각의 열에 최대 너비를 px 단위로 할당하십시오. 원하는 너비의 부분을 차지하십시오. 실험을 쉽게하기 위해 예제에서 여러 가지 요소를 제거했습니다. https://jsfiddle.net/dgrogan/ye2wm4yp/2/

에 대한 출력 프레임 크기 조정하지만 파이어 폭스는 테이블 셀에 자동 오버 플로우를 지원하지 않는 것 같습니다. FF를 지원해야하는 경우이를 파악해야합니다. Edge를 테스트하지 않았습니까?

그리드는 테이블보다이 사용 사례를 더 잘 지원할 수 있습니다.

let reducer = (sum, current) => sum += current; 
 

 
let cells = Array.from(document.querySelectorAll("tr:first-child td")); 
 
let abs_widths = cells.map(cell => cell.offsetWidth); 
 
let total_width = abs_widths.reduce(reducer); 
 
let pct_widths = abs_widths.map(w => Math.round(1000 * w/total_width)/1000); 
 
let specified_widths_px = cells.map(cell => parseInt(getComputedStyle(cell).maxWidth)); 
 
let total_spec_widths = specified_widths_px.reduce(reducer); 
 
let specified_widths_pct = specified_widths_px.map(px => Math.round(1000 * px/total_spec_widths)/1000); 
 
log.innerHTML = `${abs_widths} 
 
<br>${pct_widths} <-- current column ratio 
 
<br>${specified_widths_pct} <-- specified column ratio 
 
`;

table { 
 
    width: 100%; 
 
} 
 

 
table td { 
 
    font-size: 13px; 
 
    line-height: 22px; 
 
    white-space: nowrap; 
 
    overflow: auto; 
 
    padding-right: 0px; 
 
    outline: 1px solid lime; 
 
} 
 

 
td:nth-child(1) { 
 
    max-width: 10px; 
 
} 
 

 
td:nth-child(2) { 
 
    max-width: 50px; 
 
} 
 

 
td:nth-child(3) { 
 
    max-width: 35px; 
 
}

<table cellpadding="0" cellspacing="0"> 
 
    <tr> 
 
    <td>Nº</td> 
 
    <td class="largura-min">Title</td> 
 
    <td>Artist</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>I need this column placing most of this space/Superlong String Superlong String Superlong String Superlong String Superlong String Superlong String Superlong String Superlong String Superlong String Superlong String</td> 
 
    <td>ARTIST</td> 
 
    </tr> 
 
    <tr class="even"> 
 
    <td>2</td> 
 
    <td>TITLE 2</td> 
 
    <td>I NEED A SMALLER ARTIST SPACE/SUPERLONG ARTIST SUPERLONG ARTIST SUPERLONG ARTIST SUPERLONG ARTIST SUPERLONG ARTIST SUPERLONG ARTIST</td> 
 
    </tr> 
 
</table> 
 
<div id=log></div>