어떻게 여러 HTML 테이블을 동일한 열 너비로 만들 수 있습니까

Question

여러 HTML 테이블이 있습니다. 각 테이블의 열 수는 같지만 각 셀의 데이터 집합이 다릅니다.

<table><tr> 
    <td>Col 1 Table 1</td> 
    <td>Col 2 Table 1</td> 
    <td>Col 3 Table 1</td> 
</tr></table> 

<table><tr> 
    <td>Col 1 Table 2</td> 
    <td>Col 2 Table 2</td> 
    <td>Col 3 Table 2</td> 
</tr></table> 

은 정말 모든 테이블의 완벽 줄을 같은 폭이 테이블 (등 각각의 첫 번째 열, 각각의 두 번째 열)에 걸쳐 각 비교 열이 될 수있는 가장 쉬운 방법을 알아낼 싶었어요.

몇 가지 구체적인 이유 때문에이 테이블을 단일 테이블로 병합 할 수 없기 때문에 여러 테이블을 가지고 있는지 확인하고 싶습니다.

셀에있는 데이터를 기반으로 표가 변경된 것처럼 보입니다.

제안 사항?

Answer 1

.

CSS

.column-1 { 
    width: 100px; 
} 
.column-2 { 
    width: 300px; 
} 
.column-3 { 
    width: 225px; 
} 

HTML

<table><tr> 
    <td class="column-1">Col 1 Table 1</td> 
    <td class="column-2">Col 2 Table 1</td> 
    <td class="column-3">Col 3 Table 1</td> 
</tr></table> 

<table><tr> 
    <td class="column-1">Col 1 Table 2</td> 
    <td class="column-2">Col 2 Table 2</td> 
    <td class="column-3">Col 3 Table 2</td> 
</tr></table> 

당신은 또한 HTML 당신의 양을 줄일 것이다 이것을 달성하기 위해 n 번째 자식 선택기를 사용할 수있는 CSS3를 사용하여 고급 스러움이있는 경우 쓸 필요가있어.

Answer 2

나는 css 당신이 할 수 있다고 확신합니다 :

td { width: 200px } 

Answer 3

작동해야 <td> 요소에 폭을 고정 적용. 작동하지 않는 경우, 지정한 스타일을 덮어 쓰는 스타일이 있거나 CSS에 구문 오류가있을 수 있습니다. 단위 (예 : px, em)를 잊어 버렸습니까? Firebug (또는 유사한 도구)를 사용하여 적용/재정의되는 스타일을 결정하십시오. 이 코드베이스에 대한 가능한 경우 나도 몰라

td { 
    width: 200px; 
} 

하지만, 또 다른 옵션은 여러 <tbody> 요소를 하나의 테이블을 지정하는 것입니다 : 일반적으로이 비슷한 작업을해야합니다. 이와 같이 :

<table> 

<tbody><tr> 
    <td>Col 1 Table 1</td> 
    <td>Col 2 Table 1</td> 
    <td>Col 3 Table 1</td> 
</tr></tbody> 

<tbody><tr> 
    <td>Col 1 Table 2</td> 
    <td>Col 2 Table 2</td> 
    <td>Col 3 Table 2</td> 
</tr></tbody> 

</table> 

두 테이블 사이에 나타나는 마크 업은 큰 테이블의 일부 여야합니다. 하나의 행과 하나의 셀만 포함하는 세 번째 <tbody> 요소에 내용을 배치 할 수 있습니다. 다시 말하지만, 여러분의 코드베이스가이 리팩토링에 얼마나 도움이 될지 잘 모르겠지만, 옵션으로 사용하고 있습니다.

Answer 4

테이블로드 후 자바 스크립트를 사용해보십시오.

Answer 5

어떻게 CSS 스타일링을 사용합니까? 각 테이블의 첫 번째 행에있는 셀에 고정 너비를 설정해야합니다..

<table> 
    <tr> 
    <td style="width:100px"></td> 
    <td style="width:120px"></td> 
</tr> 
<tr> 
    <td></td> 
    <td></td> 
</tr> 
</table> 

편집 : 그것은 물론 더 나은 CSS 클래스를 사용하려면,하지만 당신은 당신을 위해 작동하는지 당신이 볼 일단 것을 변경할 수 있습니다.

<table> 
    <tr> 
    <td class="c1"></td> 
    <td class="c2"></td> 
</tr> 
<tr> 
    <td></td> 
    <td></td> 
</tr> 
</table> 
<!-- ... --> 
<table> 
    <tr> 
    <td class="c1"></td> 
    <td class="c2"></td> 
</tr> 
<tr> 
    <td></td> 
    <td></td> 
</tr> 
</table> 

등 나는 그것의 '자신의 클래스와 각 열을 제공하는 것이 가장 유연성을