문제

HTML 문서에는 두 개의 열과 여러 행이있는 테이블이 있습니다. CSS를 사용하여 첫 번째 열과 두 번째 열 사이의 공간을 어떻게 늘릴 수 있습니까? "마진 오른쪽 : 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 }

그리고 이것은 당신의 HTML 일 것입니다, Sans CSS! :

<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세포 사이.

<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>

그런 식으로 셀에서 개별 열을 단독으로 만들 수 없습니다. 내 생각에, 당신의 최선의 선택은 style='padding-left:10px' 두 번째 열에서 내부 DIV 또는 요소에 스타일을 적용하십시오. 이렇게하면 더 큰 공간의 환상을 달성 할 수 있습니다.

테이블의 너비를 제어 할 경우 모든 테이블 셀에 왼쪽 왼쪽을 삽입하고 전체 테이블에 음수 마진 왼쪽을 삽입하십시오.

table {
    margin-left: -20px;
    width: 720px;
}

table td {
    padding-left: 20px;
}

테이블의 너비에는 패딩/마진 너비가 포함되어야합니다. 위의 예를 사용하여 테이블의 시각적 폭은 700px입니다.

테이블 셀에 테이블 셀을 사용하는 경우 가장 좋은 솔루션이 아닙니다.

해결책

이 문제를 해결하는 가장 좋은 방법은 시행 착오의 조합과 나 앞에 쓰여진 내용을 읽는 것입니다.

http://jsfiddle.net/mg4hd/


보시다시피 나는 꽤 까다로운 일이 일어나고 있습니다 ...하지만 이것을 좋아하는 주제는 다음과 같습니다.

부모 요소 (UL) : Border-Collapse : 별도; 국경 간격 : .25EM; 마진 왼쪽 : -.25EM;
어린이 요소 (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; }

마진 대신 테두리를 설정하는 Cian의 솔루션에 따라, 나는 당신이 배경과 색상을 일치시키지 않도록 테두리 색상을 투명하게 설정할 수 있음을 발견했습니다. FF17, IE9, Chrome v23에서 작동합니다. 실제 테두리가 필요하지 않으면 괜찮은 해결책처럼 보입니다.

<!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; }
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top