테이블에서 두 줄 사이의 간격?
CSS를 통해 가능한가요?
난 노력하고 있어.
tr.classname {
border-spacing: 5em;
}
헛수고다.내가 뭘 잘못하고 있는 거 아니야?
은 패딩으로 요.td 거 요.패딩이 해도 같은 수 물론 하단 패딩 대신 상단 패딩을 사용하여 동일한 결과를 얻을 수 있습니다.
큰이 CSS에만 합니다.td에게 전달되는 tr " " " " "spaceUnder 、 [ C D에서는 셀 C 및 D).('셀 C' D).다이렉트 아이 셀렉터에 대한 브라우저 지원(IE 6 생각)에 대해서는 잘 모르겠습니다만, 최신 브라우저에서는 코드를 해독할 수 없습니다.
/* Apply padding to td elements that are direct children of the tr elements with class spaceUnder. */
tr.spaceUnder>td {
padding-bottom: 1em;
}<table>
<tbody>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr class="spaceUnder">
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td>F</td>
</tr>
</tbody>
</table>이것은 다음과 같이 표시됩니다.
+---+---+
| A | B |
+---+---+
| C | D |
| | |
+---+---+
| E | F |
+---+---+
상위 테이블에서 설정을 시도합니다.
border-collapse: separate;
border-spacing: 5em;
그리고 경계 선언을 하고 원하는 효과를 얻을 수 있는지 확인합니다.단, IE는 "분리된 경계" 모델을 지원하지 않습니다.
데이터가 있는 ID 앨범이 있는 테이블이 있습니다...trs와 tds를 생략했습니다.
<table id="albums" cellspacing="0">
</table>
css:
table#albums
{
border-collapse:separate;
border-spacing:0 5px;
}
테이블 뒤에 배경화면이 있으니까 흰색 패딩으로 속이면 안 돼요.각 콘텐츠 행 사이에 빈 행을 넣기로 했습니다.
<tr class="spacer"><td></td></tr>
그런 다음 css를 사용하여 스페이서 행에 일정한 높이와 투명한 배경을 지정합니다.
경계 간격 CSS 속성은 인접한 셀 경계 사이의 거리를 지정합니다(분리된 경계 모델에 한함).이것은 프레젠테이션 HTML의 셀스페이스 속성과 동일하지만, 옵션의 두 번째 값을 사용하여 다른 수평 및 수직 간격을 설정할 수 있습니다.
그 마지막 부분은 종종 감독된다.예:
.your-table {
border-collapse: separate; /* allow spacing between cell borders */
border-spacing: 0 5px; /* NOTE: syntax is <horizontal value> <vertical value> */
갱신하다
이제 OP에서 특정 개별 행의 간격을 늘려야 한다는 것을 이해했습니다.업업가 with with with with with with with with with를 추가했습니다.tbody의미론을 망치지 않고 이를 달성할 수 있는 요소입니다.그러나 모든 브라우저에서 지원되는지는 잘 모르겠습니다.롬으크
다음 예시는 테이블이 다른 행으로 되어 있는 것처럼 보이게 하는 방법을 보여 줍니다.css sweety는 풀 블로우입니다.에 '어울리지 않다'를 붙여서 띄어쓰기도 했어요.tbody아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아!
지원 알림: IE8+, Chrome, Firefox, Safari, Opera 4+
.spacing-table {
font-family: 'Helvetica', 'Arial', sans-serif;
font-size: 15px;
border-collapse: separate;
table-layout: fixed;
width: 80%;
border-spacing: 0 5px; /* this is the ultimate fix */
}
.spacing-table th {
text-align: left;
padding: 5px 15px;
}
.spacing-table td {
border-width: 3px 0;
width: 50%;
border-color: darkred;
border-style: solid;
background-color: red;
color: white;
padding: 5px 15px;
}
.spacing-table td:first-child {
border-left-width: 3px;
border-radius: 5px 0 0 5px;
}
.spacing-table td:last-child {
border-right-width: 3px;
border-radius: 0 5px 5px 0;
}
.spacing-table thead {
display: table;
table-layout: fixed;
width: 100%;
}
.spacing-table tbody {
display: table;
table-layout: fixed;
width: 100%;
border-spacing: 0 10px;
}<table class="spacing-table">
<thead>
<tr>
<th>Lead singer</th>
<th>Band</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bono</td>
<td>U2</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Chris Martin</td>
<td>Coldplay</td>
</tr>
<tr>
<td>Mick Jagger</td>
<td>Rolling Stones</td>
</tr>
<tr>
<td>John Lennon</td>
<td>The Beatles</td>
</tr>
</tbody>
</table>구분 행을 추가할 수 있습니다.
html:
<tr class="separator" />
css:
table tr.separator { height: 10px; }
테이블 셀의 여백은 변경할 수 없습니다.하지만 패딩은 변경할 수 있습니다.TD의 패딩을 변경합니다. 그러면 셀이 커지고 패딩이 늘어난 쪽에서 텍스트가 밀립니다.그러나 경계선이 있는 경우에도 원하는 대로 되지 않습니다.
border-collapse: 개별 속성(기본값)과 border-spacing 속성을 확인합니다.
먼저 border-collapse로 구분해야 합니다.다음으로 border-spacing으로 열과 행 사이의 공간을 정의할 수 있습니다.
이들 CSS 속성은 모두 실제로 모든 브라우저에서 잘 지원됩니다.여기를 참조해 주십시오.
table {border-collapse: separate; border-spacing: 10px 20px;}
table,
table td,
table th {border: 1px solid black;}<table>
<tr>
<td>Some text - 1</td>
<td>Some text - 1</td>
</tr>
<tr>
<td>Some text - 2</td>
<td>Some text - 2</td>
</tr>
<tr>
<td>Some text - 3</td>
<td>Some text - 3</td>
</tr>
</table>그래, 넌 할 수 있어
tr.classname td {background-color:red; border-bottom: 5em solid white}
배경색이 행이 아닌 td로 설정되어 있는지 확인합니다.이 기능은 대부분의 브라우저에서 작동합니다.(크롬, 즉 테스트 완료)
설정해야 요.border-collapse: separate;위: 는 " " " 로 합니다.border-collapse: collapse;테두리 간격을 도랑으로 만듭니다.
border-spacing는 border-spacing: 에 .TD 「」입니다.TR
시험:
<html><head><style type="text/css">
#ex { border-collapse: separate; }
#ex td { border-spacing: 1em; }
</style></head><body>
<table id="ex"><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>
</body>
테이블에서 회선 높이를 사용할 수 있습니다.
<table style="width: 400px; line-height:50px;">
tr {
display: block;
margin-bottom: 5px;
}
답변이 너무 늦었습니다:)
에 하면 ★★★★★★★★★★★★★★★★★★★.tr줄 할 수 있습니다.margin여하하다
table tr{
float: left
width: 100%;
}
tr.classname {
margin-bottom:5px;
}
행간 간격 착각을 일으키려면 행에 배경색을 적용한 다음 흰색으로 두꺼운 테두리를 만들어 "공간"을 만듭니다.
tr
{
background-color: #FFD700;
border: 10px solid white;
}
비슷한 문제로 고민하다가 우연히 발견했어요.나는 Varun Natraj의 대답이 꽤 도움이 된다는 것을 알았지만, 대신 투명한 테두리를 사용할 것이다.
td { border: 1em solid transparent; }
투명한 테두리에는 여전히 폭이 있습니다.
표의 간격을 올바르게 지정하는 방법은 예를 들어 셀패딩과 셀스페이스를 사용하는 것입니다.
<table cellpadding="4">
2015년 대부분의 최신 브라우저에서 작동합니다.심플한 솔루션투명하게 할 수는 없지만, Thoronwen의 답변과 달리 어떤 크기로도 렌더링 할 수 없습니다.
tr {
border-bottom:5em solid white;
}
table { border-collapse: separate; border-spacing: 0 1em; }
은 가 best best best장 best음음음음 、 best 、 음 、 best 、 best 、 best 、 best best 。<td> a height★★★★
<td height="50" colspan="2"></td>
것은, 을 .colspan 여기 있습니다.
다음 예제에서는 테이블이 녹색이고tdheight속성은 노란색입니다.
<table style="background-color: green">
<tr>
<td>
<span>Lorem</span>
</td>
<td>
<span>Ipsum</span>
</td>
</tr>
<tr>
<td height="50" colspan="2" style="background-color: yellow"></td>
</tr>
<tr>
<td>
<span>Sit</span>
</td>
<td>
<span>Amet</span>
</td>
</tr>
</table> 말하면, ★★★★★★★★★★★★★★★★★★.div내 the의 td 다음 해 주세요.div:
margin-bottom: 20px;
height: 40px;
float: left;
width: 100%;
테이블 위에서 다음과 같은 작업을 수행할 수 있습니다.
table {
border-collapse: separate;
border-spacing: 0 15px;
}
table selective: 모든 테이블이 선택되므로 단일 테이블을 선택할 경우에도 동일하게 할 수 있습니다.
<table class="res">
</table>
위의 html에서는 다음과 같이 할 수 있습니다.특정 테이블에 대해서는 필요에 따라 다음 방법을 사용할 수 있습니다.
.res {
border-collapse: separate;
border-spacing: 0 15px;
}
참고 자료: https://www.w3docs.com/snippets/css/how-to-create-space-between-rows-in-the-table.html
<td/> 요소를 <div/> 요소로 채우고 원하는 div에 여백을 적용할 수 있습니다.행간의 시각적인 공간에 대해서는,<tr/>요소의 배경 이미지를 반복해 사용할 수 있습니다(이것은 오늘 사용한 솔루션이며, IE6 와 FireFox 3 의 양쪽 모두에서 동작하고 있는 것 같습니다만, 그 이상은 테스트하지 않았습니다).
또한 <td/> 안에 <div/>를 삽입하도록 서버 코드를 변경하는 것을 싫어하는 경우 jQuery(또는 이와 유사한 것)를 사용하여 <td/> 콘텐츠를 동적으로 <div/>로 랩하여 필요에 따라 CSS를 적용할 수 있습니다.
이것이 오래된 스레드에 대한 답변이며 요청된 솔루션이 아닐 수 있다는 것을 알고 있습니다.그러나 제안된 솔루션이 모두 필요한 기능을 하지 못했지만 이 솔루션은 저에게 효과가 있었습니다.
테이블 셀이 2개 있었는데 하나는 배경색이고 다른 하나는 테두리 색이었습니다.위의 솔루션에서는 테두리가 제거되므로 오른쪽 셀이 공중에 떠 있는 것처럼 보입니다.해결방법은 이 시스템을 교체하는 것이었습니다.table,tr ★★★★★★★★★★★★★★★★★」td및클래스 포함: 은 div가 .div id="table_replacer"은 , trs입니다.div class="tr_replacer" td는 td가 .div class="td_replacer" (div로 바꿉니다)
문제의 해결책을 얻으려면 css는 다음과 같이 하십시오.
#table_replacer{display:table;}
.tr_replacer {border: 1px solid #123456;margin-bottom: 5px;}/*DO NOT USE display:table-row! It will destroy the border and the margin*/
.td_replacer{display:table-cell;}
이게 도움이 됐으면 좋겠네요.
은 다음 하는 수 . 즉,, 음 음 、 , 、 음 、 , 、 can 、 can 、 can 、 can 、 can 、 can 、 can can can 。border-bottom:solid white 5px;
스크린샷을 작성하기 위한 코드는 다음과 같습니다.
<style>
table.class1 {
text-align:center;
border-spacing:0 0px;
font-family:Calibri, sans-serif;
}
table.class1 tr:first-child {
background-color:#F8F8F8; /* header row color */
}
table.class1 tr > td {
/* firefox has a problem rounding the bottom corners if the entire row is colored */
/* hence the color is applied to each cell */
background-color:#BDE5F8;
}
table.class1 th {
border:solid #A6A6A6 1px;
border-bottom-width:0px; /* otherwise borders are doubled-up */
border-right-width:0px;
padding:5px;
}
table.class1 th:first-child {
border-radius: 5px 0 0 0;
}
table.class1 th.last {
border-right-width:1px;
border-radius: 0 5px 0 0;
}
/* round the bottom corners */
table.class1 tr:last-child > td:first-child {
border-radius: 0 0 0 5px;
}
table.class1 tr:last-child > td:last-child {
border-radius: 0 0 5px 0;
}
/* put a line at the start of each new group */
td.newgroup {
border-top:solid #AAA 1px;
}
/* this has to match the parent element background-color */
/* increase or decrease the amount of space by changing 5px */
td.endgroup {
border-bottom:solid white 5px;
}
</style>
<table class="class1">
<tr><th>Group</th><th>Item</th><th class="last">Row</th></tr>
<tr><td class="newgroup endgroup">G-1</td><td class="newgroup endgroup">a1</td><td class="newgroup endgroup">1</td></tr>
<tr><td class="newgroup">G-2</td><td class="newgroup">b1</td><td class="newgroup">2</td></tr>
<tr><td>G-2</td><td>b2</td><td>3</td></tr>
<tr><td class="endgroup">G-2</td><td class="endgroup">b3</td><td class="endgroup">4</td></tr>
<tr><td class="newgroup">G-3</td><td class="newgroup">c1</td><td class="newgroup">5</td></tr>
<tr><td>G-3</td><td>c2</td><td>6</td></tr>
</table>
.table {
border-collapse: separate;
border-spacing: 0 1rem;
}
이것은 테이블 사이에 세로 여백을 두는 것이 좋습니다.참고 자료: https://www.w3docs.com/snippets/css/how-to-create-space-between-rows-in-the-table.html
display:gridgrid-gap.
테이블을 작성하는 최신 솔루션은 CSS 그리드 또는 플렉스박스를 사용하는 것입니다.
행과 열 사이에 공백을 추가하려면 다음을 사용할 수 있습니다.grid-gap: [vertical] [horizontal].
'두껍거나 테두리'를방지하기 0을 붙이면 .margin: -1px셀 스타일링에 맞춰야 합니다.주의할 점: 테두리와 그리드 갭이 모두 0인 경우에만 이 해킹이 필요합니다.
my-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px 0px;
}
my-item {
border: 2px solid #c60965;
background: #ffc000;
color: #c60965;
margin: -1px;
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
}<my-grid>
<my-item>1</my-item>
<my-item>2</my-item>
<my-item>3</my-item>
<my-item>4</my-item>
<my-item>5</my-item>
</my-grid>열 사이의 간격은 동일한 방법으로 확보됩니다.예를 들어 열 사이의 20px 공간과 행 간의 10px 공간은 다음 구문을 사용하여 수행합니다.grid-gap: 10px 20px;.
행/열 내부 공간은 패딩으로 확보할 수 있습니다.
조정 가능한 데모
아래는 인터랙티브 데모입니다.이 데모에서는 그리드갭, 패딩 및 온/오프 마진 해크를 조정하여 변경 사항을 확인할 수 있습니다.
보너스: 이러한 동작을 위해 삽입해야 할 코드를 하단에 찾을 수 있습니다(그리드갭, 패딩 및 마진 해킹 관련).
<style>my-grid{display: grid; grid-template-columns: 1fr 1fr;}my-item{border: 2px solid #c60965; background: #ffc000; color: #c60965; margin: -1px; font-size: 20px; display: flex;}cus{font-family:Menlo; display:block; padding:7px; margin-top: 20px; border:3px dotted grey; border-radius:20px; font-size:14px;}set{display:flex; align-items:center;}dev-grid{display:grid; grid-template-columns: 1fr 1fr; margin:5px;}.hack{transform: scale(1.3); margin-top:13px; margin-left:5px;}txt:last-of-type{display:inline-block; margin-top:10px;}d{display:block; margin-top:10px; font-family: Menlo;}pre{padding:10px; background:rgb(246,246,246);}</style><my-grid> <my-item>Cell number one</my-item> <my-item>Cell number two</my-item> <my-item>Cell number three</my-item> <my-item>Cell number four</my-item> <my-item>Cell number five</my-item></my-grid><cus><dev-grid><txt>Space between rows:</txt><input type="range" min="0" max="20" value="0"><txt>Space between cols:</txt><input type="range" min="0" max="20" value="0"><txt>Padding (rows)</txt><input type="range" min="0" max="20" value="0"><txt>Padding (cols):</txt><input type="range" min="0" max="20" value="0"><txt>Margin hack:</txt><label> <input class="hack" type="checkbox" checked> <tt>on</tt></label></dev-grid></cus><d>Code to implement this:</d><pre></pre><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script>var values=[0,0,0,0],hack=0,props={grid:{dis:"display:grid;",cols:"grid-template-columns: 1fr 1fr;"},item:{}};function drawProps(){grid_props=Object.values(props.grid).map(p=>` ${p}`).join("\n"),item_props=Object.values(props.item).map(p=>` ${p}`).join("\n"),all_code=`my-grid{\n${grid_props}\n}`,""!=item_props&&(all_code+=`\nmy-item{\n${item_props}\n}`),$("pre").text(all_code)}props.item.hack="margin: -1px;",drawProps(),$("input[type=range]").on("input",function(){ind=($(this).index()-1)/2,values[ind]=$(this).val(),$("my-grid").css("grid-gap",`${values[0]}px ${values[1]}px`),$("my-item").css("padding",`${values[2]}px ${values[3]}px ${values[2]}px ${values[3]}px`),code_grid=`grid-gap: ${values[0]}px ${values[1]}px;`,values[0]==values[1]&&(code_grid=`grid-gap: ${values[0]}px;`,0==values[0]&&(code_grid="")),code_padding=`padding: ${values[2]}px ${values[3]}px ${values[2]}px ${values[3]}px;`,values[2]==values[3]&&(code_padding=`padding: ${values[2]}px;`,0==values[2]&&(code_padding="")),props.grid.gap=code_grid,props.item.padding=code_padding,""==props.grid.gap&&delete props.grid.gap,""==props.item.padding&&delete props.item.padding,drawProps()}),$(".hack").change(function(){hack=$(this).is(":checked"),st=hack?"on":"off",$("tt").text(st),hack?(props.item.hack="margin: -1px;",$("my-item").css("margin","-1px")):(props.item.hack&&delete props.item.hack,$("my-item").css("margin","0px")),drawProps()});</script>다음은 심플하고 우아한 솔루션으로 몇 가지 주의사항을 제시하겠습니다.
- 갭을 투명하게 할 수는 없지만 특정 색상을 지정해야 합니다.
- 틈새 위아래 테두리의 모서리를 둥글게 할 수 없습니다.
- 테이블 셀의 패딩과 테두리를 알아야 합니다.
이 점을 염두에 두고 다음을 시도해 보십시오.
td {padding:5px 8px;border:2px solid blue;background:#E0E0E0} /* lets say the cells all have this padding and border, and the gaps should be white */
tr.gapbefore td {overflow:visible}
tr.gapbefore td::before,
tr.gapbefore th::before
{
content:"";
display:block;
position:relative;
z-index:1;
width:auto;
height:0;
padding:0;
margin:-5px -10px 5px; /* 5px = cell top padding, 10px = (cell side padding)+(cell side border width)+(table side border width) */
border-top:16px solid white; /* the size & color of the gap you want */
border-bottom:2px solid blue; /* this replaces the cell's top border, so should be the same as that. DOUBLE IT if using border-collapse:separate */
}
입니다.::before행에 있는 모든 셀의 맨 위에 공백이 있는 블록이 표시됩니다.이러한 블록은 셀에서 약간 튀어나와 기존 테두리와 겹쳐 숨깁니다.이러한 블록은 상단과 하단의 테두리를 함께 끼운 것입니다.위쪽 테두리가 간격을 형성하고 아래쪽 테두리가 셀의 원래 위쪽 테두리 모양을 재현합니다.
셀뿐만 아니라 테이블 주위에 테두리가 있는 경우 '블록'의 수평방향 여백을 더 늘려야 합니다.따라서 4px 테이블 테두리의 경우 대신 다음을 사용합니다.
margin:-5px -12px 5px; /* 14px = original 10px + 2px for 'uncollapsed' part of table border */
에서 '우리'가 사용되고 border-collapse:separateborder-collapse:collapse (의 테두리 너비 (a) ㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴ)
margin:-5px -14px 5px; /* 14px = original 10px + 4px full width of table border */
... 및 (b) 간격 아래에 표시되어야 하는 테두리의 배폭을 바꿉니다.
border-bottom:4px solid blue; /* i.e. 4px = cell top border + previous row's bottom border */
이 기술은 원하는 경우 .gapafter 버전에 쉽게 적응하거나 행 간격 대신 수직(열) 간격을 만들 수 있습니다.
동작하고 있는 코데펜을 소개합니다.https://codepen.io/anon/pen/agqPpW
여기서는 원활하게 동작합니다.
#myOwnTable td { padding: 6px 0 6px 0;}
필요에 따라 td를 지정함으로써 보다 세밀한 레이아웃을 작성할 수 있을 것 같습니다.
위에 나온 것처럼...
table tr{ float: left width: 100%; } tr.classname { margin-bottom:5px; }
수직 기둥 정렬을 제거하므로 사용 방법에 주의하십시오.
시도해 보셨습니까?
tr.classname { margin-bottom:5em; }
또는 다음과 같이 각 td를 조정할 수도 있다.
td.classname { margin-bottom:5em; }
또는
td.classname { padding-bottom:5em; }
언급URL : https://stackoverflow.com/questions/351058/space-between-two-rows-in-a-table
'programing' 카테고리의 다른 글
| python에서 openpyxl을 사용하여 새로운 세포에 쓰는 방법 (0) | 2023.04.23 |
|---|---|
| 목록의 dicts에서 dict로/dict 목록 (0) | 2023.04.23 |
| Linux 쉘 스크립트에 새 행을 삽입하려면 어떻게 해야 합니다. (0) | 2023.04.23 |
| Windows 명령줄에서 응용 프로그램 종료 코드를 가져오려면 어떻게 해야 합니까? (0) | 2023.04.23 |
| IIS7.5의 정적 파일 핸들러가 스크립트를 처리하지 않음 (0) | 2023.04.23 |