0

so I've created a table with table classes and I want the table to have rounded edge, but this code gives me all Cells Rounded. How to have only the table rounded ? thank you

   <!DOCTYPE html>
<html>
<head>
<style type="text/css">
table
{
border-collapse:collapse;
}
table, td, th
{
/* This is to have rounded corners */

border:1px solid black;  
/*  change to 1 if border needed */
}
table.margin
{
margin-top:25px;
}

table.margin2
{
margin-top:15px;

border-radius:5px;
-moz-border-radius:5px;
}
4

2 回答 2

1

Your going to need to take the rounded corners code out of the table, td, th since that will apply the rounded corners code to all of those elements, but if you move it to the table { /* rounded corners code here */ } then it won't apply to the td's and the th's.

This code works for me on chrome.

<!DOCTYPE html>
<html>
  <head>
    <style type=text/css>
      .rounded_edges {
        -moz-border-radius: 15px;
        border-radius: 15px;
        border: 1px solid black;
      }
    </style>
  </head>

  <body>
    <table class="rounded_edges">
      <tr>
        <th>Head 1</th>
        <th>Head 2</th>
        <th>Head 3</th>
      </tr>
      <tr>
        <td>Cell 1-1</td>
        <td>Cell 1-2</td>
        <td>Cell 1-3</td>
      </tr>
      <tr>
        <td>Cell 2-1</td>
        <td>Cell 2-2</td>
        <td>Cell 2-3</td>
      </tr>
    </table>
  </body>
</html>
于 2012-06-30T00:57:10.477 回答
0

如果您使用的是表格，只需将其放入样式中：

border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;
于 2013-12-22T06:31:33.923 回答