검색 및 검색했지만 내 요구 사항에 대한 솔루션을 찾을 수 없습니다.
평범한 HTML 테이블이 있습니다. 나는 이미지 나 JS 를 사용 하지 않고 , 즉 순수한 CSS만을 사용 하지 않고 둥근 모서리를 원합니다 . 이렇게 :
모서리 셀의 경우 둥근 모서리, 셀의 경우 1px두꺼운 테두리.
지금까지 나는 이것을 가지고있다 :
table {
-moz-border-radius: 5px !important;
border-collapse: collapse !important;
border: none !important;
}
table th,
table td {
border: none !important
}
table th:first-child {
-moz-border-radius: 5px 0 0 0 !important;
}
table th:last-child {
-moz-border-radius: 0 5px 0 0 !important;
}
table tr:last-child td:first-child {
-moz-border-radius: 0 0 0 5px !important;
}
table tr:last-child td:last-child {
-moz-border-radius: 0 0 5px 0 !important;
}
table tr:hover td {
background-color: #ddd !important
}
그러나 그것은 세포에 대한 경계가 없습니다. 테두리를 추가하면 둥글 지 않습니다!
해결책이 있습니까?
답변
별도의 테두리가있는 FF 및 Chrome (다른 테스트를 수행하지 않음)에서 잘 작동하는 것 같습니다. http://jsfiddle.net/7veZQ/3/
편집 : 스케치의 비교적 깔끔한 구현은 다음과 같습니다.
table {
border-collapse:separate;
border:solid black 1px;
border-radius:6px;
-moz-border-radius:6px;
}
td, th {
border-left:solid black 1px;
border-top:solid black 1px;
}
th {
background-color: blue;
border-top: none;
}
td:first-child, th:first-child {
border-left: none;
}<table>
<thead>
<tr>
<th>blah</th>
<th>fwee</th>
<th>spoon</th>
</tr>
</thead>
<tr>
<td>blah</td>
<td>fwee</td>
<td>spoon</td>
</tr>
<tr>
<td>blah</td>
<td>fwee</td>
<td>spoon</td>
</tr>
</table>답변
저에게는 Twitter Bootstrap 솔루션 이 좋아 보입니다. IE <9 (IE 8 이하에서는 둥근 모서리 없음)는 제외하지만, 웹 애플리케이션을 개발한다면 괜찮다고 생각합니다.
CSS / HTML :
table {
border: 1px solid #ddd;
border-collapse: separate;
border-left: 0;
border-radius: 4px;
border-spacing: 0px;
}
thead {
display: table-header-group;
vertical-align: middle;
border-color: inherit;
border-collapse: separate;
}
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
th, td {
padding: 5px 4px 6px 4px;
text-align: left;
vertical-align: top;
border-left: 1px solid #ddd;
}
td {
border-top: 1px solid #ddd;
}
thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child {
border-radius: 4px 0 0 0;
}
thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child {
border-radius: 0 0 0 4px;
}<table>
<thead>
<tr><th>xxx</th><th>xxx</th><th>xxx</th></tr>
</thead>
<tbody>
<tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
<tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
<tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
<tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
<tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
</tbody>
</table>여기에서 재생할 수 있습니다 (jsFiddle에서)
답변
첫째, -moz-border-radius모든 브라우저를 지원하려는 경우 그 이상이 필요 합니다. border-radius다음과 같이 plain을 포함한 모든 변형을 지정해야 합니다.
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
둘째, 질문에 직접 답하기 위해 border-radius실제로 테두리를 표시하지 않습니다. 모서리가있는 경우 테두리의 모서리 모양을 설정합니다.
테두리를 켜서 둥근 모서리를 얻으 border려면 td및 th요소 에 대한 속성 도 필요합니다 .
td, th {
border:solid black 1px;
}
배경색 (또는 그래픽)이있는 경우에도 둥근 모서리가 표시됩니다. 물론 둥근 모서리를 테두리없이 표시하려면 주변 요소와 다른 배경색이어야합니다.
일부 구형 브라우저는 border-radius표 / 표 셀을 배치 하는 것을 좋아하지 않는다는 점은 주목할 가치가 있습니다. <div>각 셀 내부에 넣고 스타일을 지정하는 것이 좋습니다. 그러나 이것은 모든 브라우저의 현재 버전에 영향을 미치지 않아야합니다 (둥근 모서리를 전혀 지원하지 않는 IE 제외-아래 참조)
마지막으로 IE가 전혀 지원하지 않는다는 것은 아닙니다 border-radius(IE9 베타는 지원 하지만 대부분의 IE 사용자는 IE8 이하를 사용합니다). 테두리 반경을 지원하기 위해 IE를 해킹하려면 http://css3pie.com/ 을 참조 하십시오.
[편집하다]
좋아요,이게 저를 괴롭 혔습니다. 그래서 몇 가지 테스트를했습니다.
여기 내가 가지고 놀았 던 JSFiddle 예제가 있습니다.
놓친 중요한 것이 border-collapse:separate;테이블 요소에있는 것 같습니다. 이렇게하면 셀이 테두리를 서로 연결하지 못하여 테두리 반경을 선택할 수 있습니다.
도움이 되었기를 바랍니다.
답변
선택한 답변은 끔찍합니다. 코너 테이블 셀을 대상으로하고 해당 테두리 반경을 적용하여이를 구현합니다.
상단 모서리를 얻으려면 th 요소 유형의 첫 번째 및 마지막에 테두리 반경을 설정 한 다음 tr 유형의 마지막에 td 유형 의 마지막 및 첫 번째 테두리 반경을 설정 하여 하단 모서리를 가져옵니다.
th:first-of-type {
border-top-left-radius: 10px;
}
th:last-of-type {
border-top-right-radius: 10px;
}
tr:last-of-type td:first-of-type {
border-bottom-left-radius: 10px;
}
tr:last-of-type td:last-of-type {
border-bottom-right-radius: 10px;
}
답변
IE <9에 대한 둥근 모서리 및 기타 CSS3 동작에 대해 찾은 최상의 솔루션은 http://css3pie.com/ 에서 찾을 수 있습니다 .
플러그인을 다운로드하고 솔루션 구조의 디렉토리에 복사하십시오. 그런 다음 스타일 시트에 동작 태그가 있는지 확인하여 플러그인을 가져옵니다.
내 테이블에 둥근 모서리, 색상 그라디언트 및 상자 그림자를 제공하는 내 프로젝트의 간단한 예 :
.table-canvas
{
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
overflow:hidden;
border-radius: 10px;
-pie-background: linear-gradient(#ece9d8, #E5ECD8);
box-shadow: #666 0px 2px 3px;
behavior: url(Include/PIE.htc);
overflow: hidden;
}
Visual Studio CSS intellisense가 알 수없는 속성에 대해 녹색 밑줄을 제공하더라도 걱정하지 마십시오. 실행해도 여전히 작동합니다. 일부 요소는 명확하게 문서화되지 않았지만 예제는 특히 첫 페이지에서 꽤 좋습니다.
답변
개인적인 경험을 통해 순수한 CSS로 HTML 테이블 셀의 모서리를 둥글게 할 수 없다는 것을 알게되었습니다 . 테이블의 가장 바깥 쪽 테두리를 둥글게 할 수 있습니다.
이 자습서에 설명 된대로 이미지를 사용해야합니다.
답변
약간 거칠지 만 여기에 CSS와 HTML로만 구성된 것이 있습니다.
- 둥근 바깥 쪽 모서리
- 헤더 행
- 여러 데이터 행
이 예제는 또한 :hover각 데이터 셀에 대해 의사 클래스를 사용합니다 <td>. 요소는 필요에 맞게 쉽게 업데이트 할 수 있으며 마우스 오버를 빠르게 비활성화 할 수 있습니다.
(그러나 나는 아직 :hover전체 행에 대해 제대로 작동 <tr>하지 못했습니다. 마지막으로 마우스를 올려 놓은 행은 하단에 둥근 모서리가 표시되지 않습니다. 간과되는 간단한 것이 있다고 확신합니다.)
table.dltrc {
width: 95%;
border-collapse: separate;
border-spacing: 0px;
border: solid black 2px;
border-radius: 8px;
}
tr.dlheader {
text-align: center;
font-weight: bold;
border-left: solid black 1px;
padding: 2px
}
td.dlheader {
background: #d9d9d9;
text-align: center;
font-weight: bold;
border-left: solid black 1px;
border-radius: 0px;
padding: 2px
}
tr.dlinfo,
td.dlinfo {
text-align: center;
border-left: solid black 1px;
border-top: solid black 1px;
padding: 2px
}
td.dlinfo:first-child,
td.dlheader:first-child {
border-left: none;
}
td.dlheader:first-child {
border-radius: 5px 0 0 0;
}
td.dlheader:last-child {
border-radius: 0 5px 0 0;
}
/*===== hover effects =====*/
/*tr.hover01:hover,
tr.hover02:hover {
background-color: #dde6ee;
}*/
/* === ROW HOVER === */
/*tr.hover02:hover:last-child {
background-color: #dde6ee;
border-radius: 0 0 6px 6px;
}*/
/* === CELL HOVER === */
td.hover01:hover {
background-color: #dde6ee;
}
td.hover02:hover {
background-color: #dde6ee;
}
td.hover02:first-child {
border-radius: 0 0 0 6px;
}
td.hover02:last-child {
border-radius: 0 0 6px 0;
}<body style="background:white">
<br>
<center>
<table class="dltrc" style="background:none">
<tbody>
<tr class="dlheader">
<td class="dlheader">Subject</td>
<td class="dlheader">Title</td>
<td class="dlheader">Format</td>
</tr>
<tr class="dlinfo hover01">
<td class="dlinfo hover01">One</td>
<td class="dlinfo hover01">Two</td>
<td class="dlinfo hover01">Three</td>
</tr>
<tr class="dlinfo hover01">
<td class="dlinfo hover01">Four</td>
<td class="dlinfo hover01">Five</td>
<td class="dlinfo hover01">Six</td>
</tr>
<tr class="dlinfo hover01">
<td class="dlinfo hover01">Seven</td>
<td class="dlinfo hover01">Eight</td>
<td class="dlinfo hover01">Nine</td>
</tr>
<tr class="dlinfo2 hover02">
<td class="dlinfo hover02">Ten</td>
<td class="dlinfo hover01">Eleven</td>
<td class="dlinfo hover02">Twelve</td>
</tr>
</tbody>
</table>
</center>
</body>