CSS Tabela Styling

Question

Eu preciso estilo uma tabela para ter cantos arredondados.

Eu estou apenas procurando a melhor forma de ir sobre ele:

Normalmente quando eu estilizar uma div para ter cantos arredondados, eu uso 2 divs com comentários vazios na parte superior e inferior, e aplicar dimensionamento & CSS imagem de fundo a eles.

A tabela, no entanto, tem fronteiras internas, então eu teria que alinhar cuidadosamente as linhas verticais nas imagens bg canto, para combinar com os verdadeiros limites da célula.

É este tão claro agora?

Então eu queria saber como os outros iria abordar isso. Acho que a melhor coisa que posso fazer é usar apenas um completo tamanho fixo fundo imagem, fronteiras e tudo, e sobrepor uma tabela sem bordas na parte superior. A tabela será sempre o mesmo tamanho depois de tudo.

Alguém pode pensar em uma maneira melhor?

Answer 1

É melhor fazer uma imagem de fundo com apenas os cantos, e não das fronteiras. Aplicar uma classe para o canto superior esquerdo, superior direito, inferior esquerdo e células canto inferior direito, para definir que a imagem cantos-fundo deve ser utilizado.

E o estilo das fronteiras com css. Não colocá-los na imagem de fundo.

Na sua abordagem, você sempre vai acabar por ter as linhas verticais na sua imagem de fundo não coincidir com as fronteiras das células da tabela real.

Answer 2

25 maneiras de fazê-lo .... http: / /www.cssjuice.com/25-rounded-corners-techniques-with-css/

Na verdade, existem muitas maneiras de fazer isso.

Answer 3

Você já tentou http://www.roundedcornr.com/ ?

Answer 4

fazer algo assim ...

XHTML: (sorry tinha que remover primeiro '<' como ele não me deixou postá-lo normalmente, corrigir esse JEFF!)

table id="pricing" border="0" cellpadding="0" cellspacing="0">
  <thead>
    <tr>
      <th>Incoming calls</th>
      <th>National calls</th>
      <th>Calls to US &amp; 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 { intensidade da fonte: Negrito; text-align: center }

  #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 */
  }

A única desvantagem é que você tem que criar 4 imagens, mas isso não deve demorar muito. Você também vai precisar adicionar uma classe para o final de células em cada linha se você quiser acrescentar que sombra na direita e apenas mudá-lo de background-image e propriedade de largura em conformidade.

Answer 5

Jogando fora de sua idéia original, você pode adicionar uma classe para cada célula canto efetivamente desligando suas respectivas fronteiras ofensivos. Você poderia, então, usar uma imagem de fundo de largura total na e elementos para explicar os cantos arredondados.

O resto das células pode ter suas fronteiras ligado, e as linhas vão alinhar corretamente.

A questão que resta é responsável por essa sombra maldita. Isso é um exercício diferente.

Answer 6

A melhor maneira seria um 9-grade onde você tem os cantos de fundo, e superior, inferior, esquerda e direita fundos repetindo

Sua mesa vai na célula 5

Editar

Como alguns postou os comentários que você não pode alcançar o efeito com um 9-grade. Você tem que fazer um sistema de 12-grid (composta por mim agora :)

ao vivo demonstração

.

Código:

Atenção: não é bonito, mas funciona

<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">&nbsp;</th>
      <th class="cell2">&nbsp;</th>
      <th class="cell2">&nbsp;</th>
      <th class="cell2">&nbsp;</th>
      <th class="cell2">&nbsp;</th>
      <th class="cell2 lastcolumn">&nbsp;</th>
      <th class="cell3"></th>
    </tr>
    <tr>
      <th class="cell4">&nbsp;</th>
      <th class="cell5">Incoming calls</th>
      <th class="cell5">National calls</th>
      <th class="cell5">Calls to US &amp; 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">&nbsp;</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">&nbsp;</td>
      <td class="cell11">&nbsp;</td>
      <td class="cell11">&nbsp;</td>
      <td class="cell11">&nbsp;</td>
      <td class="cell11">&nbsp;</td>
      <td class="cell11 lastcolumn">&nbsp;</td>
      <td class="cell12"></td>
    </tr>
  </tbody>
</table>


</body>
</html>

Nota: existem alguns espaços não quebrar essa SO tiras a partir do código. Confira a demonstração viva para mais informações

Aproveite!