由于边框折叠属性，表格的边框半径不起作用

Posted 2023-03-05

【中文标题】由于边框折叠属性，表格的边框半径不起作用

【英文标题】：Border radius of table not working due to border-collapse property

【发布时间】：2021-03-22 02:12:47

【问题描述】：

如果我在表格标签上有边框折叠属性，我的边框半径不会显示。我需要打开border-radius 属性，如果我删除border-collapse 属性，我将无法获得我想要的外观，即灰色部分会到达桌子的最边缘。

有什么办法解决这个问题，是什么原因造成的？

提前致谢

* 
  padding: 0;
  margin: 0;
  box-sizing: border-box;


table 
  /*if i comment out the border-collapse property it then shows my radius*/
  border-collapse: collapse;
  margin: 25px 0;
  width: 50%;
  border-radius: 5px;
  font-size: 1.4rem;
  min-width: 400px;
  border: 1px solid #c3c3c3;
  /*margin is just for demo*/
  margin: 20px 20px;


table tr 
  border-bottom: solid 1px #d1d1d1;


table tr:nth-child(odd) 
  background-color: #eee;


table td 
  padding: 10px 15px;


table td:first-of-type 
  font-weight: 600;

<table>
  <tbody>
    <tr>
      <td>Application</td>
      <td>Natural gas & LPG</td>
    </tr>
    <tr>
      <td>Standards</td>
      <td>BS EN ISO 9001:2008 - EN 331:1998</td>
    </tr>
    <tr>
      <td>Connection</td>
      <td>BSP Taper F</td>
    </tr>
    <tr>
      <td>Finish</td>
      <td>Plated</td>
    </tr>
  </tbody>
</table>

非常

【问题讨论】：

我假设您的意图是删除边框和内部内容之间的任何空间，是的，并且边框上还有一个半径？

【参考方案1】：

如果您不希望在内容背景和边框之间看到任何间距，则只需删除 border-collapse 并添加 border-spacing: 0。 border-spacing: 0 完全不会影响边框半径，它也会给你在边框和内部内容之间没有空格的结果。

在搜索中，同时使用折叠和半径似乎有些异常。也有一些变通方法，您可以在子表上使用伪标签专门使半径起作用，但是当您可以使用 border-spacing 删除边框及其内部内容之间的空间时，为什么要浪费所有时间，效果很好border-radius

编辑： 通过使用伪选择器和border-space: 0，您可以获得更明显的边框半径。

我们希望定位每个与表格元素边缘接壤的 td 元素。 table tr td:first-of-type 和 table tr td:last of type 获取左侧和右侧。然后我们针对每个后续的第一个和最后一个孩子来获得角点。最后，如果这是一个动态表，并且您将有多个 two 数据表位于表中，请在每个类型的第一个和最后一个添加 td:not(:first-child):not(:last-child)。

I don't get the look I want which is the grey sections to go to the very edge of the table.

* 
  padding: 0;
  margin: 0;
  box-sizing: border-box;


table 
  /*add border-spacing: 0     instead of     border-collapse: collapse*/
  border-spacing: 0;
  margin: 25px 0;
  width: 50%;
  font-size: 1.4rem;
  min-width: 400px;
  /*margin is just for demo*/
  margin: 20px 20px;



/* Start psuedo child tags here, targeting each data elements relevant corners and sides */

table tr td:first-of-type 
   border-left: 1px solid #c3c3c3;


table tr td:last-of-type 
   border-right: 1px solid #c3c3c3;


/* :not(:first-child):not(:last-child)
This will get any potential data tables that are added 
that are not sides or corners however, they are border 
data tables on top or bottom */    

table tr:first-of-type td:not(:first-child):not(:last-child)
  border-top: 1px solid #c3c3c3;



table tr:last-of-type td:not(:first-child):not(:last-child)
  border-bottom: 1px solid #c3c3c3;


table tr:first-of-type td:first-child 
    border-top: 1px solid #c3c3c3;
    border-top-left-radius: 5px;


table tr:first-of-type td:last-child 
    border-top: 1px solid #c3c3c3;
    border-top-right-radius: 5px;


table tr:last-of-type td:last-child 
    border-right: 1px solid #c3c3c3;
    border-bottom: 1px solid #c3c3c3;
    border-bottom-right-radius: 5px;


table tr:last-of-type td:first-child 
    border-left: 1px solid #c3c3c3;
    border-bottom:  1px solid #c3c3c3;
    border-bottom-left-radius: 5px;


/* End Psuedo tags here */

table tr 
  border-bottom: solid 1px #d1d1d1;


table tr:nth-child(odd) 
  background-color: #eee;


table td 
  padding: 10px 15px;


table td:first-of-type 
  font-weight: 600;

<div id="table">
  <table>
    <tbody>
      <tr>
        <td>Application</td>
        <td>here is some data</td>
        <td>Natural gas & LPG</td>
      </tr>
      <tr>
        <td>Standards</td>
        <td>some data in between</td>
        <td>BS EN ISO 9001:2008 - EN 331:1998</td>
      </tr>
      <tr>
        <td>Connection</td>
        <td>some data in between</td>
        <td>BSP Taper F</td>
      </tr>
      <tr>
        <td>more tables</td>
        <td>some data in between</td>
        <td>more data</td>
      </tr>
      <tr>
        <td>some more data still</td>
        <td>some data in between</td>
        <td>and yet more about this data</td>
      </tr>
      <tr>
        <td>Finish</td>
        <td>Plated</td>
        <td>Plated too</td>
      </tr>
    </tbody>
  </table>
</div>

【讨论】：

这可行，但两个角的顶部半径不正确，看起来里面有白色？ - 底角完美吗？事实上，当你放大时，它显示他的顶行悬垂穿过顶角，呈现白色外观，显示我将如何解决这个问题？

@PaulMaximus 我添加了一种使用伪标签定位每个边和角的方法，以在半径更明显的地方添加更健壮的边框。定位第一个和最后一个类型添加侧边框，然后是第一个和最后一个类型以及第一个和最后一个子项以获得相关的角以及顶部和底部边框。

@PaulMaximus 很棒，希望它也能帮助其他人。