부족한 경우에만 표 열 숨기기

2 열의 HTML 표가 있습니다. 둘 다 모두 표시하고 싶습니다. 두 번째는 오른쪽 정렬로 표시합니다. 이제는 첫 번째 열에 대해 width: 100%;으로 만듭니다. 그러나 이제 두 번째 열은 항상 단어로 둘러 쌓여 있습니다.부족한 경우에만 표 열 숨기기

오른쪽에 두 번째 열을 넣으려고하지만 두 열이 모두 표시 될만큼 공간이 충분하지 않은 경우에만 줄 바꿈됩니다.

출처

2012-06-04 neko259

우리에게 데모를 보여줄 수 있습니까? –

http://storage4.static.itmages.ru/i/12/0604/h_1338812863_8983329_5caff86199.jpeg - 날짜를 한 줄에 표시하고 오른쪽에는 여전히 표시하고 싶습니다. – neko259

은 오른쪽에있는 셀에 다음 CSS 스타일을 추가

td {white-space: nowrap;}

이것은 당신의 예에서와 같이, 포장에서 셀 안의 텍스트를 방지 할 수 있습니다.

출처

2012-06-04 12:34:08 Tom

그러나 예를 들어 휴대 전화와 같이 많은 공간이 없을 때 랩핑을하고 싶습니다. 첫 번째 열에 대한 충분한 공간을 확보하십시오. – neko259

두 열이 있고 항상 왼쪽 열을 "선호"하려면 왼쪽 셀에서 너비를 제거하고 오른쪽 셀 {width : 1 %; white-space : nowrap;}. 이것은 가능한 한 작게 만들 것이지만 ..... 텍스트를 감싸지 마십시오. 그렇지 않으면 당신의 코멘트/질문을 오해하고 있습니다. – Tom

귀하의 조언에 따라 오른쪽 열이 감싸 지 않을 것입니다. 그리고 나는 왼쪽 열을 '선호'하고 싶지만 ** 많은 공간이있을 때만 한 보푸라기 **에 적합한 것을 보여주고 싶습니다. ** – neko259

이 경우 모바일 또는 작은 화면에 대해 정말로 생각하는 경우 미디어 쿼리 사용을 고려해야합니다. 이 경우 화면이 특정 너비 아래로 떨어지면 오른쪽 열에 대해 더 넓은 너비를 지정할 수 있습니다.

http://www.css3.info/preview/media-queries/

출처

2012-06-04 13:43:29

부족한 경우에만 표 열 숨기기

답변

관련 문제