使表單元格的寬度與其容器相同

我正在試圖使表單元格（td）與表格的寬度相同。也消除每個單元之間的黑色空間。使表單元格的寬度與其容器相同

這裏是我的代碼：

<div class="col-md-12" style="background-color: white; font-size: 19px; text-align:left;height:378px;color:#6D6E71;padding-left:0px;padding-right:0px;"> 

<table style="margin:0px;font-size: 16px;width:100%;padding:0px; color:black;"> 
    <tr > 
    <td style="background:blue; padding:15px 20px;width:100%">First agenda</td> 
    </tr> 

    <tr> 
    <td style="background:red;padding:15px 20px;width:100%;">second agenda</td> 
    </tr> 

    <tr> 
    <td style="background:yellow;padding:15px 20px;width:100%;">thrid agenda</td> 
     </tr>     
</table> 
</div>

這裏是什麼樣子：

我需要讓每個表格單元格的填充黑色區域。我已經取消了集裝箱的襯墊。

非常感謝您的幫助！

來源

2016-12-03 WoShiNiBaBa

https://jsfiddle.net/z8ygsmv4/添加邊界崩潰： https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse – sinisake

@nevermind非常感謝！邊界崩潰完成這項工作。 – WoShiNiBaBa

我只花一點時間來指出，在語義上和以其簡化形式，這看起來更像是一個列表而不是表格。 –

td { 
 
    margin: 0; 
 
    width: 100%; 
 
    padding: 15px 20px; 
 
} 
 

 
table { 
 
    background-color: black; 
 
    border-collapse: collapse; 
 
    font-size: 16px; 
 
    width:100%; 
 
    padding:0px; 
 
    margin: 0px; 
 
}

<table> 
 
    <tr > 
 
    <td style="background:blue">First agenda</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td style="background:red">second agenda</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td style="background:yellow">third agenda</td> 
 
     </tr>     
 
</table>

這是使用border-collapse: collapse去除邊界的一個示例。

來源

2016-12-03 16:57:18 StardustGogeta

感謝您的幫助！ – WoShiNiBaBa

所有你需要做的就是設置cellspacing="0"和cellpadding="0"和風格border:none !important;到<table>如下：

<div class="col-md-12" style="background-color: white; font-size: 19px; text-align:left;height:378px;color:#6D6E71;padding-left:0px;padding-right:0px;"> 
 

 
<table cellspacing="0" cellpadding="0" style="margin:0px;font-size: 16px;width:100%;padding:0px; color:black;border:none !important;"> 
 
    <tr > 
 
    <td style="background:blue; padding:15px 20px;width:100%">First agenda</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td style="background:red;padding:15px 20px;width:100%;">second agenda</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td style="background:yellow;padding:15px 20px;width:100%;">thrid agenda</td> 
 
     </tr>     
 
</table> 
 
</div>

來源

2016-12-03 17:28:55 Sybarium

我建議你保持在一個單獨的樣式表整潔，我希望這有助於;） – Sybarium

謝謝你的幫助！ – WoShiNiBaBa

@WoShiNiBaBa最受歡迎，很高興我幫助你！ – Sybarium

使表單元格的寬度與其容器相同

回答

相關問題