使表单元格的宽度与其容器相同

我正在试图使表单元格（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

使表单元格的宽度与其容器相同

回答

相关问题