html 테이블 열 크기

원하는 방식으로 테이블의 크기를 조정할 수있는 방법이 있는지 궁금합니다. 하나의 열만 가변 크기를 가질 수있는 X 열이있는 테이블을 갖고 싶습니다. 다른 열은 최소 너비를 유지하면서 크기에 적응해야합니다. EX.html 테이블 열 크기

| Col0 | Col1 | Col 2   | Col3  | Col4    | Col5 | 
| dat1 | d | dat3dater  | datadata | datatdatadatadata | dat | 
|  | dat2 | asdasd   | datad | datadatadatad.....|  |

이 경우 2 번 칸은 나머지 공간을 사용하고 나머지 1 명은 내용에 맞게 조정됩니다.

가장 단순한 양식 지정 방법은 무엇입니까?

출처

2017-09-05 Luca Calabrese

나는 예상대로이 작동 stacktable.js – Brian

반응이 빠른 디자인처럼 들리 네요. 프레임 워크를 사용하거나 간단한 예를 사용하여 원하는대로 뒤틀 수 있습니다.

table { 
 
    border-collapse: collapse; 
 
    border-spacing: 0; 
 
    width: 100%; 
 
    border: 1px solid #ddd; 
 
} 
 

 
th, td { 
 
    border: none; 
 
    text-align: left; 
 
    padding: 8px; 
 
} 
 

 
tr:nth-child(even){background-color: #f2f2f2}

<html> 
 
<head> 
 
</head> 
 
<body> 
 

 
<h2>Responsive Table</h2> 
 
<p>Sample data take from w3schools.com .</p> 
 

 
<div style="overflow-x:auto;"> 
 
    <table> 
 
    <tr> 
 
     <th>Points</th> 
 
     <th>Points</th> 
 
     <th>Points</th> 
 
     <th>LONG ONE</th> 
 
     <th>Points</th> 
 
     <th>Points</th> 
 
     <th>Points</th> 
 
     <th>Points</th> 
 
     <th>Points</th> 
 
     <th>Points</th> 
 
    </tr> 
 
    <tr> 
 
     <td>50</td> 
 
     <td>50</td> 
 
     <td>50</td> 
 
     <td>This wİll be longer so you can see the difference i hope</td> 
 
     <td>50</td> 
 
     <td>50</td> 
 
     <td>50</td> 
 
     <td>50</td> 
 
     <td>50</td> 
 
     <td>50</td> 
 
    </tr> 
 
    <tr> 
 
     <td>94</td> 
 
     <td>94</td> 
 
     <td>94</td> 
 
     <td>94</td> 
 
     <td>94</td> 
 
     <td>94</td> 
 
     <td>94</td> 
 
     <td>94</td> 
 
     <td>94</td> 
 
     <td>94</td> 
 
    </tr> 
 
    <tr> 
 
     <td>67</td> 
 
     <td>67</td> 
 
     <td>67</td> 
 
     <td>67</td> 
 
     <td>67</td> 
 
     <td>67</td> 
 
     <td>67</td> 
 
     <td>67</td> 
 
     <td>67</td> 
 
     <td>67</td> 
 
    </tr> 
 
    </table> 
 
</div> 
 

 
</body> 
 
</html>

출처

2017-09-05 14:44:06

을 시도 할 것입니다. 이런 식으로 왜 작동하는지 설명해 주시겠습니까? LONG ONE 열이 남겨진 공간을 사용해야한다는 것을 명시 적으로 선언하는 규칙은 보이지 않지만 다른 열은 적응해야합니다. 다시 죄송합니다. –

html 테이블 열 크기

답변

관련 문제