CODEWITHSUNDEEP
css
BigBoy1337
BigBoy1337

Reputation: 5023

How to get a td table cell to span the full width of a table?

https://jsfiddle.net/qr2co5zx/

<table id="list" style="display:table;border: 1px solid black;width:200px;border-collapse: collapse;">
  <p>Today's Tasks</p>
  <td colspan=100% style="background:lightgrey;display:table-row;border: 1px solid black;border-collapse: collapse;width:100%;">Restock Shelf C2</td>
  <br>
  <br>
  <td style="display:table-row;">Empty Garbage</td>
</table>

As you can see the first element ends about halfway through the table. I think perhaps its making room for the next column over? I don't want this - I only want 1 cell per row.

Upvotes: 0

Views: 6853

Answers (1)

arkascha
arkascha

Reputation: 42984

Take a look into the documentation. The colspan property takes a number as value, not a percentage. It is not a styling attribute, but a logical declaration. It takes the number of columns this cell should span. So 2 in your example.

Apart from that: you cannot have a <p> block inside a table and you have to define a table rows (<tr>) to place your table cells into (<td>).

Take a look at this modified example: 

<p>Today's Tasks</p>  
<table id="list" style="border: 1px solid black; width:200px; border-collapse: collapse;">
    <tr>
        <td colspan="2" style="background:lightgrey"> Restock Shelf C2</td>
    </tr>
    <tr>
        <td> Empty Garbage 1 </td>
        <td> Empty Garbage 2 </td>
    </tr>
</table>

This is a fiddle demonstrating the markup: https://jsfiddle.net/5oLw62wL/1/

Upvotes: 5

Related Questions