How to make colspan work without affecting width of the other rows


Tags: html,css

Problem :

I noticed that the content of a td with a colspan over all columns affects the width of the other rows td.

Can anyone please explain me why this is and how I can get this working properly? I have two requirements

  • The first row's second column should take as much space as possible (expand)
  • The second row should take 100% width, using a colspan=2 in the example

Note: I was playing around with some CSS properties and figured out word-break:break-all would fix the issue, but I would like to understand this one and/or have a better solution.

Here is the example with a longer text:

<table border="1">
  <colgroup>
    <col>
    <col style="width:100%">            
  </colgroup>
  <tr>
    <td>aaaaaaaaaaaaaaaaaaaaaa</td>
    <td>Take as much space as possible, expand</td>
  </tr>
  <tr>
    <td colspan="2">loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</td>
  </tr>
</table>

And here the result with a shorter text, you can see the first row is different now.

<table border="1">
  <colgroup>
    <col>
    <col style="width:100%">            
  </colgroup>
  <tr>
    <td>aaaaaaaaaaaaaaaaaaaaaa</td>
    <td>Take as much space as possible, expand</td>
  </tr>
  <tr>
    <td colspan="2">shorter</td>
  </tr>
</table>



Solution :

table is maybe the most odd element of them all and has historical cause issues cross browser and I can't say why it behaves different in different browser, it just does.

In your case, setting a small width on the first td will help solve your issue.

table {
  width: 100%;
}
<table border="1">
  <colgroup>
    <col style="width:5%">
    <col style="width:95%">
  </colgroup>
  <tr>
    <td>aaaaaaaaaaaaaaaaaaaaaa</td>
    <td>Take as much space as possible, expand</td>
  </tr>
  <tr>
    <td colspan="2">looooooooooooooooooooooooooooooooooooooooooooooooong</td>
  </tr>
</table>

<table border="1">
  <colgroup>
    <col style="width:5%">
    <col style="width:95%">
  </colgroup>
  <tr>
    <td>aaaaaaaaaaaaaaaaaaaaaa</td>
    <td>Take as much space as possible, expand</td>
  </tr>
  <tr>
    <td colspan="2">short</td>
  </tr>
</table>


    CSS Howto..

    How to set the last inner div to fill the rest of the wrapper height with CSS?

    How to style webpage with percentages

    How can I fade in a div on hover with jquery on top of image with animated rollover

    How to create a horizontal scroll bar when shrinking the window

    How to add bold text with CSS? [duplicate]

    SharePoint 2007 popup rich text editor displays corporate logo from master page - how can I remove this?

    How to persist checking the screen width in Javascript

    How to make a CSS element extend beyond all borders of containing div?

    How to convert all color code #XXYYZZ to shorter 3 character version #XYZ of whole css file?

    How to draw a guitar string using css?

    How do I use the CSS box-model to make sure my body is spaced from the edge of the window despite being 100% high?

    How to click and swap a text in a button?

    How Do I Use Gulp to Minify and Autoprefix CSS files from SASS/SCSS

    How to center CSS-shapes within a wrapper in a row

    My pure CSS dropdown isn't working, anybody knows how to fix it? [duplicate]

    How to figure out what is going on with this nice CSS horizontal menu? [closed]

    hide form with css3 and show default div.

    How to get the “declared” CSS value, not the computed CSS value

    How did infusion.com skew the elements? The CSS file does not seem to have skewing in it and the menu is also skewed

    How to differentiate between high-res phone and desktop using css or js or anything else?

    Twitter boostrap and css: How to remove the modal overlay and refocus on the input box, so the users can type with the modal open

    How to make styling and functioning of form elements get not to break in all browsers?

    How to stop a webpage from loading until all jQuery load functions are complete?

    How to add a border on a table to a generated file from PrinceXML?

    How to fix width of DIV that contains floated elements?

    How to center in
    without text-align?

    How do I move this label inside my textarea?

    css hover element to show child, how can I keep the hover css on the parent when I mouseover the child?

    css: how to have a variable column size with text overflow ellipsis

    How to increase cell height of GWT celltable : Issue with IE?