如何两行之间有边界的自举表

table{ width: 100%;max-width: 100%; margin-bottom: 20px;border:solid 1px #000; border-collapse: collapse;} 
 

 
tbody tr{border:2px solid #256ac4;} 
 
td{ color: #8d9097; vertical-align: top; font-size: 14px;} 
 
th{text-align:left}

<table> 
 
<thead> 
 
    <th>A</th> 
 
    <th>B</th> 
 
    <th>C</th> 
 
</thead> 
 
<tbody> 
 
    <tr> 
 
    <td>AA</td> 
 
    <td>AA</td> 
 
     <td>AA</td> 
 
    </tr> 
 
<tr> 
 
    <td>AA</td> 
 
    <td>AA</td> 
 
     <td>AA</td> 
 
    </tr> 
 
<tr> 
 
    <td>AA</td> 
 
    <td>AA</td> 
 
     <td>AA</td> 
 
    </tr> 
 

 
</tbody> 
 

 
</table>

我已经编写此，预期的结果增加空间是图像，但我无法两排之间增加空间，如果我用border-崩溃：单独空间即将到来，但边界不适用。

https://ibb.co/b9WDn5

来源

2017-07-27 Pratiksha Kale

请添加一个最小工作示例，以便我们可以告诉您可以更改哪些内容。没有我们不可能向你解释。如果你只需要在行之间有空格，创建例如。之后的伪行。 – Doomenik

在这里分享您的代码？或创建一个片段或小提琴 –

你可以请分享有关表，td和tr你正在使用的css –

父表，尝试设置

border-collapse:separate; 
border-spacing:5em;

尝试参照this。

来源

2017-07-27 06:32:40

我试过了。间距即将到来，但我在表格行（tr）中添加的边框消失了 –

我必须解决这个问题有float:left，在这个片段中检查

* { box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -webkit-box-sizing:border-box; } 
 
table { 
 
    width: 100%; 
 
    max-width: 100%; 
 
    margin-bottom: 20px; 
 
    border: solid 1px #000; 
 
    border-collapse: collapse; 
 
    float:left; 
 
} 
 
thead { 
 
    float: left; 
 
} 
 
tbody tr { 
 
    border: 2px solid #256ac4; 
 
    float: left; 
 
    margin-bottom: 15px; 
 
    width: 100%; 
 
} 
 
td { 
 
    color: #8d9097; 
 
    vertical-align: top; 
 
    font-size: 14px; 
 
} 
 
th { 
 
    text-align: left 
 
}

<body> 
 
<table> 
 
    <thead> 
 
    <th>A</th> 
 
    <th>B</th> 
 
    <th>C</th> 
 
     </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>AA</td> 
 
     <td>AA</td> 
 
     <td>AA</td> 
 
    </tr> 
 
    <tr> 
 
     <td>AA</td> 
 
     <td>AA</td> 
 
     <td>AA</td> 
 
    </tr> 
 
    <tr> 
 
     <td>AA</td> 
 
     <td>AA</td> 
 
     <td>AA</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

来源

2017-07-27 06:45:08

但是全宽表格的结构现在不匹配 –

那是因为'box-sizing'问题现在是固定的 –

您应该添加div您的内容去和风格它来创建行之间的差距。

所以，如果我们从你的代码例如它会变成这样。

HTML

<table> 
    <thead> 
    <th>A</th> 
    <th>B</th> 
    <th>C</th> 
    </thead> 
    <tbody> 
    <tr> 
     <td> 
     <div>AA</div> 
     </td> 
     <td> 
     <div>AA</div> 
     </td> 
     <td> 
     <div>AA</div> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     <div>AA</div> 
     </td> 
     <td> 
     <div>AA</div> 
     </td> 
     <td> 
     <div>AA</div> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     <div>AA</div> 
     </td> 
     <td> 
     <div>AA</div> 
     </td> 
     <td> 
     <div>AA</div> 
     </td> 
    </tr> 

    </tbody> 

</table>

CSS

table { 
width: 100%; 
max-width: 100%; 
margin-bottom: 20px; 
border-collapse: collapse; 
} 

td { 
    color: #8d9097; 
    vertical-align: top; 
    font-size: 14px; 
    padding: 0; 
} 

td div { 
    margin-bottom: 10px; 
    border: 2px solid #256ac4; 
} 

td:first-child div { 
    border-left-width: 2px; 
} 

td:last-child div { 
    border-right-width: 2px; 
} 

thead { 
    border: solid 1px #000; 
} 

th { 
    text-align: left 
}

https://jsfiddle.net/nvbza1u3/1/

注意边界是如何加入到div，而不是tr。此外，我将边框添加到thead以使其看起来更像您的示例

来源

2017-07-27 09:51:53 HighWayDog

如果内容在每个td的结构也越来越不匹配 –

如何两行之间有边界的自举表

回答

相关问题