CODEWITHSUNDEEP
htmlcsshtml-table
InvalidSyntax
InvalidSyntax

Reputation: 9495

Setting table width at 100% does not fill area

I'm having an issue with my table, I have set the width to 100% in the CSS however it still does not seem to work. Setting the <td> widths seem to be working however.

Heres the HTML:

<table id="events-table">
   <tr class="primary">
      <td>Event</td>
      <td>Acts</td>
      <td>Location</td>
      <td>Date</td>
   </tr>
   <tr>
      <td>Sample</td>
      <td>Sample Acts</td>
      <td>Sample Location</td>
      <td>Friday 16/06/12 22:00</td>
   </tr> 
   <tr>
      <td>Sample</td>
      <td>Sample Acts</td>
      <td>Sample Location</td>
      <td>Friday 16/06/12 22:00</td>
   </tr> 
</table>

Here is the CSS:

table#events-table { width:100%; }
table#events-table td { padding:6px; }
table#events-table td:nth-child(1) { width:30%; }
table#events-table td:nth-child(2) { width:25%; }
table#events-table td:nth-child(3) { width:25%; }
table#events-table td:nth-child(4) { width:20%; }
table#events-table tr:nth-of-type(odd) { background:#222; }
table#events-table tr:nth-of-type(even) { background:#111; }
#events-table .primary { font-weight:bold; background:#000 !important; }

I believe it may be something in my stylesheet that is conflicting with it but I can't get my finger on what it is.

Upvotes: 0

Views: 900

Answers (2)

voodoo417
voodoo417

Reputation: 12101

I think, problem in class col ( style.css - line 4 )

.col {
   display: inline;
   overflow: hidden;
   float: left;
   position: relative;
}

Upvotes: 1

az7ar
az7ar

Reputation: 5237

Removing float:left from class col seems to solve it.

Upvotes: 1

Related Questions