내 HTML 문서에는 두 개의 열과 여러 행이있는 테이블이 있습니다. CSS로 첫 번째 열과 두 번째 열 사이의 공간을 어떻게 늘릴 수 있습니까? "margin-right : 10px;"를 적용 해 보았습니다. 왼쪽에있는 각 셀에 적용되지만 효과는 없습니다.
답변:
이것을 첫 번째에 적용하십시오 <td>.
padding-right:10px;HTML 예 :
<table>
<tr>
<td style="padding-right:10px">data</td>
<td>more data</td>
</tr>
</table>border-collapse: separate( separate위 의 철자에 오타가 있음 )
border-spacing: 5px;
border-spacing또한 행 사이에 공간을 추가합니다. 안타깝게도 수직 및 수평 간격에 대한 별도의 속성이 없습니다.
border-spacing두 개의 인수를 취합니다. 하나는 수평이고 다른 하나는 수직입니다.
경고 한 마디 : padding-right특정 (시각적) 문제를 해결할 수는 있지만 테이블 셀 사이 에 간격을 추가하는 올바른 방법은 아닙니다 . 무엇 padding-right셀 위해하는 것은 대부분의 다른 요소에 대해 무엇을 유사합니다 : 그것은 공간을 추가 내 셀. 셀에 테두리 나 배경색 또는 게임을 방해하는 다른 것이 없으면 셀 사이의 공간을 설정하는 효과를 모방 할 수 있지만 그렇지 않은 경우에는 그렇지 않습니다.
누군가 언급했듯이 테이블 셀에 대한 여백 사양은 무시됩니다.
CSS 2.1 사양 – 표 – 표 내용의 시각적 레이아웃
내부 테이블 요소는 내용과 테두리가있는 직사각형 상자를 생성합니다. 셀에도 패딩이 있습니다. 내부 테이블 요소에는 여백이 없습니다.
그렇다면 "올바른"방법은 무엇입니까? cellspacing테이블 의 속성 을 바꾸려는 경우 border-spacing( border-collapse비활성화 됨)이 대체입니다. 그러나 셀당 "여백"이 필요한 경우 CSS를 사용하여 어떻게 올바르게 달성 할 수 있는지 잘 모르겠습니다. 내가 생각할 수있는 유일한 해킹 padding은 위와 같이 사용 하고 셀 스타일 (배경색, 테두리 등)을 피하고 대신 셀 내부의 컨테이너 DIV를 사용하여 이러한 스타일을 구현하는 것입니다.
저는 CSS 전문가가 아니므로 위의 내용이 틀릴 수도 있습니다 (알아두면 좋을 것입니다! 저도 표 셀 여백 CSS 솔루션을 원합니다).
건배!
패딩을 사용할 수없는 경우 (예 : td에 테두리가 있음) 다음을 시도하십시오.
table {
border-collapse: separate;
border-spacing: 2px;
}이 작업이 상당히 뒤늦다는 것을 알고 있지만 기록을 위해 CSS 선택기를 사용하여이를 수행 할 수도 있습니다 (인라인 스타일이 필요하지 않음).이 CSS는 모든 행의 첫 번째 열에 패딩을 적용합니다.
table > tr > td:first-child { padding-right:10px }그리고 이것은 CSS가 아닌 HTML이 될 것입니다! :
<table><tr><td>data</td><td>more data</td></tr></table>이것은 특히 CSS로 많은 특정 서식을 수행해야하는 경우 훨씬 더 우아한 마크 업을 허용합니다.
간단하게 할 수 있습니다.
<html>
<table>
<tr>
<td>one</td>
<td width="10px"></td>
<td>two</td>
</tr>
</table>
</html>CSS가 필요하지 않습니다. :)이 10px가 공간입니다.
사용 국경 붕괴 : 분리; 테이블의 측면이 아닌 테이블 셀 사이에 여백 만 필요하기 때문에 나를 위해 작동하지 않았습니다.
다음 해결책을 찾았습니다.
- CSS
.tableDiv{
display: table;
}
.cellSeperator {
display: table-cell;
width: 20px;
}
.cell1 {
display: table-cell;
width: 200px;
}
.cell2 {
display: table-cell;
width: 50px;
}- HTML
<div class="tableDiv">
<div class="cell1"></div>
<div class="cellSeperator"></div>
<div class="cell2"></div>
</div>이 솔루션의 작업은 td'모두 그 필요성이야 border와 padding스타일링에 대한합니다.
(Chrome 32, IE 11, Firefox 25에서 테스트 됨)
CSS:
table {border-collapse: separate; border-spacing:0; } /* separate needed */
td { display: inline-block; width: 33% } /* Firefox need inline-block + width */
td { position: relative } /* needed to make td move */
td { left: 10px; } /* push all 10px */
td:first-child { left: 0px; } /* move back first 10px */
td:nth-child(3) { left: 20px; } /* push 3:rd another extra 10px */
/* to support older browsers we need a class on the td's we want to push
td.col1 { left: 0px; }
td.col2 { left: 10px; }
td.col3 { left: 20px; }
*/
HTML:
<table>
<tr>
<td class='col1'>Player</td>
<td class='col2'>Result</td>
<td class='col3'>Average</td>
</tr>
</table>2016 년 업데이트
Firefox는 이제 inline-block세트 없이 지원합니다.width
table {border-collapse: separate; border-spacing:0; }
td { position: relative; padding: 5px; }
td { left: 10px; }
td:first-child { left: 0px; }
td:nth-child(3) { left: 20px; }
td { border: 1px solid gray; }
/* CSS table */
.table {display: table; }
.tr { display: table-row; }
.td { display: table-cell; }
.table { border-collapse: separate; border-spacing:0; }
.td { position: relative; padding: 5px; }
.td { left: 10px; }
.td:first-child { left: 0px; }
.td:nth-child(3) { left: 20px; }
.td { border: 1px solid gray; }<table>
<tr>
<td>Player</td>
<td>Result</td>
<td>Average</td>
</tr>
</table>
<div class="table">
<div class="tr">
<div class="td">Player</div>
<div class="td">Result</div>
<div class="td">Average</div>
</div>
</div>이 문제를 해결하는 가장 좋은 방법은 시행 착오를 조합하고 이전에 작성된 내용을 읽는 것입니다.
보시다시피 꽤 까다로운 일이 진행 중입니다 ...하지만 이것을 좋아 보이게하는 주요 키커는 다음과 같습니다.
부모 요소 (UL) : 국경 붕괴 : 분리; 테두리 간격 : .25em; 여백-왼쪽 : -.25em;
CHILD ELEMENTS (LI) : 디스플레이 : 테이블 셀; 수직 정렬 : 중간;
HTML
<ul>
<li><span class="large">3</span>yr</li>
<li>in<br>stall</li>
<li><span class="large">9</span>x<span class="large">5</span></li>
<li>on<br>site</li>
<li>globe</li>
<li>back<br>to hp</li>
</ul>CSS
ul { border: none !important; border-collapse: separate; border-spacing: .25em; margin: 0 0 0 -.25em; }
li { background: #767676 !important; display: table-cell; vertical-align: middle; position: relative; border-radius: 5px 0; text-align: center; color: white; padding: 0 !important; font-size: .65em; width: 4em; height: 3em; padding: .25em !important; line-height: .9; text-transform: uppercase; }<!DOCTYPE html>
<html>
<head>
<style>
table{
border-spacing: 16px 4px;
}
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>패딩을 사용하는 것은 올바른 방법이 아니며 모양이 변경 될 수 있지만 원하는 것이 아닙니다. 이렇게하면 문제가 해결 될 수 있습니다.
둘 다 사용할 수 있습니다.
padding-right:10px;
padding-right:10%;그러나 % 와 함께 사용하는 것이 좋습니다 .
%
패딩이 작동하지 않는 경우 다른 해결 방법은 추가 열을 추가하고을 사용하여 너비를 통해 여백을 설정하는 것 <colgroup>입니다. 위의 패딩 솔루션 중 어느 것도 셀 테두리 자체에 여백을 주려고 할 때 저에게 효과가 없었으며 이것이 결국 문제를 해결했습니다.
<table>
<colgroup>
<col>
<col width="20px">
<col>
</colgroup>
<tr>
<td>data</td>
<td></td>
<td>more data</td>
</tr>
</table>두 번째 및 세 번째 열이 단일 열로 표시되도록 : nth-child를 사용하여 표 셀의 테두리 스타일을 지정합니다.
table tr td:nth-child(2) { border: 1px solid black; border-right:0; }
table tr td:nth-child(3) { border: 1px solid black; border-left:0; }