Colspan Messes with Fixed Width Table

colspan messes with fixed width table

You could also use colgroup and col to set the width:

<table>
    <colgroup>
        <col class="short" />
        <col span="2" class="long" />
    </colgroup>
    <tr>
        <td>Short</td>
        <td>Long long long long</td>
        <td>Long long long long</td>
    </tr>
    <tr>
        <td>Short</td>
        <td>Long long long long</td>
        <td>Long long long long</td>
    </tr>
    <tr>
        <td>Short</td>
        <td>Long long long long</td>
        <td>Long long long long</td>
    </tr>
</table>

With this CSS:

table { width: 100%; }
.short {
    background: lightblue;
    width: 20%
}
.long {
    background: lightgreen;
    width: 40%;
}
.multiCells { background: #F3A633; }

This way you do not need to give every td a class, makes it easier when you want to change the classname.

JSFiddle demo

colgroup MDN Article

Table css width is broken by colspan attribute

You can use colgroup (original answer here)

html * {
  font-size: 98%;
  color: #000;
  font-family: Arial !important;
}

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

th,
td {
  padding: 15px;
  word-break: break-all;
  border: 1px solid black;
}

.short {
  width: 5%;
}

.long {
  width: 95%;
}

<table style="width: 100%">
  <colgroup>
    <col class="short" />
    <col class="long" />
  </colgroup>
  <tr>
    <td colspan="2">
      <div style="font-size: 300%;">Table of Contents</div>
    </td>
  </tr>
  <tr>
    <td>
      <div>1</div>
    </td>
    <td>
      <div>2</div>
    </td>
  </tr>
</table>

Colspan and table-layout:fixed break my table style

Table layout fixed means that the table will use the first row to define it styles - as you have a colspan of 4 in your first row, it will not know what widths to give to the columns in the second row and therefore splits them equally.

From MDN about table layout fixed:

Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.

In order to get around this, you can define a colgroup and then give your widths to those columns and they will be applied to the rest of the table:

table {

  table-layout: fixed;

  width: 100%;

}

th,

td {

  border: 1px solid black;

}

col:first-child {

  width: 5%;

  background-color: lightblue;

}

col:nth-child(2) {

  width: 70%;

  background-color: lightpink;

}

col:nth-child(3) {

  width: 10%;

  background-color: lightgreen;

}

col:nth-child(4) {

  width: 10%;

  background-color: #a9a9a9;

}

col:nth-child(5) {

  width: 5%;

  background-color: #d4d4d4;

}

<table>

    <colgroup>

        <col>

        <col>

        <col>

        <col>

        <col>

    </colgroup>

  <thead>

    <tr>

      <th class="col1">1</th>

      <th colspan="4">2</th>

    </tr>

    <tr>

      <th class="col1">a</th>

      <th class="col2">b</th>

      <th class="col3">c</th>

      <th class="col4">d</th>

      <th class="col5">e</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>a</td>

      <td>b</td>

      <td>c</td>

      <td>d</td>

      <td>e</td>

    </tr>

    <tr>

      <td>a</td>

      <td>b</td>

      <td>c</td>

      <td>d</td>

      <td>e</td>

    </tr>

    <tr>

      <td>a</td>

      <td>b</td>

      <td>c</td>

      <td>d</td>

      <td>e</td>

    </tr>

  </tbody>

</table>

Styling a table layout fixed & fixed width columns + colspan

You could add a couple of col tags after the opening <table> tag and set the width on those:

<style>
   table { width: 200px; white-space: nowrap; table-layout: fixed; }
   .a { overflow: hidden; text-overflow: ellipsis }
   .b { overflow: hidden; text-overflow: ellipsis }
   .cola { width: 10px; }
   .colb { width: 190px; }
</style>

<table border="1" style="">
    <col class="cola" />
    <col class="colb" />
    <tr>         
        <td colspan="2">Some content header goes in here</td>
    </tr>
    <tr>
        <td class="a">This cells has more content</td>
        <td class="b">Less content here</td>
    </tr>
</table>

Colspan on cell in one row seems to prevent setting TD width in all the other rows. Why?

I had forgotten that the table has the style 'table-layout: fixed' and this was causing the difficulty. When this style is set the widths of the cells in the first row are applied to all following rows. As the first row contained a colspan I guess IE got confused (FF handles it ok).

Any way it's not as flexible as I wanted but this worked for me.

<html>
  <body>
  <div style="width:350px; border:blue 1px solid">
    <table border="0" style="font-family:Arial,Helvetica;font-size:10pt;table-layout:fixed;">
      <tr>
        <td style="width:17px;"/>
        <td style="width:20px;"/>
        <td style="width:180px;"/>
        <td style="width:130px;"/>
      </tr>
      <tr>
        <td colspan="4" style="width:100%;text-align:center;font-eight:bold;background-color:#eef;">09 January 2012</td>
      </tr>
      <tr title="09 January 2012">
        <td align="center" valign="middle" colspan="1" style="width:17px;height:1.1em;"><img src="../../../../_layouts/images/WebParts2010/AWT3_Klein.png" style="border-style:None;border-width:0px;height:1.1em;width:1.1em;" /></td>
        <td align="left" valign="top" colspan="1" style="width:20px;height:1.1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">LO</td>
        <td align="left" valign="top" colspan="1" style="width:180px;height:1.1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Customer Name Ltd.</td>
        <td align="left" valign="top" colspan="1" style="width:120px;height:1.1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Reason for visiting today</td>
      </tr>
    </table>
  </div>
</body>
</html>

Table embeded in TD with COLSPAN messing up parent TABLE

In your javascript:

elm.style.display = "inline";

Inline display is a no-no for tr - table row - tag.

The right thing to do is set display to "table-row":

elm.style.display = "table-row";

You can read more about that here: http://www.quirksmode.org/css/display.html
By the way, you should consider adding a jsFiddle for these kind of questions.

---

Related Topics