如何兩行之間有邊界的自舉表

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的結構也越來越不匹配 –

如何兩行之間有邊界的自舉表

回答

相關問題