css圓角表格
阿新 • • 發佈:2019-01-07
在設定完四個角的<td>標籤border-radius後
設定<table>標籤的border-radius無效,還是直角的情況。
修改border-collapse: collapse為separate即可。
.content .question-box .question .answer-table { display: table; width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; box-sizing: border-box; border-radius: 10px; border: 1px solid #e7e7e7; } .content .question-box .question .answer-table tr:last-child { background: #f5f5f5; } .content .question-box .question .answer-table th { font-weight: bold; background: #f5f5f5; border-right: 1px solid #e7e7e7; border-bottom: 1px solid #e7e7e7; text-align: center; } .content .question-box .question .answer-table td { border-right: 1px solid #e7e7e7; border-bottom: 1px solid #e7e7e7; height: 37px; box-sizing: border-box; } .content .question-box .question .answer-table th:first-child { border-radius: 10px 0 0 0; } .content .question-box .question .answer-table th:last-child { border-radius: 0 10px 0 0; } .content .question-box .question .answer-table tr:last-child td:first-child { border-radius: 0 0 0 10px; } .content .question-box .question .answer-table tr:last-child td:last-child { border-radius: 0 0 10px 0; } .content .question-box .question .answer-table td:last-child,.content .question-box .question .answer-table th:last-child { border-right: none; } .content .question-box .question .answer-table tr:last-child td { border-bottom: none; }