CSS 및 HTML 표 - 간격/패딩/경계선 문제 (확실하지 않음)

Question

저는이 문제에 상당히 익숙하며 답변에 대한 검색을 시도했지만 찾은 모든 제안에는없는 것으로 보입니다. 무엇이든지 효력을 발휘한다.

기본적으로 HTML - 2 행의 표가 있는데, 첫 번째 행에는 단 하나의 셀 (제목)이 있고 두 번째 행에는 3 개의 셀이 있습니다. | 나는

제목 1 행 2

---

에서 세 개의 세포를 분리하는 얇은 테두리가있을 싶어 2 | 3

---

이와 비슷합니다. 나는 기본적으로 그것을 얻었지만, 2는 왼쪽의 라인에 대해 평평하고, 거기에는 약간의 간격이 필요하다.

나는 시도했다 :

이

cellspacing : 10px이
국경에서 오른쪽 패딩합니다 (TD 태그에) : 10px
국경 간격 : 10px

없음이 하나가 될 것으로 보이지 않는다 내가 원한다면 ...

수동으로 셀의 너비를 조정했는데, 상단은 600px이고, 아래의 세 가지는 각각 200px입니다.

아이디어가 있으십니까?

Answer 1

선택기를 사용하여 텍스트 정렬 & 테두리를 선택할 수 있습니다. 테두리를 설정하려면

<table class=foo> 
    <tr><th colspan=3>Heading 
    <tr><td>1<td>2<td>3 
</table> 

같은 http://jsfiddle.net/A85rn/

tr td {text-align:center;border-left:solid;border-right:solid;width:2em;} 
tr td:first-of-type {text-align:left;border:none} 
tr td:last-of-type {text-align:right;border:none;} 

Answer 2

내가 있으리라 믿고있어 마크 업, 당신은 처음 두 td 요소에 오른쪽 테두리를 설정할 수 있습니다. 테두리와 셀 내용 사이의 간격을 설정하려면 td 요소에 가로 채우기를 설정하십시오. 왼쪽 및 오른쪽 패딩 (좌우 대칭)을 모두 설정하는 것이 자연 스럽지만 원하는대로 조정할 수 있습니다. 예 스타일 시트 :

.foo td { 
    padding: 0 0.3em; 
    border-right: solid 1px; 
} 
.foo td:last-child { 
    border-right: none; 
} 

jsfiddle