테이블에서 두 행 사이의 공간?
CSS를 통해 가능합니까?
노력하고있어
tr.classname {
border-spacing: 5em;
}
아무 소용이 없습니다. 내가 뭔가 잘못하고있는 것일까?
td요소에 패딩을 사용해야 합니다. 이와 같은 것이 트릭을 수행해야합니다. 물론 하단 패딩 대신 상단 패딩을 사용하여 동일한 결과를 얻을 수 있습니다.
아래 CSS 코드에서보다 큼 기호는 패딩이 클래스가있는 요소의 td직접적인 하위 요소 인 요소 에만 적용됨을 의미합니다 . 이렇게하면 중첩 된 테이블을 사용할 수 있습니다. (예제 코드의 셀 C 및 D.) 직접 자식 선택기 (IE 6를 생각해보십시오)에 대한 브라우저 지원에 대해 확신 할 수는 없지만 최신 브라우저에서 코드를 깨서는 안됩니다.trspaceUnder
/* 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를 사용하여 스페이서 행에 특정 높이와 투명한 배경을 제공하십시오.
border-spacing CSS 속성은 인접한 셀의 테두리 사이의 거리를 지정합니다 (분리 된 테두리 모델에만 해당). 이는 프리젠 테이션 HTML의 cellspacing 속성과 동일 하지만 선택적 두 번째 값을 사용하여 다른 수평 및 수직 간격을 설정할 수 있습니다.
그 마지막 부분은 종종 감독됩니다. 예:
.your-table {
border-collapse: separate; /* allow spacing between cell borders */
border-spacing: 0 5px; /* NOTE: syntax is <horizontal value> <vertical value> */
최신 정보
이제 OP가 특정 개별 행이 간격을 늘리기를 원한다는 것을 이해합니다. tbody의미를 망치지 않고이를 수행하는 요소 로 설정을 추가했습니다 . 그러나 모든 브라우저에서 지원되는지 확실하지 않습니다. Chrome에서 만들었습니다.
아래 예는 테이블이 별도의 행으로 존재하는 것처럼 보이게 만드는 방법을 보여주기위한 것입니다. 또한 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; }
You can't change the margin of a table cell. But you CAN change the padding. Change the padding of the TD, which will make the cell larger and push the text away from the side with the increased padding. If you have border lines, however, it still won't be exactly what you want.
You need to set border-collapse: separate; on the table; most browser default stylesheets start at border-collapse: collapse;, which ditches border spacing.
Also, border-spacing: goes on the TD, not the TR.
Try:
<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>
Ok, you can do
tr.classname td {background-color:red; border-bottom: 5em solid white}
Make sure the background color is set on the td rather than the row. This should work across most browsers... (Chrome, ie & ff tested)
You can use line-height in the table:
<table style="width: 400px; line-height:50px;">
Take a look at the border-collapse: separate attribute (default) and the border-spacing property.
First, you have to seperate them with border-collapse, then you can define the space between columns and rows with border-spacing .
Both of these CSS properties are actually well-supported on every browser, see here.
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 {
display: block;
margin-bottom: 5px;
}
A too late answer :)
If you apply float to tr elements, you can space between two rows with margin attribute.
table tr{
float: left
width: 100%;
}
tr.classname {
margin-bottom:5px;
}
For creating an illusion of spacing between rows, apply background color to row and then create a thick border with white color so that a "space" is created :)
tr
{
background-color: #FFD700;
border: 10px solid white;
}
The correct way to give spacing for tables is to use cellpadding and cellspacing e.g.
<table cellpadding="4">
I stumbled upon this while struggling with a similar issue. I've found Varun Natraaj's answer to be quite helpful, but I would use a transparent border instead.
td { border: 1em solid transparent; }
Transparent borders still have width.
Works for most latest browsers in 2015. Simple solution. It doesn't work for transparent, but unlike Thoronwen's answer, I can't get transparent to render with any size.
tr {
border-bottom:5em solid white;
}
Simply put div inside the td and set the following styles of div:
margin-bottom: 20px;
height: 40px;
float: left;
width: 100%;
I realize this is an answer to an old thread and may not be the solution requested, but while all the suggested solutions did not do what I needed, this solution worked for me.
I had 2 table cells, one with background color, the other with a border color. The above solutions remove the border, so the cell on the right would appear to be floating in mid-air. The solution that did the trick was to replace the table, tr and td with divs and corresponding classes: table would be div id="table_replacer", tr would be div class="tr_replacer" and td would be div class="td_replacer" (change closing tags to divs as well obviously)
To get the solution for my problem the css is:
#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;}
Hope this helps someone.
You can fill the <td/> elements with <div/> elements, and apply any margin to those divs that you like. For a visual space between the rows, you can use a repeating background image on the <tr/> element. (This was the solution I just used today, and it appears to work in both IE6 and FireFox 3, though I didn't test it any further.)
Also, if you're averse to modifying your server code to put <div/>s inside the <td/>s, you can use jQuery (or something similar) to dynamically wrap the <td/> contents in a <div/>, enabling you to apply the CSS as desired.
Or just add a blank with the height of the margin in between the rows you would like to add the spacing
Here's a simple and elegant solution, with a few caveats:
- You can't actually make the gaps transparent, you need to give them a specific color.
- You can't round the corners of the borders above & below the gaps
- You need to know the padding and borders of your table cells
With that in mind, try this:
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 */
}
What you're actually doing is sticking a rectangular ::before block into the top of all the cells in the row you want preceded by a gap. These blocks stick out of the cells a bit to overlap the existing borders, hiding them. These blocks are just a top and bottom border sandwiched together: The top border forms the gap, and the bottom border re-creates the appearance of the cells' original top border.
Note that if you have a border around the table itself as well as the cells, you'll need to further increase the horizontal -ve margin of of your 'blocks'. So for a 4px table border, you'd instead use:
margin:-5px -12px 5px; /* 14px = original 10px + 2px for 'uncollapsed' part of table border */
And if your table uses border-collapse:separate instead of border-collapse:collapse, then you'll need to (a) use the full table border width:
margin:-5px -14px 5px; /* 14px = original 10px + 4px full width of table border */
... and also (b) replace the double-width of border that now needs to appear below the gap:
border-bottom:4px solid blue; /* i.e. 4px = cell top border + previous row's bottom border */
The technique is easily adapted to a .gapafter version, if you prefer, or to creating vertical (column) gaps instead of row gaps.
Here's a codepen where you can see it in action: https://codepen.io/anon/pen/agqPpW
Here this works smoothly:
#myOwnTable td { padding: 6px 0 6px 0;}
I suppose you could work out a more finely-grained layout by specifying which td if need be.
doing this shown above...
table tr{ float: left width: 100%; } tr.classname { margin-bottom:5px; }
removes vertical column alignment so be careful how you use it
Have you tried:
tr.classname { margin-bottom:5em; }
Alternatively, each td can be adjusted as well:
td.classname { margin-bottom:5em; }
or
td.classname { padding-bottom:5em; }
참고URL : https://stackoverflow.com/questions/351058/space-between-two-rows-in-a-table
'Development Tip' 카테고리의 다른 글
| 피아노 키보드를 컴퓨터 키보드로 사용 (0) | 2020.09.29 |
|---|---|
| 색상이 다른 표준 Android 버튼 (0) | 2020.09.29 |
| Swift for 루프 : 인덱스, 배열 요소? (0) | 2020.09.29 |
| APK 파일의 리버스 엔지니어링을 피하는 방법은 무엇입니까? (0) | 2020.09.29 |
| GNU Makefile 변수 할당 =,? =, : = 및 + =의 차이점은 무엇입니까? (0) | 2020.09.29 |