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

Question

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

以下是它的样子：

我需要让每个表格单元填充黑色区域。我已经取消了容器的填充物。

提前感谢您的帮助！

Answer 1

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删除边框的示例。

Answer 2

您只需将cellspacing="0"和cellpadding="0"以及border:none !important;样式设置为<table>，如下所示：

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;