CSS 셀 여백
내 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>
경고 : 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가 공간입니다.
시도해보십시오 padding-right. margin셀 사이 에 's 를 넣을 수 없습니다 .
<table>
<tr>
<td style="padding-right: 10px;">one</td>
<td>two</td>
</tr>
</table>
사용 국경 붕괴 : 분리; 테이블의 측면이 아닌 테이블 셀 사이에 여백 만 필요하기 때문에 나를 위해 작동하지 않았습니다.
다음 해결책을 찾았습니다.
- 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>You can't single out individual columns in a cell in that manner. In my opinion, your best option is to add a style='padding-left:10px' on the second column and apply the styles on an internal div or element. This way you can achieve the illusion of a greater space.
If you have control of the width of the table, insert a padding-left on all table cells and insert a negative margin-left on the whole table.
table {
margin-left: -20px;
width: 720px;
}
table td {
padding-left: 20px;
}
Note, the width of the table needs to include the padding/margin width. Using the above as an example, the visual width of the table will be 700px.
This is not the best solution if you're using borders on your table cells.
SOLUTION
I found the best way to solving this problem was a combination of trial and error and reading what was written before me:
As you can see I have some pretty tricky stuff going on... but the main kicker of getting this to looking good are:
PARENT ELEMENT (UL): border-collapse: separate; border-spacing: .25em; margin-left: -.25em;
CHILD ELEMENTS (LI): display: table-cell; vertical-align: middle;
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; }
Following Cian's solution of setting a border in place of a margin, I discovered you can set border color to transparent to avoid having to color match the background. Works in FF17, IE9, Chrome v23. Seems like a decent solution provided you don't also need an actual border.
<!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>Using padding is not correct way of doing it, it may change the look but it is not what you wanted. This may solve your issue.
You can use both of them:
padding-right:10px;
padding-right:10%;
But it's better to use with %.
If padding isn't working for you, another work around is to add extra columns and set a margin via width using <colgroup>. None of the padding solutions above were working for me as I was trying to give the cell border itself a margin, and this is what solved the problem in the end:
<table>
<colgroup>
<col>
<col width="20px">
<col>
</colgroup>
<tr>
<td>data</td>
<td></td>
<td>more data</td>
</tr>
</table>
Style the borders of the table cells using :nth-child so that the 2nd and third columns appear to be a single column.
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; }
참고URL : https://stackoverflow.com/questions/716442/css-cell-margin
'IT박스' 카테고리의 다른 글
| SQL Server에서 한 달의 일 수를 확인하는 방법은 무엇입니까? (0) | 2020.09.15 |
|---|---|
| 상태 배열로 푸시하는 올바른 방법 (0) | 2020.09.15 |
| C #에서 어제와 내일 datetime을 얻는 방법 (0) | 2020.09.15 |
| 내비게이션 컨트롤러에서 한 번에 두 개의 뷰를 팝업하는 방법 (0) | 2020.09.15 |
| 요청 매개 변수 '_csrf'또는 헤더 'X-CSRF-TOKEN'에서 유효하지 않은 CSRF 토큰 'null'이 발견되었습니다. (0) | 2020.09.14 |