너비가 0 인 테이블 열

해당 컨테이너를 채우는 테이블이 있습니다. (너비 100 %) 두 열 (1 및 3)은 최소 너비를 갖지만 가운데 하나는 가지지 않습니다.

창을 좁히고있을 때 가운데 열이 완전히 축소되어야하는 반면 (창이 너무 좁은 경우 첫 번째 및 세 번째 열만 표시해야 함) 첫 번째 및 세 번째 열이 최소 너비로 유지되기를 원합니다.

감사합니다.

내가 무슨의 간단한 코드가있다 : 화면이 지정된 폭으로 감소 할 때

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<html> 
<head> 
    <title>My first styled page</title> 
    <style type="text/css"> 
.overflow{ 
    text-overflow: ellipsis; 
    word-break: break-all; 
    word-wrap: break-word; 
} 
.table{ 
    width: 100%; 
    border-collapse: collapse; 
    border-spacing: 0; 
} 
.first{ 
    min-width: 20px; 
} 
    </style> 
</head> 

<body> 
    <table class="table"> 
     <tr> 
      <td class="first"><div class="overflow">oneoneoneone</div></td> 
      <td class="second"><div class="overflow">twotwotwotwo</div></td> 
      <td class="first"><div class="overflow">threethreethree</div></td> 
     </tr> 
    </table> 
</body> 
</html>

출처

2013-11-20 Murval

당신은 용기의 폭을 확인하기 위해 자바 스크립트를 사용하고 폭이 일정 값보다 덜가는 경우, 제로로 두 번째 열의 너비를 변경하거나 가시성을 할 수 있습니다 숨겨진. 테이블 안에 div를 넣는 것이 좋은 습관이라고 생각하지 않지만 말해야합니다. – Pratik

td에 데이터가있는 경우 너비가 0 일 수 있는지 확실하지 않습니다. 오인되었을 수 있습니다. – SaturnsEye

@Pratik 나는 실수라고 생각한다. :) – SaturnsEye

의 폭으로 감소 할 때 두 번째 열이 표시되지 않을 것입니다 & 미디어 쿼리, 여기에 예를

<table border=1> 
<thead> 
<tr> 
    <th>Col 1</th> 
    <th>Col 2</th> 
    <th>Col 3</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Row 1 Col 1</td> 
    <td>Row 1 Col 2</td> 
    <td>Row 1 Col 3</td> 
</tr> 
<tr> 
    <td>Row 2 Col 1</td> 
    <td>Row 2 Col 2</td> 
    <td>Row 2 Col 3</td> 
</tr> 
<tr> 
    <td>Row 3 Col 1</td> 
    <td>Row 3 Col 2</td> 
    <td>Row 3 Col 3</td> 
</tr> 
<tr> 
    <td>Row 4 Col 1</td> 
    <td>Row 4 Col 2</td> 
    <td>Row 4 Col 3</td> 
</tr> 
</tbody>

,536,913,632에게있어 10

<style> 
@media only screen and (max-width:500px){ 
    table td:nth-child(2), table th:nth-child(2) { 
     display:none; 
    } 
} 
</style>

화면이 500px보다 작 으면 두 번째 열이 숨겨집니다.

바이올린 행동에 표시 : http://jsfiddle.net/9rEgQ/2/

출처

2013-11-20 14:03:33 MLeFevre

이것이 올바른 방법입니다. CSS가 솔루션을 제공 할 때 자바 스크립트를 사용하지 마십시오. – Sablefoste

내가 예상했던 최선의 해결책은 아니지만 이렇게 할 수 있습니다. 감사. – Murval

당신은 CSS와 중간 열을 숨기하는 미디어 쿼리를 사용할 수 있습니다. 예를 들어

이 예에서

@media all and (max-width:500px) { 
.second { 
display: none; 
} 
}

, 화면이 당신은 몇 가지 기본적인 CSS 스타일이 할 수 미만 500 픽셀

출처

2013-11-20 14:02:00

너비가 0 인 테이블 열

답변

관련 문제