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..

    parse JSON to HTML table: How do I format the css of the table?

    Amazing CSS Div scrolling effect, cant explain, link provided. This is a web design issue, how to get an effect like this?

    How to create a right border that's only 70% of its actual size?

    How to do multiple class selectors in Stylus CSS pre-processor

    How to make css opacity property not to be inherited from parent div´s?

    How to center this rotating image (CSS animation)

    How to modify how TinyMCE format text

    How to position and style blockquote in css

    How to get on a single page different links based on css

    How to make html elements fire effects on other elements using css

    How to give different style, color to dotted border of links?

    Show/Hide elements in a table

    SVG image hover animation not shown in css background

    How do I remove the white line under the nav bar

    How to reference a .css file on a razor view?

    How to pass array from method to property using PHP

    how to fix a display difference between chrome and firefox for css relative position?

    How do I position a div under a fixed position div

    How to change CSS of ng-view when triggering CSS in ng-include

    CSS: How to align text to baseline of height-adjusted input element?

    CSS how to select nav and li tags but exclude specified class?

    How to make corners of progress bar round in css

    Bootstrap: How to obtain plain border in input field?

    How to create an highlight animation when a control gets focused [closed]

    How to align DIV right or left or center in CSS without absolute positioning?

    How change css of disabled input checkbox tag?..because it's too light and hard to see

    How to create a 3 columns fluid fixed fluid layout?

    How to make a svg-filled background go animating by pure CSS?

    How to center an overflowing image inside of a constraining div

    How to keep button active after press with jQuery