html table cell width for different rows

Question

Possible Duplicate    table cell width issue       I have a table set up as   lt html gt    lt body bgcolor   14B3D9  gt   lt table width  100   border  1  bgcolor   ffffff  gt       lt tr gt           lt td width  25   gt 25 lt  td gt           lt td width  50   gt 50 lt  td gt           lt td width  25   gt 25 lt  td gt       lt  tr gt       lt tr gt           lt td width  50   gt 50 lt  td gt           lt td width  30   gt 30 lt  td gt           lt td width  20   gt 20 lt  td gt       lt  tr gt   lt  table gt   lt  body gt   lt  html gt    How do i get the 2 rows to have different cell width

User · Answer

You can t have cells of arbitrarily different widths  this is generally a standard behaviour of tables from any space  e g  Excel  otherwise it s no longer a table but just a list of text   You can however have cells span multiple columns  such as    lt table gt       lt tr gt           lt td gt 25 lt  td gt           lt td gt 50 lt  td gt           lt td gt 25 lt  td gt       lt  tr gt       lt tr gt           lt td colspan  2  gt 75 lt  td gt           lt td gt 20 lt  td gt       lt  tr gt   lt  table gt    As an aside  you should avoid using style attributes like border and bgcolor and prefer CSS for those

User · Answer

As far as i know that is impossible and that makes sense since what you are trying to do is against the idea of tabular data presentation  You could however put the data in multiple tables and remove any padding and margins in between them to achieve the same result  at least visibly  Something along the lines of    x000D   x000D   lt html gt  x000D   x000D   lt head gt  x000D     lt style type  text css  gt  x000D       mytable   x000D        border-collapse  collapse  x000D        width  100   x000D        background-color  white  x000D        x000D       mytable-head   x000D        border  1px solid black  x000D        margin-bottom  0  x000D        padding-bottom  0  x000D        x000D       mytable-head td   x000D        border  1px solid black  x000D        x000D       mytable-body   x000D        border  1px solid black  x000D        border-top  0  x000D        margin-top  0  x000D        padding-top  0  x000D        margin-bottom  0  x000D        padding-bottom  0  x000D        x000D       mytable-body td   x000D        border  1px solid black  x000D        border-top  0  x000D        x000D       mytable-footer   x000D        border  1px solid black  x000D        border-top  0  x000D        margin-top  0  x000D        padding-top  0  x000D        x000D       mytable-footer td   x000D        border  1px solid black  x000D        border-top  0  x000D        x000D     lt  style gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D     lt table class  mytable mytable-head  gt  x000D       lt tr gt  x000D         lt td width  25   gt 25 lt  td gt  x000D         lt td width  50   gt 50 lt  td gt  x000D         lt td width  25   gt 25 lt  td gt  x000D       lt  tr gt  x000D     lt  table gt  x000D     lt table class  mytable mytable-body  gt  x000D       lt tr gt  x000D         lt td width  50   gt 50 lt  td gt  x000D         lt td width  30   gt 30 lt  td gt  x000D         lt td width  20   gt 20 lt  td gt  x000D       lt  tr gt  x000D     lt  table gt  x000D     lt table class  mytable mytable-body  gt  x000D       lt tr gt  x000D         lt td width  16   gt 16 lt  td gt  x000D         lt td width  68   gt 68 lt  td gt  x000D         lt td width  16   gt 16 lt  td gt  x000D       lt  tr gt  x000D     lt  table gt  x000D     lt table class  mytable mytable-footer  gt  x000D       lt tr gt  x000D         lt td width  20   gt 20 lt  td gt  x000D         lt td width  30   gt 30 lt  td gt  x000D         lt td width  50   gt 50 lt  td gt  x000D       lt  tr gt  x000D     lt  table gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D    JSFIDDLE  I don t know your requirements but i m sure there s a more elegant solution

User · Answer

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:

_x000D_

<html>_x000D_
<body bgcolor="#14B3D9">_x000D_
<table width="100%" border="1" bgcolor="#ffffff">_x000D_
    <colgroup>_x000D_
        <col width="5%"><col width="5%">_x000D_
        <col width="5%"><col width="5%">_x000D_
        <col width="5%"><col width="5%">_x000D_
        <col width="5%"><col width="5%">_x000D_
        <col width="5%"><col width="5%">_x000D_
        <col width="5%"><col width="5%">_x000D_
        <col width="5%"><col width="5%">_x000D_
        <col width="5%"><col width="5%">_x000D_
        <col width="5%"><col width="5%">_x000D_
        <col width="5%"><col width="5%">_x000D_
    </colgroup>_x000D_
    <tr>_x000D_
        <td colspan=5>25</td>_x000D_
        <td colspan=10>50</td>_x000D_
        <td colspan=5>25</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
        <td colspan=10>50</td>_x000D_
        <td colspan=6>30</td>_x000D_
        <td colspan=4>20</td>_x000D_
    </tr>_x000D_
</table>_x000D_
</body>_x000D_
</html>

_x000D_

JSFIDDLE

User · Answer

with 5 columns and colspan  this is possible  click here   but doesn t make much sense to me     lt table width  100   border  1  bgcolor   ffffff  gt       lt colgroup gt           lt col width  25   gt           lt col width  25   gt           lt col width  25   gt           lt col width  5   gt           lt col width  20   gt       lt  colgroup gt       lt tr gt           lt td gt 25 lt  td gt           lt td colspan  2  gt 50 lt  td gt           lt td colspan  2  gt 25 lt  td gt            lt  tr gt       lt tr gt           lt td colspan  2  gt 50 lt  td gt           lt td colspan  2  gt 30 lt  td gt           lt td gt 20 lt  td gt       lt  tr gt   lt  table gt

[html] html table cell width for different rows

The answer is

Examples related to html

Examples related to css

Tags