CODEWITHSUNDEEP
htmlcsshtml-table
WoShiNiBaBa
WoShiNiBaBa

Reputation: 267

Make table cell the same width as its container

I'm trying to make the table cells (td) the same width as the table. Also eliminate the black space in between each cells.

Here is my code:

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

Here is what it looks like : enter image description here

I need to make each table cell fill the black areas. I have already eliminated the container's paddings.

Thank you in advance for your help!

Upvotes: 1

Views: 197

Answers (2)

Sybarium
Sybarium

Reputation: 51

All you have to do is set cellspacing="0" and cellpadding="0"and style border:none !important; to the <table> as following :

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

Upvotes: 1

StardustGogeta
StardustGogeta

Reputation: 3406

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>

This is an example of using border-collapse: collapse to remove the borders.

Upvotes: 2

Related Questions