CSS 테이블 스타일
https://stackoverflow.com/questions/284475
-
08-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
둥근 모서리를 갖도록 테이블을 스타일링해야합니다.
나는 그것에 대해 최선을 다하는 방법을 찾고 있습니다.
일반적으로 둥근 모서리를 갖도록 DIV를 스타일링 할 때 상단과 하단에 빈 주석이있는 2 개의 div를 사용하고 크기 및 배경 이미지 CSS를 적용합니다.
그러나 테이블에는 내부 경계가 있으므로 실제 셀 테두리와 일치하도록 코너 BG 이미지의 수직선을 조심스럽게 정렬해야합니다.
지금까지 이것이 명확합니까?
그래서 나는 다른 사람들이 어떻게 이것에 접근 할 것인지 궁금했습니다. 내가 할 수있는 최선의 방법은 하나의 완전한 고정 크기 배경 이미지, 테두리 및 모든 것을 사용하고 위에 테두리가없는 테이블을 오버레이하는 것입니다. 테이블은 결국 항상 같은 크기입니다.
누구든지 더 나은 방법을 생각할 수 있습니까?
해결책
테두리가 아닌 모서리로 배경 이미지를 만드는 것이 좋습니다. 코너 백지 이미지를 사용해야한다는 것을 정의하려면 왼쪽 상단, 오른쪽 상단, 오른쪽, 왼쪽 하단 및 오른쪽 하단에 클래스를 적용하십시오.
CSS와 함께 국경을 꾸미십시오. 배경 이미지에 넣지 마십시오.
당신의 접근 방식에서, 당신은 항상 당신의 배경 이미지에 세로선이 실제 테이블 셀의 경계와 일치하지 않게되게 될 것입니다.
다른 팁
25 가지 방법 .... http://www.cssjuice.com/25-lounded-corners-techniques-with-csss/
실제로, 그것을 할 수있는 방법은 너무 많습니다.
당신은 시도 했습니까? http://www.roundedcornr.com/?
이렇게하는 일 ...
XHTML : (미안한 첫 번째 '<'를 제거해야했는데 정상적으로 게시 할 수 없으므로이 Jeff를 수정하십시오!)
table id="pricing" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Incoming calls</th>
<th>National calls</th>
<th>Calls to US & Canada</th>
<th>Calls to other Phones</th>
<th>Calls to other Countries</th>
<th>SMS text messages</th>
</tr>
</thead>
<tbody>
<tr>
<td>Select</td>
<td>country</td>
<td>from</td>
<td>dropdown</td>
<td>list</td>
<td>above</td>
</tr>
</tbody>
</table>
CSS : #Pricing {font-weight : Bold; 텍스트 정렬 : 센터}
#pricing thead
{
background-image:url("images/pricing_top.gif");
background-position:top;
background-repeat:no-repeat;
padding:10px 0 0 /* replace 10px with the height of pricing_top.gif */
}
#pricing th
{
background-image:url("images/pricing_header_bg.gif");
background-repeat:repeat-y;
border-bottom:1px solid #c3c2c2;
width:100px /* replace 100px with the width of pricing_header_bg.gif */
}
#pricing tbody
{
background-image:url("images/pricing_bottom.gif");
background-position:bottom;
background-repeat:no-repeat;
padding:0 0 10px /* replace 10px with the height of pricing_bottom.gif */
}
#pricing td
{
background-image:url("images/pricing_cell_bg.gif");
background-repeat:repeat-y;
width:100px /* replace 100px with the width of pricing_cell_bg.gif */
}
단점만으로는 4 개의 이미지를 만들어야하지만 너무 오래 걸리지 않아야한다는 것입니다. 또한 오른쪽에 그 섀도우를 추가하려면 각 행의 최종 셀에 클래스를 추가하고 그에 따라 배경 이미지 및 너비 속성을 변경하려면 변경해야합니다.
원래 아이디어에서 재생하면 각 코너 셀에 클래스를 추가하여 각각의 불쾌한 경계를 효과적으로 끕니다. 그런 다음 전체 폭 배경 이미지를 사용할 수 있습니다.u003Cthead> 그리고u003Ctfoot> 둥근 모서리를 설명하는 요소.
나머지 세포는 국경을 켜고 선이 올바르게 정렬 될 수 있습니다.
남은 유일한 문제는 폭파 된 드롭 그림자를 설명하는 것입니다. 그것은 다른 운동입니다.
더 나은 방법은 배경 모서리가 있고 상단, 하단, 왼쪽 및 오른쪽 배경이 반복되는 9 그리드입니다.
당신의 테이블은 셀 5에 들어갑니다
편집하다
댓글에 게시 된대로 9 그리드로 효과를 달성 할 수 없습니다. 당신은 12 그리드 시스템을해야합니다 (지금 저에 의해 만들어졌습니다 :)
라이브 데모
.
암호:
경고 : 예쁘지는 않지만 작동합니다
<html>
<head>
<style>
.cell1 {background: #f8f8f8 url(images/cell1.gif) no-repeat left top; height: 10px; font-size: 1px;}
.cell2 {background: #f8f8f8 url(images/cell2.gif) repeat-x top; height: 10px; font-size: 1px; border-right: solid 1px #c3c2c2; font-weight:bold; }
.cell3 {background: #f8f8f8 url(images/cell3.gif) no-repeat right top; height: 10px; font-size: 1px;}
.cell4 {background: white url(images/cell4.gif) repeat-y left; border-bottom: solid 1px #c3c2c2; width: 13px; }
.cell5 {background-color: #f8f8f8; padding: 5px; border-right: solid 1px #c3c2c2; font-weight:bold; border-bottom: solid 1px #c3c2c2; }
.cell6 {background: white url(images/cell6.gif) repeat-y right; border-bottom: solid 1px #c3c2c2; width: 18px; }
.cell7 {background: white url(images/cell7.gif) repeat-y left; width: 13px;}
.cell8 {background-color: white; padding: 5px; border-right: solid 1px #c3c2c2; font-weight:normal; }
.cell9 {background: white url(images/cell9.gif) repeat-y right; width: 18px;}
.cell10 {background: white url(images/cell10.gif) no-repeat left bottom; height: 17px;font-size: 1px; }
.cell11 {background: white url(images/cell11.gif) repeat-x bottom; border-right: solid 1px #c3c2c2; height: 17px; font-size: 1px; }
.cell12 {background: white url(images/cell12.gif) no-repeat right bottom; height: 17px;font-size: 1px; }
.lastcolumn, th.lastcolumn, td.lastcolumn {border-right: solid 0px #c3c2c2; }
</style>
</head>
<body>
<table id="pricing" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th class="cell1"></th>
<th class="cell2"> </th>
<th class="cell2"> </th>
<th class="cell2"> </th>
<th class="cell2"> </th>
<th class="cell2"> </th>
<th class="cell2 lastcolumn"> </th>
<th class="cell3"></th>
</tr>
<tr>
<th class="cell4"> </th>
<th class="cell5">Incoming calls</th>
<th class="cell5">National calls</th>
<th class="cell5">Calls to US & Canada</th>
<th class="cell5">Calls to other Phones</th>
<th class="cell5">Calls to other Countries</th>
<th class="cell5 lastcolumn">SMS text messages</th>
<th class="cell6"> </th>
</tr>
</thead>
<tbody>
<tr>
<td class="cell7"></td>
<td class="cell8">Select</td>
<td class="cell8">country</td>
<td class="cell8">from</td>
<td class="cell8">dropdown</td>
<td class="cell8">list</td>
<td class="cell8 lastcolumn">above</td>
<td class="cell9"></td>
</tr>
<tr>
<td class="cell10"></td>
<td class="cell11"> </td>
<td class="cell11"> </td>
<td class="cell11"> </td>
<td class="cell11"> </td>
<td class="cell11"> </td>
<td class="cell11 lastcolumn"> </td>
<td class="cell12"></td>
</tr>
</tbody>
</table>
</body>
</html>
참고 : 코드에서 벗어나는 비 분해 공간이 있습니다. 자세한 내용은 Living 데모를 확인하십시오
즐기다!
