단일 열의 셀 간격 만 변경

Question

단일 열에서만 셀 간격을 변경하는 방법이 있습니까? html 또는 css에서 가능합니까?

Answer 1

내가 찾은 그 사용하여 다음 :

CSS : 테이블 내

.flag {padding-left:8px;} 

HTML :

<td class="flag"> 

날 한 열 사이에 간격 문제를 해결할 수있었습니다.

Answer 2

두 개의 열이있는 테이블이 있고 열 중 하나를 50 % 대신 너비의 100 %로 만들려면 td 태그의 colspan 속성을 사용하십시오. 당신이 넓은 부여 할 collumn 일부 CSS를 적용하는 경우는 아주 쉽게 그 자체를 해결해야

<table border="1"> 
    <tr> 
    <th>Month</th> 
    <th>Savings</th> 
    </tr> 
    <tr> 
    <td>January</td> 
    <td>$100</td> 
    </tr> 
    <tr> 
    <td>February</td> 
    <td>$100</td> 
    </tr> 
    <tr> 
    <td colspan="2">Sum: $180</td> 
    </tr> 
</table> 

Answer 3

을 (나는 화 내지 않는, W3 스쿨에서 빠른 테이블을 복사).

<table> 
    <tr> 
     <td></td> 
     <td id="extra_width"></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
</table> 

그리고 CSS에서 당신은 당신이 collumn에서 원하는 스타일 적용 : 실제로, 첫 번째 행의 중간에 테이블 셀에 너비를 적용하면

#extra_width {padding-left: 10px; padding-right: 10px;} 

내가 생각을 어떤 행에서도 작동합니다. 동일한 열의 셀은 상속되거나 적어도 해당 셀과 동일한 너비를 갖습니다.

패딩이나 여백을 원한다면 질문을 던지기 만하면됩니다. 두 테이블의 결과에 대해서는 확신이 없습니다. 이것에 대한

Answer 4

좋은 규칙은 다음과 같습니다

HTML :

<table border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td class="large-padding">Row 1, Col 1</td> 
    <td>Row 1, Col 2</td> 
    <td>Row 1, Col 3</td> 
    </tr> 
    <tr> 
    <td class="large-padding">Row 2, Col 1</td> 
    <td>Row 2, Col 2</td> 
    <td>Row 2, Col 3</td> 
    </tr> 
    <tr> 
    <td class="large-padding">Row 3, Col 1</td> 
    <td>Row 3, Col 2</td> 
    <td>Row 3, Col 3</td> 
    </tr> 
</table> 

CSS :

/* Used for all table cells */ 
td { 
    padding: 10px; 
} 

/* Used for all table cells with the class large-padding, used on the first cell of every row (the first column */ 
.large-padding { 
    padding: 10px 20px; /* 10px for top and bottom to keep inline with the other cells, 20px for left and right */ 
} 

나는 그 잘 설명 바랍니다. 이렇게하면 셀의 패딩을보다 잘 제어 할 수 있습니다. 여백을 사용하여 셀 사이의 간격을 조정합니다. 모든 행의 첫 번째 td에 css 클래스를 적용하면이 클래스가 테이블의 첫 번째 열이됩니다.

Answer 5

아니요, HTML 특성 cellspacing과 해당 CSS의 border-spacing은 모두 전체 테이블에만 적용됩니다. 테두리가 사용되지 않고 배경이 문제가되지 않으면 패딩을 사용하여 패딩을 사용하여 동일한 효과를 얻을 수 있습니다. 그러나 테이블의 셀 경계선 사이의 간격은 테이블 내에서 불가피하게 균일합니다.

가짜 셀을 사용하면 문제를 해결할 수 있습니다. 셀에 테두리를 설정하는 대신 셀 안에 테두리가있는 컨테이너에 테두리를 설정하십시오. 그런 다음 셀의 여백은 셀 테두리 사이의 간격처럼 보입니다.