Fill empty html column tables

Question

I can do this using server side and just creating empty cells, but I'm hoping there is a css/html solution to simplify.

    val     val  
________________  
    val     val    val     val    val     val    
_____________________________________________
    val     val    val     val    val     val    val     val  
____________________________________________________________  
    val     val    val     val    
______________________________
    val     val    val     val    val     val    val     val   
____________________________________________________________

If I'm using a bottom border on the tds, it looks wonky because of the missing cells. Is there a fix to this using html/css or should I just do it server side?

To clarify, I don't know what the longest row will be until after it's output.

It would have been helpful to have real code, but just put a space character in the cell, which is kinda hacky. — Waxi, Mar 10 '17 at 20:16
Right so to clarify, I don't have the longest row length without doing some work server-side, so colspan would require this. — Patrick Schomburg, Mar 10 '17 at 20:18
@AmericanSlime just an adendum, one needs to put `border-collapse: collapse;` on table's to use borders on `tr`. Take a look at [this answer](http://stackoverflow.com/a/10040881/3136474). — Dinei, Mar 10 '17 at 20:37

score 1 · Accepted Answer · answered Mar 10 '17 at 20:35

One (hacky) solution is to put colspan="100" on the last <td> of each row. Obs.: if you could have more than 100 columns, put a higher value.

td {
  border-bottom: 1px solid;
}

<table>
  <tr>
    <td>val 1</td>
    <td colspan="100">val 1</td>
  </tr>
  <tr>
    <td colspan="100">val 1</td>
  </tr>
  <tr>
    <td>val 1</td>
    <td>val 1</td>
    <td colspan="100">val 1</td>
  </tr>
  <tr>
    <td>val 1</td>
    <td>val 1</td>
    <td>val 1</td>
    <td>val 1</td>
    <td colspan="100">val 1</td>
  </tr>
</table>

AFAIK all modern browsers have control to not blow up your page and expand the column properly.

Honestly it's just a page for internal use that doesn't need to be perfect, so I'm not overly concerned if the method used isn't something standard or recommended. Works as you described, so good enough for me. — Patrick Schomburg, Mar 10 '17 at 20:39

score 0 · Answer 2 · answered Mar 10 '17 at 20:20

0

I didn't really got your question, but if you want to work with data / loops or something that is not formatting / manually creating html elements you have to use javascript. It doesn't sound like a problem that should be solved on serverside

answered Mar 10 '17 at 20:20

NoOorZ24

2,914
1
14
33

I really just want the border to carry through the missing cells; I thought maybe there was a css method to do that automatically. – Patrick Schomburg Mar 10 '17 at 20:30
Obviously I can find the longest row, calculate the missing number of cells for every other row and do a colspan... I was just hoping for a shortcut. – Patrick Schomburg Mar 10 '17 at 20:32

Fill empty html column tables

2 Answers2