0

I basically have a table which happens to get these sort of rows:

<tr>
    <td>H</td>
</tr>
<tr>
    <td>E</td>
    <td>L</td>
    <td>L</td>
    <td>O</td>
    <td>!</td>
</tr>

So as I've added some visual classes like .primary or .info to each row and even got .table-hover table looks kinda strange.

enter image description here

In example above, last row got two columns and first one got only one. What should I do so the smaller table rows expand along the whole table width?

This is the html rendering (Jade) used to produce the same table in example:

.table-responsive
table.table.table-bordered.table-hover(style='max-width: none;')
    tbody                                                       
        tr(ng-show='beenEvaluated')
            th(colspan='4') Token re2
            th(colspan='4') Lexema
        tr(ng-repeat='(tokenRe2,lex) in re2Captures' ng-init='re2s = lex').info
            td(colspan='4') {{tokenRe2}}
            td(ng-repeat= 'i in lex track by $index' style='border:none;' colspan='4')
                li {{i}}

As it can be seen, I tried with colspan but got not results...

1
  • Can you clean up that code a bit? Maybe make a Bootply or JSFiddle example, cause what you posted now is hard to work with. An issue: You don't need colspan on EVERY item, only the ones that don't have enough columns in a row.
    – Tim Lewis
    Dec 1, 2014 at 16:01

1 Answer 1

2

You're looking for the colspan attribute on the <td> tags.

<td colspan="2">H</td>

That will make the <td> two columns long. This can be applied to <th> tags as well, so use accordingly.

Hope that helps!

See this Bootply example

How colspan works:

+----+----+----+
|    |    |    |
+----+----+----+----+
|    |    |    |    |
+----+----+----+----+

This is a table with the structure:

<tr>
  <th></th>
  <th></th>
  <th></th>
</tr>
<tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>

To make the table even, we'd add an extra colspan on the last <th> of the first row:

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

So the table would look like this:

+----+----+----+----+
|    |    |         |
+----+----+----+----+
|    |    |    |    |
+----+----+----+----+

TL:DR colspan fills in space depending the other rows in the table. Use accordingly.

1
  • I tried it but got not results, thanks so far. Check my edits. Dec 1, 2014 at 15:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.