不适用于顶部和左边界的CSS边框塌陷

问题描述：

这是一个测试模板〜在orde中进行调试时，我已将div（表的父亲）的边框颜色更改为红色。如图所示，您可以清楚地看到顶部和左侧有黑色边框。我无法修复它。请帮忙。不适用于顶部和左边界的CSS边框塌陷

HTML：

<div class="roundcorner"> 
<table border="1 solid"> 
    <tr> 
     <th>Out of 100 points how would you score Governemnt performance for each section.</th> 
     <th>Most like to see increased</th> 
     <th>Most willing to see decreased</th> 
    </tr> 
    <tbody> 
     <tr> 
      <td id="p2"> 
       <input type="text" name="name" /> 
      </td> 
      <td id="i1">lakdksakdmksa</td> 
      <td id="d1"> 
       <input type="radio" name="sex" />Yes</td> 
     </tr> 
     <tr> 
      <td id="p2"> 
       <input type="text" name="name" /> 
      </td> 
      <td id="i2">dsfwsedfwefwe</td> 
      <td id="d2"> 
       <input type="radio" name="sex" />No</td> 
     </tr> 
    </tbody> 
</table> 
<div>

CSS：

.roundcorner { 
    border: 1px solid grey; 
    border-radius: 10px; 
    width: 100%; 
    overflow: hidden 
} 
.roundcorner table { 
    // border-collapse: collapse; 
    width: 100%; 
    border-spacing: 0; 
    border: 1px solid grey; 
    overflow: hidden 
} 
th { 
    background-color: #EEE; 
    padding: 10px; 
    border: 1px solid grey; 
    border-collapse: collapse; 
} 
td { 
    text-align: centre; 
    //border: 1px solid grey; 
    border-collapse: collapse; 
} 
tr:hover { 
    background: #fafafa; 
    // font-weight:bold; 
} 
input[type=radio] { 
    vertical-align:middle; 
    margin-left: 45%; 
    margin-right: 45%; 
} 
input[type=text] { 
    width:20%; 
    height:20px; 
    margin-left:40%; 
    margin-right:40%; 
    border-radius:3px; 
    border: 1px solid grey; 
} 
td:first-child { 
    width: 25%; 
    height:60px; 
} 
td:nth-child(2) { 
    width: 50%; 
    text-align: center; 
    height: auto; 
    padding: 10px; 
} 
td:nth-child(3) { 
    width: 25%; 
    height:60px; 
}

JSFiddle

为什么你的桌子上有一个'border =“1 solid”？它甚至不是'border'属性的有效值。 – BoltClock 2014-09-01 05:40:51

非常整齐的眼睛。谢谢！ – 2014-09-01 05:47:28

显然，上边框和左边框仍然比其他边框更粗。你知道为什么吗？ – 2014-09-01 06:01:18

答

你可能会找这个提到：

工作样本：http://jsfiddle.net/707ha2vq/5/

您的元素包含另一个元素并且都带有边框，因此您会得到双重边框。在一个表格中，您通常会给td元素添加一个边框，并且border-collapse: collapse;这样两个元素的边框会一起折叠。但是你有单元格的边框和行的边框，所以它不会折叠，还有你看到双边或三边框的地方。

.roundcorner { 
    border: 1px solid grey; 
    border-radius: 10px; 
    width: 100%; 
    overflow: hidden 
} 
.roundcorner table { 
    // border-collapse: collapse; 
    width: 100%; 
    border-spacing: 0; 
    overflow: hidden 
} 
th { 
    background-color: #EEE; 
    padding: 10px; 
    border-collapse: collapse; 
    border-right: 1px solid grey; 
    border-bottom: 1px solid grey; 
} 
td { 
    text-align: centre; 
    //border: 1px solid grey; 
    border-collapse: collapse; 
} 
tr:hover { 
    background: #fafafa; 
    // font-weight:bold; 
} 
input[type=radio] { 
    vertical-align:middle; 
    margin-left: 45%; 
    margin-right: 45%; 
} 
input[type=text] { 
    width:20%; 
    height:20px; 
    margin-left:40%; 
    margin-right:40%; 
    border-radius:3px; 
    border: 1px solid grey; 
} 
td:first-child { 
    width: 25%; 
    height:60px; 
} 
td:nth-child(2) { 
    width: 50%; 
    text-align: center; 
    height: auto; 
    padding: 10px; 
} 
td:nth-child(3) { 
    width: 25%; 
    height:60px; 
}

谢谢！这是我想要的：[JSFiddle] http://jsfiddle.net/matildayipan/707ha2vq/9/ – 2014-09-01 06:39:13

但我明白了你的意思，所以我必须设置“border-bottom：0px;”以一些元素来摆脱较厚的边界。只是想知道这是最好的解决方案吗？ – 2014-09-01 06:40:19

哦，对不起，我以为你想保持下部无边界。如果您要求，我会添加它。 – 2014-09-01 06:40:42

答

我觉得这些额外的边框是表格的边框。试图取代你的CSS上面下面，我所做的是去除表格边框和给予单独的插头所需的边界

 

    .roundcorner { 
     border: 1px solid grey; 
     border-radius: 10px; 
     width: 100%; 
     overflow: hidden 
    } 
    .roundcorner table { 
     // border-collapse: collapse; 
     width: 100%; 
     border-spacing: 0; 
     //border: 1px solid grey; 
     overflow: hidden 
    } 
    th:first-child { 
     background-color: #EEE; 
     padding: 10px; 
     border-right: 1px solid grey; 
     border-bottom: 1px solid grey; 
     border-collapse: collapse; 
    } 
    th:nth-child(2) { 
     background-color: #EEE; 
     padding: 10px; 
     border-right: 1px solid grey; 
     border-bottom: 1px solid grey; 
     border-collapse: collapse; 
    } 
    th:nth-child(3) { 
     background-color: #EEE; 
     padding: 10px; 
     border-bottom: 1px solid grey; 
     border-collapse: collapse; 
    } 
    td { 
     text-align: centre; 
     //border: 1px solid grey; 
     border-collapse: collapse; 
    } 
    tr:hover { 
     background: #fafafa; 
     // font-weight:bold; 
    } 
    input[type=radio] { 
     vertical-align:middle; 
     margin-left: 45%; 
     margin-right: 45%; 
    } 
    input[type=text] { 
     width:20%; 
     height:20px; 
     margin-left:40%; 
     margin-right:40%; 
     border-radius:3px; 
     border: 1px solid grey; 
    } 
    td:first-child { 
     width: 25%; 
     height:60px; 
    } 
    td:nth-child(2) { 
     width: 50%; 
     text-align: center; 
     height: auto; 
     padding: 10px; 
    } 
    td:nth-child(3) { 
     width: 25%; 
     height:60px; 
    }

不适用于顶部和左边界的CSS边框塌陷

相关推荐