html table cell width for different rows

Question

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?

double post http://stackoverflow.com/questions/5937774/table-cell-width-issue — DanielB, May 09 '11 at 14:19
Well lets say you add a new row and you give that row rowspan="2" it will be twice the width a single row is if you would make it 3 it would be three times the size. But i think googling it might work better then my explanation — Ruben, May 09 '11 at 14:19
Tables are designed for expressing tabular data … not bar charts. — Quentin, May 09 '11 at 14:33

score 47 · Answer 1 · edited Nov 16 '14 at 17:56

47

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

edited Nov 16 '14 at 17:56

Pokechu22

4,984
9
37
62

answered May 09 '11 at 14:20

TokPhobia

596
3
4

2

You're absolutely right, I should use colgroup. I'll update the answer with that, thanks. The reason I used 20 columns was because I imagined he might need another configuration of columns, not just the 25-50-25 and 50-30-20 he uses now, and I found the 20-column example a bit easier to understand, although indeed messier. – TokPhobia May 09 '11 at 14:35
IMO this is a pretty ugly solution. – Robert Moore Nov 18 '17 at 03:57
How is the 25-50-25 column reflecting 25% 50% and 25%? The two 25% tds are the same size, if not bigger, than the 50%. Isn't this not the solution? – Matthew Wolman May 04 '20 at 23:58

score 34 · Accepted Answer · edited Nov 16 '14 at 17:55

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:

<html>

<head>
  <style type="text/css">
    .mytable {
      border-collapse: collapse;
      width: 100%;
      background-color: white;
    }
    .mytable-head {
      border: 1px solid black;
      margin-bottom: 0;
      padding-bottom: 0;
    }
    .mytable-head td {
      border: 1px solid black;
    }
    .mytable-body {
      border: 1px solid black;
      border-top: 0;
      margin-top: 0;
      padding-top: 0;
      margin-bottom: 0;
      padding-bottom: 0;
    }
    .mytable-body td {
      border: 1px solid black;
      border-top: 0;
    }
    .mytable-footer {
      border: 1px solid black;
      border-top: 0;
      margin-top: 0;
      padding-top: 0;
    }
    .mytable-footer td {
      border: 1px solid black;
      border-top: 0;
    }
  </style>
</head>

<body>
  <table class="mytable mytable-head">
    <tr>
      <td width="25%">25</td>
      <td width="50%">50</td>
      <td width="25%">25</td>
    </tr>
  </table>
  <table class="mytable mytable-body">
    <tr>
      <td width="50%">50</td>
      <td width="30%">30</td>
      <td width="20%">20</td>
    </tr>
  </table>
  <table class="mytable mytable-body">
    <tr>
      <td width="16%">16</td>
      <td width="68%">68</td>
      <td width="16%">16</td>
    </tr>
  </table>
  <table class="mytable mytable-footer">
    <tr>
      <td width="20%">20</td>
      <td width="30%">30</td>
      <td width="50%">50</td>
    </tr>
  </table>
</body>

</html>

JSFIDDLE

I don't know your requirements but i'm sure there's a more elegant solution.

This is the only solution that works and is a reasonable (minimally hacky) approach — Matthew Wolman, May 05 '20 at 00:50

score 13 · Answer 3 · answered May 09 '11 at 14:22

13

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:

<table>
    <tr>
        <td>25</td>
        <td>50</td>
        <td>25</td>
    </tr>
    <tr>
        <td colspan="2">75</td>
        <td>20</td>
    </tr>
</table>

As an aside, you should avoid using style attributes like border and bgcolor and prefer CSS for those.

answered May 09 '11 at 14:22

roryf

29,592
16
81
103

I am coding an html email, hence i prefer to use inline styles – user544079 May 09 '11 at 14:28
1

@user544079 ah, makes more sense. – roryf May 09 '11 at 15:42

oezi · Answer 4 · 2011-05-09T14:30:27.767

with 5 columns and colspan, this is possible (click here) (but doesn't make much sense to me):

<table width="100%" border="1" bgcolor="#ffffff">
    <colgroup>
        <col width="25%">
        <col width="25%">
        <col width="25%">
        <col width="5%">
        <col width="20%">
    </colgroup>
    <tr>
        <td>25</td>
        <td colspan="2">50</td>
        <td colspan="2">25</td>     
    </tr>
    <tr>
        <td colspan="2">50</td>
        <td colspan="2">30</td>
        <td>20</td>
    </tr>
</table>

html table cell width for different rows

4 Answers4

Linked