원하는 방식으로 테이블의 크기를 조정할 수있는 방법이 있는지 궁금합니다. 하나의 열만 가변 크기를 가질 수있는 X 열이있는 테이블을 갖고 싶습니다. 다른 열은 최소 너비를 유지하면서 크기에 적응해야합니다. EX.html 테이블 열 크기
| Col0 | Col1 | Col 2 | Col3 | Col4 | Col5 |
| dat1 | d | dat3dater | datadata | datatdatadatadata | dat |
| | dat2 | asdasd | datad | datadatadatad.....| |
이 경우 2 번 칸은 나머지 공간을 사용하고 나머지 1 명은 내용에 맞게 조정됩니다.
가장 단순한 양식 지정 방법은 무엇입니까?
반응이 빠른 디자인처럼 들리 네요. 프레임 워크를 사용하거나 간단한 예를 사용하여 원하는대로 뒤틀 수 있습니다.
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>을 시도 할 것입니다. 이런 식으로 왜 작동하는지 설명해 주시겠습니까? LONG ONE 열이 남겨진 공간을 사용해야한다는 것을 명시 적으로 선언하는 규칙은 보이지 않지만 다른 열은 적응해야합니다. 다시 죄송합니다. –
나는 예상대로이 작동 stacktable.js – Brian