내 웹 페이지에 절반의 테두리 만 넣을 테이블이 있습니다.html 테이블의 반쪽 테두리
예 :
내가 가진 테이블 :
이A | B | C
| |
A | B | C
| |
A | B | C
참고 :
이td { padding-bottom: 5%; }
td#B { border-left: 1px solid black; border-right: 1px solid black}
/* Assuming alphabets A , B and C are ids of each td */
내가 원하는 표 :
A | B | C
A | B | C
A | B | C
가 어떻게 이것을 달성 할 수 ?
나는 테이블의 json 데이터베이스에서 데이터를 표시하기 위해 angularjs 'ng-repeat을 사용하고 있습니다. 대신 td에 스타일을 적용
작은 테이블 속성에 패딩을 tr
에 적용하고 제거하려고합니다. 테이블의 CSS에서이 CSS를 사용 :
table {
border-collapse: separate;
border-spacing: 0 2em;
}
작업은 니펫을 :
table {
border-collapse: separate;
border-spacing: 0 2em;
}
td {
border-right: 1px solid #000;
padding: 0 10px;
}
tr td:last-child {
border-right: 0px solid #000;
}<table>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>트릭을 할 수있는 td
tr {
margin: 10px 0;
display: block;
}
실전을 표시하려면 스 니펫을 설정해야합니다. –
당신은 tr 또는 border-spacing에 여분의 경계를 사용할 수 있습니다.
:
또한
table {
/* demo purpose mainly */
float:left;
margin:1em;
background:lightgray;
box-shadow: 0 0 0 2px green;;
}
.bdtr {
border-collapse:collapse;
}
td {padding:0 1em;}
td + td {
border-left:1px solid;
}
.bdtr tr + tr{
border-top:1em lightgray solid; /* use background-color */
}
.bdtd {
border-spacing:0 1em;
margin:0 1em;
}<table class="bdtr">
<caption>border on tr</caption>
<tr>
<td>A</td><td>B</td><td>C</td>
</tr>
<tr>
<td>A</td><td>B</td><td>C</td>
</tr>
<tr>
<td>A</td><td>B</td><td>C</td>
</tr>
</table>
<table class="bdtd">
<caption> border-spacing</caption>
<tr>
<td>A</td><td>B</td><td>C</td>
</tr>
<tr>
<td>A</td><td>B</td><td>C</td>
</tr>
<tr>
<td>A</td><td>B</td><td>C</td>
</tr>
</table>.bdtr {
border-collapse: collapse;
}
td {
padding: 0 1em;
}
.bdtr.bis {
background: linear-gradient(60deg, gray, yellow, purple, pink, lime);
}
.bdtr.bis tr+tr {
border-top: 1em transparent solid;
}
.bdtr.bis tr td+td {
border: none;/* reset from previous demo */
box-shadow: inset 2px 0;
}<table class="bdtr bis">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>
스택 오버플로에 오신 것을 환영합니다! 코드 도움말을 찾는 질문에는 ** 자체적으로 ** [** Stack Snippet **] (https://blog.stackoverflow.com/2014/09/introducing-runnable)에 질문을 ** ** 재현하는 데 필요한 가장 짧은 코드가 포함되어야합니다. -javascript-css-and-html-code-snippets /). [** 최소, 완전하고 검증 가능한 예제를 만드는 방법 **] (http://stackoverflow.com/help/mcve) –
패딩 대신 여백 사용 – Pete
패딩 대신 투명 테두리를 추가해보십시오. 질문에 스 니펫이나 HTML/CSS 코드를 설정하여 수행 한 작업과 실패한 작업을 표시하십시오. –