Html 解决表格圆角CSS

Solving table rounded corner CSS

提问by Smith

I have this CSS rule for rounded corner:

我有这个圆角的 CSS 规则：

th, td { padding: 8px;
         background: #E8ECE0;
         text-align: center;
         border: 1px solid #444;
         border-bottom-width: 0px;
}
thead { background-color: #446bb3  ; color :#fff; padding:4px; line-height:30px }
tbody tr:nth-child(even) {background: #F6F6EC;}
tbody tr:nth-child(odd) {background: #FFF}

tr:first-child td, tr:first-child th {
    border-top-left-radius: 12px; border-top-right-radius: 12px;
}
tr:last-child td {
    border-bottom: 1px solid #444;
    border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;
}
table { border-spacing: 0; border: 0; margin:0px; width:100%; padding:5px}
td.pd {border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;}
td.pu {border-top-left-radius: 12px; border-top-right-radius: 12px;}

My html table is:

我的 html 表是：

<table >
    <tbody>
      <tr >
        <td >Hello</td><td >Hello</td>
      </tr>
      <tr >
         <td >Hello</td><td >Hello</td>
      </tr>
      <tr >
         <td >Hello</td><td >Hello</td>
      </tr>
      <tr >
      <td >Hello</td><td >Hello</td>
      </tr>
    </tbody>
  </table>

which gives me this

这给了我这个

How do I fix this problem, as the td elements within the table and in the middle of the table have rounded corners too? I only need the first row and last row to have rounded corners.

我该如何解决这个问题，因为表格内和表格中间的 td 元素也有圆角？我只需要第一行和最后一行有圆角。

回答by David says reinstate Monica

Assuming your table's html resembles the following:

假设您table的 html 类似于以下内容：

<table>
    <thead>
        <tr>
            <th>First column</th>
            <th>Second column</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row one, cell one</td>
            <td>Row one, cell two</td>
        </tr>
        <tr>
            <td>Row two, cell one</td>
            <td>Row two, cell two</td>
        </tr>
        <tr>
            <td>Row three, cell one</td>
            <td>Row four, cell two</td>
        </tr>
    </tbody>
</table>

The the following CSS should work:

以下 CSS 应该可以工作：

table {
    border-spacing: 0;
}
th, td {
    border: 1px solid #000;
    padding: 0.5em 1em;
}
/* the first 'th' within the first 'tr' of the 'thead': */
thead tr:first-child th:first-child {
    border-radius: 0.6em 0 0 0;
}
/* the last 'th' within the first 'tr' of the 'thead': */
thead tr:first-child th:last-child {
    border-radius: 0 0.6em 0 0;
}
/* the first 'td' within the last 'tr' of the 'tbody': */
tbody tr:last-child td:first-child {
    border-radius: 0 0 0 0.6em;
}
/* the last 'td' within the last 'tr' of the 'tbody': */
tbody tr:last-child td:last-child {
    border-radius: 0 0 0.6em 0;
}

JS Fiddle demo.

JS小提琴演示。

Edited in response to question from OP:

针对 OP 的问题进行了编辑：

the border within the table is a little think, how do i make it 1px

表格内的边框有点想，我如何使它成为 1px

The borders between cells are a little thick, because the left border of one cell is against the right border of the previous cells (and the same for top/bottom borders).

单元格之间的边框有点粗，因为一个单元格的左边框与前一个单元格的右边框相对（顶部/底部边框相同）。

One way to remove that effect is to specify border-collapse: collapse;on the tableelement. Unfortunately the effect of this is to alsoremove/unset/override the border-radiusdeclarations: demo.

消除这种影响的一种方法是border-collapse: collapse;在table元素上指定。不幸的是，这样做的效果也是删除/取消设置/覆盖border-radius声明：demo。

The more complicated way is to manually remove top-borders for rows with a previous row, and the left-border of a cell that follows a cell, adding the following to the previous CSS:

更复杂的方法是手动删除具有前一行的行的上边框，以及单元格后面的单元格的左边框，在之前的 CSS 中添加以下内容：

thead + tbody tr td,
tr + tr td {
    border-top: 0;
}

tr th + th,
tr td + td {
    border-left: 0;
}

JS Fiddle demo.

JS小提琴演示。

Edited to reduce make the CSS more durable (for single-cell rows, for the addition of a tfootor the removal of the thead):

编辑以减少使 CSS 更持久（对于单单元格行，添加 atfoot或删除thead）：

table {
    border-spacing: 0;
}
th, td {
    border: 1px solid #000;
    padding: 0.5em 1em;
}
thead tr:first-child th:first-child,
tbody:first-child tr:first-child td:first-child {
    border-top-left-radius: 0.6em;
}
thead tr:first-child th:last-child,
tbody:first-child tr:first-child td:last-child {
    border-top-right-radius: 0.6em;
}

thead + tbody tr:last-child td:first-child,
tfoot tr:last-child td:first-child {
    border-bottom-left-radius: 0.6em;
}
thead + tbody tr:last-child td:last-child,
tfoot tr:last-child td:last-child {
    border-bottom-right-radius: 0.6em;
}

thead + tbody tr td,
tfoot + tbody tr td,
tfoot tr td,
tbody + tbody tr td,
tr + tr td {
    border-top: 0;
}

tr th + th,
tr td + td {
    border-left: 0;
}

JS Fiddle demo.

JS小提琴演示。

There is a problem with multiple tbodyelements, in the absence of a tfootelement, currently in which the first tbodywill retain the border-radius on their lower borders.

多个tbody元素存在问题，在没有元素的情况下tfoot，当前第一个元素tbody将保留其下边界的边界半径。

回答by Dimitry

You can just put table into div. Styles for div (example):

您可以将表格放入 div 中。div 样式（示例）：

div {
  border-radius: 4px;
  -moz-border-radius: 4px
  -webkit-border-radius: 4px;
  overflow: hidden; /*notice*/
}

So the table corners will be hidden.

所以桌角将被隐藏。

回答by rtc11

This answer doesn't answer your question directly, but a variant. If you dont want the middle columns to have rounded corners, this is a possible solution:

此答案不会直接回答您的问题，而是一种变体。如果您不希望中间列有圆角，这是一个可能的解决方案：

Illustration:

插图：

Properties for the table row (tr): update the table data (td) for the left most column:

表行 (tr) 的属性：更新最左侧列的表数据 (td)：

tbody tr td:first-child
{
    border-radius: 0.6em 0 0 0.6em;
}

Properties for the table row (tr): update the table data (td) for the second column:

表行 (tr) 的属性：更新第二列的表数据 (td)：

tbody td:nth-child(2)
{
    border-radius: 0 0.6em 0.6em 0;
}

Here is an example: JS Fiddle demo

这是一个示例：JS Fiddle 演示

If you have more than one column (td or th) you simply add something like this:

如果您有不止一列（td 或 th），您只需添加如下内容：

tbody td:nth-child(2) /* This is now the middle element out of three */
{
    border-radius: 0 0 0 0;
}
tbody td:nth-child(3) /* This is now the right most column */
{
    boder-radius: 0 0.6em 0.6em 0;
}

回答by marciano

You can reset the border radius of the td element. That should solve it.

您可以重置 td 元素的边框半径。那应该可以解决它。

回答by Vivek Sadh

You can give id to the td elements and using the id's of td elements set the border radius to 0px.

您可以为 td 元素指定 id，并使用 td 元素的 id 将边框半径设置为 0px。

回答by Mehmet Taha Meral

You should try a clear:both;and it will be reset. Also you can try !importantbecause maybe you forget other "inline css rules" in other html codes.

您应该尝试a clear:both;，它将被重置。您也可以尝试，!important因为您可能忘记了其他 html 代码中的其他“内联 css 规则”。

回答by kennasoft

Though this is an old answer, I'd like to enhance it by adding my findings. In addition to David Thomas's super-smart answer, I found an edge case where it doesn't exactly fit: A single-cell row! for example:

虽然这是一个旧答案，但我想通过添加我的发现来增强它。除了David Thomas的超级智能答案之外，我还发现了一个不完全适合的边缘情况：单单元格行！例如：

<table>
   <tr><th colspan="3">My header</th></tr>
   <tr><td>row1-cell1</td><td>row1-cell2</td><td>row1-cell3</td></tr>
   <tr><td>row2-cell1</td><td>row2-cell2</td><td>row2-cell3</td></tr>
   <tr><th colspan="3">My footer</th></tr>
</table>

The rule for the top-right corner would overwrite the rule for the top-left corner (because it comes after it), and the rule for the bottom-right corner would overwrite the rule for the bottom left corner (for the same reason). See screen shot below:

右上角的规则会覆盖左上角的规则（因为它在它之后），右下角的规则会覆盖左下角的规则（出于同样的原因） . 请参阅下面的屏幕截图：

The remedy for that is the css below (I added more selectors for various table-tr, tbody-tr, thead-tr combinations as needed, so you can also expand it to fit your markup):

对此的补救措施是下面的 css（我根据需要为各种 table-tr、tbody-tr、thead-tr 组合添加了更多选择器，因此您也可以扩展它以适合您的标记）：

        table td,
        table th{
            border: 1px solid #666;
        }

        table{
            width: 98%;
            border-spacing: 0px;
        }

         /* alternating table row colors*/
        tr:nth-child(even)  { background-color:#f6f6f6; }
        tr:nth-child(odd)   { background-color:#ffffff; }

        /* set all corner radii initially to zero */
        th, td {
            border-radius: 0;
        }

        /*set only specific radii per corner (don't use the border-radius shorthand)*/
        thead tr:first-child th:first-child, 
        table tr:first-child td:first-child,
        tbody tr:first-child th:first-child {
            border-top-left-radius: 0.6em;
        }
        thead tr:first-child th:last-child, 
        table tr:first-child td:last-child,
        tbody tr:first-child th:last-child {
            border-top-right-radius: 0.6em;
        }
        tbody tr:last-child td:first-child, 
        table tr:last-child td:first-child,
        tbody tr:last-child th:first-child {
            border-bottom-left-radius: 0.6em;
        }
        tbody tr:last-child td:last-child, 
        table tr:last-child td:last-child,
        tbody tr:last-child th:last-child {
            border-bottom-right-radius: 0.6em;
        }

        thead + tbody tr td,
        tr + tr td ,
        tr + tr th {
            border-top: 0;
        }

        tr th + th,
        tr td + td {
            border-left: 0;
        }

        /* shade th cells */
        table th {
            background-color: #888;
            color: #FFF;
        }

This results in the screenshot below, as desired:

根据需要，这会产生以下屏幕截图：

All credit for this solution still goes to David Thomas, especially for the adjacent cells border trick!

这个解决方案的所有功劳仍然归功于David Thomas，特别是对于相邻单元格边界技巧！