Стол с закругленными углами задач

Question

У меня проблемы с обшивкой стола с закругленными углами.

Посмотрите на изображение, пожалуйста:

А вот и код:

<table id="whitePanel" width="190px" cellpadding="0" cellspacing="0" border="0" >
<tr>
    <td>
        <img src="assets/images/lightRoundedCorners/tl.png" width="8" height="8" border="0" alt="..." />
    </td>
    <td>
        <img src="assets/images/lightRoundedCorners/t.png"  alt="..." height="8" width="100%" />
    </td>
    <td>
        <img src="assets/images/lightRoundedCorners/tr.png" width="8" height="8" border="0" alt="..." />
    </td>
</tr>
<tr>
    <td>
        <img src="assets/images/lightRoundedCorners/l.png" width="8" alt="..." height="100%" border="0"/>
    </td>
    <td align="center" border="0" style="background: url(assets/images/lightRoundedCorners/c.png) repeat">
        ACTUAL CONTENT
        <p>1. Item 1</p>
        <p>1. Item 1</p>
        <p>1. Item 1</p>
    </td>
    <td>
        <img src="assets/images/lightRoundedCorners/r.png" width="8" alt="..." height="100%" border="0"/>
    </td>
</tr>
<tr>
    <td>
        <img src="assets/images/lightRoundedCorners/bl.png" width="8" height="8" border="0" alt="..." />
    </td>
    <td>
        <img src="assets/images/lightRoundedCorners/b.png"  alt="..." height="8" width="100%" border="0"/>
    </td>
    <td>
        <img src="assets/images/lightRoundedCorners/br.png" width="8" height="8" border="0" alt="..." />
    </td>
</tr>

Есть предложения?

Answer 1

Я собираюсь скальпировать вас за использование таблиц для не табличных данных,

Ради бога, в 2011 году используйте div и css!

http://css -discuss.incutio.com / вики / Why_I_think_divs_are_better_than_tables

Answer 2

Одним из решений может быть использование CSS только без изображений для достижения того, что вам нужно. проверьте следующее:

CSS

table {
  -moz-border-radius: 6px; /* FF1+ */
  -webkit-border-radius: 6px; /* Saf3-4 */
  border-radius: 6px; /* Opera 10.5, IE9, Saf5, Chrome */
  -moz-box-shadow: 0 0 6px #959595 inset;
  -webkit-box-shadow: 0px 0px 6px #959595 inset; /* Saf3.0+, Chrome */
  box-shadow: 0px 0px 6px #959595 inset; /* Opera 10.5, IE9 */
  border: 1px solid grey;
  color: #00769B;
  font-size: 1.1em;
  text-align: center;}

HTML

<table id="whitePanel" width="190px" cellpadding="0" cellspacing="0" border="0" >
   <tr>
     <td>ACTUAL CONTENT
       <p>1. Item 1</p>
       <p>1. Item 1</p>
       <p>1. Item 1</p>
     </td>
   </tr>
  </table>

Демо: http://jsbin.com/ebove4/3

Поскольку Internet Explorer не понимает эти свойства css3, вы можете использовать css3pie .

Answer 3

Хорошо, вот код, который я использовал для решения проблемы, надеюсь, он поможет всем вам!

Этот метод не использует Javascript, только CSS и HTML.

Результат:

У меня все еще есть проблемы с правыми углами (сверху и снизу) Я надеюсь исправить это в ближайшее время.

Активы:Прошу прощения за это, но сейчас у меня нет сервера разработки.

b:

bl:

br:

c:

l:

r:

t:

tl:

tr:

Вот HTML-код (DIVS):

<div class="dialog">
            <div class="hd">
                <div class="c">
                </div>
            </div>
            <div class="bd">
                <div class="c">
                     <div class="s">

                     <!-- content area -->

                        <h3>a<b>developer</b>?</h3>
                        <a href="">public <b>API</b> here!</a>  


                    <!-- content area -->

                    </div>
                </div>
            </div>
            <div class="ft"><div class="c"></div></div>
        </div>    

А вот код CSS:

.dialog {
     width:200px;
     margin:10px 10px 0px 0px;
    }

    .dialog .hd .c,
    .dialog .ft .c {
     font-size:1px; /* ensure minimum height */
     height:8px;
    }

    .dialog .ft .c {
     height:8px;
    }

    .dialog .hd {
     background:transparent url(../assets/images/lightRoundedCorners/tl.png) no-repeat ;
    }

    .dialog .hd .c {
     background:transparent url(../assets/images/lightRoundedCorners/tr.png) no-repeat right 0px;
    }

    .dialog .bd {
     background:transparent url(../assets/images/lightRoundedCorners/l.png) repeat-y 0px 0px;
    }

    .dialog .bd .c {
     background:transparent url(../assets/images/lightRoundedCorners/r.png) repeat-y right 0px;
    }

    .dialog .bd .c .s {
     margin:0px 8px 0px 8px;
     background:transparent url(../assets/images/lightRoundedCorners/c.png) repeat 0px 0px;
     padding:1px;
     padding-left: 5px;
     padding-bottom: 10px;
    }

    .dialog .ft {
     background:transparent url(../assets/images/lightRoundedCorners/bl.png) no-repeat 0px 0px ;
    }

    .dialog .ft .c {
     background:transparent url(../assets/images/lightRoundedCorners/br.png) no-repeat right 0px;
    }

Надеюсь, это поможет!

Answer 4

Попробуйте добавить в таблицу следующий стиль CSS ...

#whitePanel {
   border-collapse:collapse;
}