英文:
How can I use margin inside td in table but without using border-collapse: separate
问题
我想制作这样的表格:
我已经可以使用border-collapse: separate
属性制作示例,但线条本身会分开,如下所示:
当我使用border-collapse: collapse
时,我可以使边框仍然存在,但无法制作边距本身。
#home-table table {
font-family: "Nunito", sans-serif;
font-size: 1em;
color: #1d3962;
margin: 0% auto;
border-collapse: collapse;
border-spacing: 0;
width: 100%;
max-width: 1200px;
border: none;
border-top: none;
}
#home-table .table-icon-img-size {
width: 15px;
height: 15px;
}
#home-table tr {
border-top: solid 3px rgba(58, 115, 197, 0.1) !important;
}
#home-table th {
font-size: 0.9em;
color: #1d3962;
}
#home-table tr:nth-child(1) {
border-top: none !important;
}
#home-table tr:nth-last-child(1) {
border-bottom: none !important;
}
#home-table td {
width: 25%;
}
#home-table .first {
border-top: solid 3px rgba(58, 115, 197, 0.2) !important;
border-top-radius: 10px;
}
#home-table td {
margin: 0% 300px;
}
#home-table tr td:nth-child(1) {
padding: 32px 38px;
text-align: center;
}
#home-table tr th:nth-child(2) {
text-align: center;
font-weight: bold;
background-color: rgba(46, 207, 47, 0.1);
border-top-right-radius: 20px;
border-top-left-radius: 20px;
padding: 32px 38px;
}
#home-table tr td:nth-child(2) {
background-color: rgba(46, 207, 47, 0.1);
padding: 32px 38px;
text-align: center;
}
#home-table tr th:nth-child(3) {
text-align: center;
font-weight: bold;
background-color: rgba(219, 206, 44, 0.1);
border-top-right-radius: 20px;
border-top-left-radius: 20px;
padding: 32px 38px;
}
#home-table tr td:nth-child(3) {
background-color: rgba(219, 206, 44, 0.1);
padding: 32px 38px;
text-align: center;
}
#home-table tr th:nth-child(4) {
text-align: center;
font-weight: bold;
background-color: rgba(229, 76, 110, 0.1);
border-top-right-radius: 20px;
border-top-left-radius: 20px;
padding: 32px 38px;
}
#home-table tr td:nth-child(4) {
text-align: center;
color: #E54C6E;
background-color: rgba(229, 76, 110, 0.1);
padding: 32px 38px;
margin: 0% 500px;
}
#home-table .test {
padding-right: 20px;
}
#home-table tr td {
padding: 32px 38px;
}
<div id="home-table">
<div style="overflow-x:auto;">
<table>
<tr>
<td>Diamond</td>
<td>650</td>
<td>500</td>
<td>160</td>
</tr>
<tr>
<td>Diamond</td>
<td>650</td>
<td>500</td>
<td>160</td>
</tr>
<tr>
<td>Diamond</td>
<td>650</td>
<td>500</td>
<td>160</td>
</tr>
</table>
</div>
</div>
可以有人帮我解决这个问题吗?我对这个问题感到很困惑。
编辑 1
如果我要获得的内容不清楚,我希望这张图片能让我更清楚地理解我要获得的内容:
目前,我们仍然处于底部图像,当顶部边框仍然分开时,我想要的是顶部边框仍然与它连接。
英文:
Let say I want to make a table like this:
I can already make the example if using border-collapse: separate
property but the line itself get separated like this
when I'm using border-collapse: collapse
I can make the border still there but I can't make the margin itself
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#home-table table {
font-family: "Nunito", sans-serif;
font-size: 1em;
color: #1d3962;
margin: 0% auto;
border-collapse: collapse;
border-spacing: 0;
width: 100%;
max-width: 1200px;
border: none;
border-top: none;
}
#home-table .table-icon-img-size {
width: 15px;
height: 15px;
}
#home-table tr {
border-top: solid 3px rgba(58, 115, 197, 0.1) !important;
}
#home-table th {
font-size: 0.9em;
color: #1d3962;
}
#home-table tr:nth-child(1) {
border-top: none !important;
}
#home-table tr:nth-last-child(1) {
border-bottom: none !important;
}
#home-table td {
width: 25%;
}
#home-table .first {
border-top: solid 3px rgba(58, 115, 197, 0.2) !important;
border-top-radius: 10px;
}
#home-table td {
margin: 0% 300px;
}
#home-table tr td:nth-child(1) {
padding: 32px 38px;
text-align: center;
}
#home-table tr th:nth-child(2) {
text-align: center;
font-weight: bold;
background-color: rgba(46, 207, 47, 0.1);
border-top-right-radius: 20px;
border-top-left-radius: 20px;
padding: 32px 38px;
}
#home-table tr td:nth-child(2) {
background-color: rgba(46, 207, 47, 0.1);
padding: 32px 38px;
text-align: center;
}
#home-table tr th:nth-child(3) {
text-align: center;
font-weight: bold;
background-color: rgba(219, 206, 44, 0.1);
border-top-right-radius: 20px;
border-top-left-radius: 20px;
padding: 32px 38px;
}
#home-table tr td:nth-child(3) {
background-color: rgba(219, 206, 44, 0.1);
padding: 32px 38px;
text-align: center;
}
#home-table tr th:nth-child(4) {
text-align: center;
font-weight: bold;
background-color: rgba(229, 76, 110, 0.1);
border-top-right-radius: 20px;
border-top-left-radius: 20px;
padding: 32px 38px;
}
#home-table tr td:nth-child(4) {
text-align: center;
color: #E54C6E;
background-color: rgba(229, 76, 110, 0.1);
padding: 32px 38px;
margin: 0% 500px;
}
#home-table .test {
padding-right: 20px;
}
#home-table tr td {
padding: 32px 38px;
}
<!-- language: lang-html -->
<div id="home-table">
<div style="overflow-x:auto;">
<table>
<tr>
<td>Diamond</td>
<td>650</td>
<td>500</td>
<td>160</td>
</tr>
<tr>
<td>Diamond</td>
<td>650</td>
<td>500</td>
<td>160</td>
</tr>
<tr>
<td>Diamond</td>
<td>650</td>
<td>500</td>
<td>160</td>
</tr>
</table>
</div>
</div>
<!-- end snippet -->
Can someone help me to solve this? I'm quite confused with this problem
EDIT 1
If what I want to get is not clear I hope this image can make what I want to get more clearly
currently we still in the bottom image when the border-top line still separated but what I want to get that the border-top line still attached to it
答案1
得分: 1
我已经尝试修复您的问题,请查看此链接:演示
基本上需要更新CSS属性,需要更新一些属性以解决设计问题的分辨率。
#home-table table {
font-family: "Nunito", sans-serif;
font-size: 1em;
color: #1d3962;
margin: 0% auto;
border-spacing: 10px;
width: 100%;
max-width: 1200px;
border: none;
border-top: none;
}
#home-table .table-icon-img-size {
width: 15px;
height: 15px;
}
#home-table tr td {
position: relative;
/*border-top: solid 3px rgba(58, 115, 197, 0.1) !important;*/
}
#home-table tr td:before {
content: '';
position: absolute;
background: rgba(58, 115, 197, 0.1) !important;
height: 3px;
left: -5px;
right: -5px;
top: 5px;
}
#home-table tr td:first-child:before {
content: '';
left: 0px;
}
#home-table tr td:last-child:before {
content: '';
right: 0px;
}
#home-table th {
font-size: 0.9em;
color: #1d3962;
}
#home-table tr:nth-child(1) {
border-top: none !important;
}
#home-table tr:nth-last-child(1) {
border-bottom: none !important;
}
#home-table td {
width: 25%;
}
#home-table .first {
border-top: solid 3px rgba(58, 115, 197, 0.2) !important;
border-top-radius: 10px;
}
#home-table td {
margin: 0% 300px;
}
#home-table tr td:nth-child(1) {
padding: 32px 38px;
text-align: center;
border: 0;
}
#home-table tr th:nth-child(2) {
text-align: center;
font-weight: bold;
background-color: rgba(46, 207, 47, 0.1);
border-top-right-radius: 20px;
border-top-left-radius: 20px;
padding: 32px 38px;
}
#home-table tr td:nth-child(2) {
background-color: rgba(46, 207, 47, 0.1);
padding: 32px 38px;
text-align: center;
}
#home-table tr th:nth-child(3) {
text-align: center;
font-weight: bold;
background-color: rgba(219, 206, 44, 0.1);
border-top-right-radius: 20px;
border-top-left-radius: 20px;
padding: 32px 38px;
}
#home-table tr td:nth-child(3) {
background-color: rgba(219, 206, 44, 0.1);
padding: 32px 38px;
text-align: center;
}
#home-table tr th:nth-child(4) {
text-align: center;
font-weight: bold;
background-color: rgba(229, 76, 110, 0.1);
border-top-right-radius: 20px;
border-top-left-radius: 20px;
padding: 32px 38px;
}
#home-table tr td:nth-child(4) {
text-align: center;
color: #E54C6E;
background-color: rgba(229, 76, 110, 0.1);
padding: 32px 38px;
margin: 0% 500px;
}
#home-table .test {
padding-right: 20px;
}
#home-table tr td {
padding: 32px 38px;
}
<div id="home-table">
<div style="overflow-x:auto;">
<table>
<tr>
<td>Diamond</td>
<td>650</td>
<td>500</td>
<td>160</td>
</tr>
<tr>
<td>Diamond</td>
<td>650</td>
<td>500</td>
<td>160</td>
</tr>
<tr>
<td>Diamond</td>
<td>650</td>
<td>500</td>
<td>160</td>
</tr>
</table>
</div>
</div>
英文:
I have trying to fix your issues please check this link:demo
Basically CSS property need to update, few properties need to update to get the resolution of the design issue
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#home-table table {
font-family: "Nunito", sans-serif;
font-size: 1em;
color: #1d3962;
margin: 0% auto;
border-spacing: 10px;
width: 100%;
max-width: 1200px;
border: none;
border-top: none;
}
#home-table .table-icon-img-size {
width: 15px;
height: 15px;
}
#home-table tr td {
position: relative;
/*border-top: solid 3px rgba(58, 115, 197, 0.1) !important;*/
}
#home-table tr td:before {
content: '';
position: absolute;
background: rgba(58, 115, 197, 0.1) !important;
height: 3px;
left: -5px;
right: -5px;
top: 5px;
}
#home-table tr td:first-child:before {
content: '';
left: 0px;
}
#home-table tr td:last-child:before {
content: '';
right: 0px;
}
#home-table th {
font-size: 0.9em;
color: #1d3962;
}
#home-table tr:nth-child(1) {
border-top: none !important;
}
#home-table tr:nth-last-child(1) {
border-bottom: none !important;
}
#home-table td {
width: 25%;
}
#home-table .first {
border-top: solid 3px rgba(58, 115, 197, 0.2) !important;
border-top-radius: 10px;
}
#home-table td {
margin: 0% 300px;
}
#home-table tr td:nth-child(1) {
padding: 32px 38px;
text-align: center;
border: 0;
}
#home-table tr th:nth-child(2) {
text-align: center;
font-weight: bold;
background-color: rgba(46, 207, 47, 0.1);
border-top-right-radius: 20px;
border-top-left-radius: 20px;
padding: 32px 38px;
}
#home-table tr td:nth-child(2) {
background-color: rgba(46, 207, 47, 0.1);
padding: 32px 38px;
text-align: center;
}
#home-table tr th:nth-child(3) {
text-align: center;
font-weight: bold;
background-color: rgba(219, 206, 44, 0.1);
border-top-right-radius: 20px;
border-top-left-radius: 20px;
padding: 32px 38px;
}
#home-table tr td:nth-child(3) {
background-color: rgba(219, 206, 44, 0.1);
padding: 32px 38px;
text-align: center;
}
#home-table tr th:nth-child(4) {
text-align: center;
font-weight: bold;
background-color: rgba(229, 76, 110, 0.1);
border-top-right-radius: 20px;
border-top-left-radius: 20px;
padding: 32px 38px;
}
#home-table tr td:nth-child(4) {
text-align: center;
color: #E54C6E;
background-color: rgba(229, 76, 110, 0.1);
padding: 32px 38px;
margin: 0% 500px;
}
#home-table .test {
padding-right: 20px;
}
#home-table tr td {
padding: 32px 38px;
}
<!-- language: lang-html -->
<div id="home-table">
<div style="overflow-x:auto;">
<table>
<tr>
<td>Diamond</td>
<td>650</td>
<td>500</td>
<td>160</td>
</tr>
<tr>
<td>Diamond</td>
<td>650</td>
<td>500</td>
<td>160</td>
</tr>
<tr>
<td>Diamond</td>
<td>650</td>
<td>500</td>
<td>160</td>
</tr>
</table>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论