반응형
같은 너비의 열 만들기
같은 너비의 열을 만드는 방법은 무엇입니까?
열 수를 동적으로 변경합니다.
오늘은 13 개의 열이 있습니다. 내일은 16 경주가 될 것입니다. 모두는 특별히 재 계산을 원하지 않습니다.
나는 이것이 트릭을 할 것이라고 생각합니다.
table{
table-layout: fixed;
width: 300px;
}
테이블과 동일한 다음 속성을 사용하고 완전히 동적입니다.
ul {
width: 100%;
display: table;
table-layout: fixed; /* optional, for equal spacing */
border-collapse: collapse;
}
li {
display: table-cell;
text-align: center;
border: 1px solid pink;
vertical-align: middle;
}
<ul>
<li>foo<br>foo</li>
<li>barbarbarbarbar</li>
<li>baz klxjgkldjklg </li>
<li>baz</li>
<li>baz lds.jklklds</li>
</ul>
문제를 해결할 수 있습니다.
HTML 테이블 에서 발견 : 열의 너비를 동일하게 유지
스타일 테이블 레이아웃을 설정하는 경우 : 고정; 테이블에서 브라우저의 자동 열 크기 조정을 재정의 할 수 있습니다. 그런 다음 브라우저는 표의 첫 번째 행에있는 셀 너비를 기준으로 열 너비를 설정합니다. 으로 변경하고 그 내부를 제거한 다음에서 셀의 고정 너비를 설정하십시오.
참조 URL : https://stackoverflow.com/questions/20375288/make-columns-of-equal-width-in-table
반응형
'IT Share you' 카테고리의 다른 글
HAML에서 요소의 인라인 스타일을 설정하는 방법 (0) | 2021.01.06 |
---|---|
임시 테이블의 구조 (예 : SQL 스크립트 생성) 가져 오기 및 현재 인스턴스에 대한 임시 테이블 지우기 (0) | 2021.01.06 |
Twitter Bootstrap 열이 올바르게 정렬되지 않음 (0) | 2021.01.06 |
dyld : 라이브러리가로드되지 않음 : @rpath with iOS8 (0) | 2021.01.06 |
NumPy의 transpose () 메서드는 배열의 축을 어떻게 변경합니까? (0) | 2021.01.06 |