HTML Table Rows – How to make a unique cell have 100% width? (with screenshot explanation)

csshtmlhtml-table

Here's my problem: I have an HTML table that looks like this:

HTML Table

What I want is for there to be an additional table row underneath it, except this row spans the full width of the table – but with just one cell. I quickly mocked up an example:

table

As you can see I added another Table Row below it with a single <td> cell inside containing the text. However I want this cell to span 100% of the width of the entire table – it shouldn't resize the width of the 'Name' column.

Is such a thing possible? I am happy to use jQuery or Javascript if needs be – also, this doesn't need to work in IE as every user is using Chrome (although that would be a perk).

Best Answer

In your case, you'd do something like

<tr>
  <td colspan="5">This text should be as long as the entire table's width...</td>
</tr>

The colspan attribute says how many columns the cell should take up. It should work in all browsers that support tables, as it's standard HTML.

In JavaScript, you'd set the colSpan property of the cell, or call .setAttribute("colspan", the_number_of_columns) on it. Either should work. But unless you're generating the cell dynamically, you should just include the colspan attribute in your HTML.

2015 update: the flexbox approach

There are two other answers briefly mentioning flexbox; however, that was more than two years ago, and they don't provide any examples. The specification for flexbox has definitely settled now.

Note: Though CSS Flexible Boxes Layout specification is at the Candidate Recommendation stage, not all browsers have implemented it. WebKit implementation must be prefixed with -webkit-; Internet Explorer implements an old version of the spec, prefixed with -ms-; Opera 12.10 implements the latest version of the spec, unprefixed. See the compatibility table on each property for an up-to-date compatibility status.

(taken from https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)

All major browsers and IE11+ support Flexbox. For IE 10 or older, you can use the FlexieJS shim.

To check current support you can also see here: http://caniuse.com/#feat=flexbox

Working example

With flexbox you can easily switch between any of your rows or columns either having fixed dimensions, content-sized dimensions or remaining-space dimensions. In my example I have set the header to snap to its content (as per the OPs question), I've added a footer to show how to add a fixed-height region and then set the content area to fill up the remaining space.

html,
body {
  height: 100%;
  margin: 0;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted grey;
}

.box .row.header {
  flex: 0 1 auto;
  /* The above is shorthand for:
  flex-grow: 0,
  flex-shrink: 1,
  flex-basis: auto
  */
}

.box .row.content {
  flex: 1 1 auto;
}

.box .row.footer {
  flex: 0 1 40px;
}

<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->

<div class="box">
  <div class="row header">
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>
  <div class="row content">
    <p>
      <b>content</b>
      (fills remaining space)
    </p>
  </div>
  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

In the CSS above, the flex property shorthands the flex-grow, flex-shrink, and flex-basis properties to establish the flexibility of the flex items. Mozilla has a good introduction to the flexible boxes model.

Javascript – How to retrieve an HTML element’s actual width and height

You should use the .offsetWidth and .offsetHeight properties. Note they belong to the element, not .style.

var width = document.getElementById('foo').offsetWidth;

Function .getBoundingClientRect() returns dimensions and location of element as floating-point numbers after performing CSS transforms.

> console.log(document.getElementById('id').getBoundingClientRect())
DOMRect {
    bottom: 177,
    height: 54.7,
    left: 278.5,
    right: 909.5,
    top: 122.3,
    width: 631,
    x: 278.5,
    y: 122.3,
}

Best Answer

Related Solutions

Html – Make a div fill the height of the remaining screen space

2015 update: the flexbox approach

Working example

Javascript – How to retrieve an HTML element’s actual width and height

Related Topic