Menu
Possible Duplicate:
table cell width issue
I have a table set up as
<html> <body bgcolor="#14B3D9"> <table width="100%" border="1" bgcolor="#ffffff"> <tr> <td width="25%">25</td> <td width="50%">50</td> <td width="25%">25</td> </tr> <tr> <td width="50%">50</td> <td width="30%">30</td> <td width="20%">20</td> </tr> </table> </body> </html> How do i get the 2 rows to have different cell width?
312
HTML tables can have different sizes for each column, row or the entire table. Use the style attribute with the width or height properties to specify the size of a table, row or column.
If the text is non wrapping text then you set the cell to width:1px and use white-space:nowrap. The text in that column will then determine the width of the cell. It's a technique commonly used for images and captions (without the white-space:nowrap) and allows text to wrap at the limits of an image automatically.
When table-layout: fixed is applied, the content no longer dictates the layout, but instead, the browser uses any defined widths from the table's first row to define column widths. If no widths are present on the first row, the column widths are divided equally across the table, regardless of content inside the cells.
When should you NOT use HTML tables? HTML tables should be used for tabular data — this is what they are designed for. Unfortunately, a lot of people used to use HTML tables to lay out web pages, e.g. one row to contain the header, one row to contain the content columns, one row to contain the footer, etc.
One solution would be to divide your table into 20 columns of 5% width each, then use colspan on each real column to get the desired width, like this:
<html> <body bgcolor="#14B3D9"> <table width="100%" border="1" bgcolor="#ffffff"> <colgroup> <col width="5%"><col width="5%"> <col width="5%"><col width="5%"> <col width="5%"><col width="5%"> <col width="5%"><col width="5%"> <col width="5%"><col width="5%"> <col width="5%"><col width="5%"> <col width="5%"><col width="5%"> <col width="5%"><col width="5%"> <col width="5%"><col width="5%"> <col width="5%"><col width="5%"> </colgroup> <tr> <td colspan=5>25</td> <td colspan=10>50</td> <td colspan=5>25</td> </tr> <tr> <td colspan=10>50</td> <td colspan=6>30</td> <td colspan=4>20</td> </tr> </table> </body> </html>JSFIDDLE
161
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
