테이블 행이 정렬되지 않음

Question

다음 피들에 두 개의 테이블이 있습니다. 행이 머리글에 맞춰지지 않습니다. 이것은 첫 번째 테이블에 대한 내 코드입니다.

<table class=" table-bordered"> 
    <tr> 
     <th>Doc Name:</th> 
     <th>Atom Type:</th> 
     <th>Cluster Method:</th> 
     <th>k:</th> 
     <th> 
      <small>Stylistic Feature(s):</small> 
     </th> 
    </tr> 
    <tr> 
     <td style="font-size: 10px;">rowling_and_dickens</td> 
     <td style="font-size: 10px;">sentence</td> 
     <td style="font-size: 10px;">kmeans</td> 
     <td style="font-size: 10px;">2</td> 
     <td style="font-size: 10px;">hapax_dislegomena;honore_r_measure;hapax_legomena;</td> 
    </tr> 
</table> 

다른 테이블은 비슷한 패턴을 따릅니다. 나는 공간이 부족하기 때문에 여기에 추가하지 않을 것이다.

https://jsfiddle.net/fk6fnto4/

내 테이블 행에 상관없이 내가 뭘 제대로 정렬되지되지 않습니다. 많은 솔루션을 살펴본 결과 코드를 수정하여 아무 소용이 없었습니다. 여기에 잘못된 점을 알려주십시오.

Answer 1

열 내용을 정렬하려면 너비를 고정해야합니다. 현재 각 셀에는 필요한만큼의 공간이 필요합니다. 첫 번째 열은 가장 작은 너비를 가져야하고 세 번째 열은 가장 넓어야합니다. 다른 열은 모두 5 자리 숫자를 포함하므로 같은 너비가 될 수 있습니다. 다른 td 폭을 설정하려면 우리는 각각 다른 클래스를 사용할 수 있지만 지저분한 될 수있다, 그래서 우리는 다음과 같습니다 nth-child() 선택 사용할 것이다

이

td:nth-child(1) { 
    width: 10% 
} 

이 첫 번째 자식 모든 td 요소의 폭을 설정을 부모의 10 % 당신이해야 할 것은 다음과 같습니다 귀하의 스타일이 추가됩니다 이것이 의미하는 것은 최초의 열은 tbody 폭의 10 %를 차지한다는 것입니다

<style> 
    .container { 
    margin-left: 0; 
    } 

    tbody { 
    display: block; 
    max-height: 500px; 
    overflow-y: scroll; 
    } 

    thead, 
    tbody tr { 
    display: table; 
    width: 100%; 
    } 

    thead { 
    width: 100%; 
    } 

    table { 
    width: 200px; 
    } 

    td:nth-child(1) { 
    width:10% 
    } 

    td:nth-child(3) { 
    width:30% 
    } 

</style> 

, 세 번째는 30 %를 차지합니다

하고, 다른 사람들은 각각 20 %를 사용합니다. 그러나 가변 길이의 데이터도 포함 할 수 있다면 비슷한 규칙을 추가해야합니다.

이렇게하면 열 내용이 가운데 정렬됩니다. 다른 정렬을 설정하려면 text-align 속성을 사용하십시오.