不適用於頂部和左邊界的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

來源

2014-09-01 Matilda Yi Pan

爲什麼你的桌子上有一個'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; 
}

來源

2014-09-01 06:23:49

謝謝！這是我想要的：[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; 
    }

來源

2014-09-01 06:22:46 vamshichalla

不適用於頂部和左邊界的CSS邊框塌陷

回答

相關問題