HTML Table Cell Width for Different Rows

html table cell width for different rows

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>

Different td widths in different rows in tables?

Use three separate <table> blocks, each with a single row having three columns of varying widths.

Table Cells with different widths in different rows

You can use a <colgroup> element to achieve this:

<table border="1">
    <colgroup>
        <col style="width: 25px"/>
        <col style="width: 25px"/>
        <col style="width: 25px"/>
        <col style="width: 25px"/>
        <col style="width: 25px"/>
        <col style="width: 25px"/>
        <col style="width: 25px"/>
        <col style="width: 25px"/>
        <col style="width: 25px"/>
    </colgroup>
    <tr>
        <td colspan="2"> </td>
        <td colspan="2"> </td>
        <td colspan="2"> </td>
        <td colspan="2"> </td>
        <td> </td>
    </tr>
    <tr>
        <td> </td>
        <td colspan="2"> </td>
        <td colspan="2"> </td>
        <td colspan="2"> </td>
        <td colspan="2"> </td>
    </tr>
</table>

It will tell the table that there are 9 columns and each row will span the columns as you originally had.

There are other non-table ways to acheive what you are looking for. Here is one quick example:

<div>
    <div class="row">
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
    </div>
    <div class="row">
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
    </div>
</div>

div.row
{
    clear:both;
}
div div div
{
    width: 50px;
    border-width: 1px;
    border-style: solid;
    border-color: black;
    display: inline-block;
    float: left;
    margin: -1px;
}

div div:nth-child(2n+1) div:first-child,
div div:nth-child(2n) div:last-child
{
    width: 25px;
}

Setting a Html table 'tr' width to have a different width for each cell on one row

table-layout: fixed allows you to set the widths of each <th> or the first row of <td> within the <tbody> if there's no <thead>. Once the widths are established, each column will conform to those widths. It's the nature of a column. If you want different widths for each row try colspan.

table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}

table,
th,
td {
  border: 3px solid black;
}

th {
  width: 25%
}

<table>
  <thead>
    <tr>
      <th>I</th>
      <th>II</th>
      <th>III</th>
      <th>IV</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan='4'>colspan="4"</td>
    </tr>
    <tr>
      <td></td>
      <td colspan='3'>colspan="3"</td>
    </tr>
    <tr>
      <td colspan='2'>colspan="2"</td>
      <td colspan='2'>colspan="2"</td>
    </tr>
  </tbody>
</table>

How to set different column in table to be different width in css?

Assuming your table has standard markup, you can use nth-child or nth-of-type to target specific cells in each row. You can substitute any number into nth-child, if your table has more columns.

/* nth-child(1) = the first td in each tr */td:nth-child(1) {  width: 100px;  background: #ddd;  }
/* the second */td:nth-child(2) {  width: 200px;  background: #ccc;}
/* the third */td:nth-child(3) {  width: 300px;  background: #bbb; }

<table>  <tbody>    <tr>      <td>1.1</td>      <td>1.2</td>      <td>1.3</td>      </tr>    <tr>      <td>2.1</td>      <td>2.2</td>      <td>2.3</td>     </tr>    </tbody>  </table>

How to set up fixed width for td ?

For Bootstrap 4.0:

In Bootstrap 4.0.0 you cannot use the col-* classes reliably (works in Firefox, but not in Chrome).
You need to use OhadR's answer:

<tr>
  <th style="width: 16.66%">Col 1</th>
  <th style="width: 25%">Col 2</th>
  <th style="width: 50%">Col 4</th>
  <th style="width:  8.33%">Col 5</th>
</tr>

For Bootstrap 3.0:

With twitter bootstrap 3 use: class="col-md-*" where * is a number of columns of width.

<tr class="something">
    <td class="col-md-2">A</td>
    <td class="col-md-3">B</td>
    <td class="col-md-6">C</td>
    <td class="col-md-1">D</td>
</tr>

For Bootstrap 2.0:

With twitter bootstrap 2 use: class="span*" where * is a number of columns of width.

<tr class="something">
    <td class="span2">A</td>
    <td class="span3">B</td>
    <td class="span6">C</td>
    <td class="span1">D</td>
</tr>

** If you have <th> elements set the width there and not on the <td> elements.

HTML Table Cell Width for Different Rows