Table width %

HTML & CSS
1

Not sure why, but the widths I set for table cells are not being respected. Whats the best way to go about this?

      <table id="address-table">
      <tr>
        <th id="th1" style="width:10%">Primary</th>
        <th id="th2" style="width:70%">Address</th>
        <th id="th3" style="width:8%">Delete</th>
     </tr>
        <tr>
         <td class="td-primary"><span class="cb-position">
          <label class="cb-checkbox cb-sm checkboxfix"><span class="cb-inner">
          <input type="checkbox" checked="checked" name="cb1"/></span></label></span>
         </td>	
          	
          <td class="td-ad">55, Mosiac Drive.  Pentagon Avenue.  Large Address Town. 1193743. SA. 111 +88 939392833</td> 
          <td class="td-delete"></td>
        </tr>
   </table>

…

 #address-table{
display:table;
position:relative;
width:99%;
max-width:600px;
margin-left:auto;
margin-right:auto;
}


#th1{
display:table-cell;
width:10% !important;
border-right:1px solid #ccc;	
}
.td-primary{
display:table-cell;
width:10% !important;
border-right:1px solid #ccc;	
}
.td-ad{
display:table-cell;
width:70%;
height:20px;
padding:7px 0;
padding-left:3%;	
font-family:"euro";
font-size:14px;
text-align:left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;	
}
2

Try adding this:

#address-table {
    table-layout: fixed;
}
3

Much better, though labels are sticking out…I can work with this now oh.

Thanks Ralph

4

nice i worked on this and thanks ralphm to resolve my headache

5

Those numbers don’t seem to add up.

10+70+8=88
!=100
6

As Sam points out the table column widths must add up to 100% of the table width. You don’t have to include the padding and borders of the cells in this figure - they are calculated separately which is one of the reasons table layouts remained in use so long - that’s a more intuitive approach than the default content-box model of CSS.

7

Ye, spent a while playing around with numbers to try get it to do what I wanted

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.