HTML tables, not desired colspan

Question

Feel a bit of a fool here. I want the the 1st <td> to span(approx) 70-80% of the table, with the 2nd and 3rd <td> splitting the remaining space between them.

I thought that setting the <th> colspan to 6, and then giving the first <td> a colspan of 4 will allow me to set accomplish this, but it seems to take up half of the table, and then the last 2 <td> are different widths. Any idea how to solve this?

HTML

<table class="table table-record no-margin-bottom">                 
    <thead>
     <tr>
      <th colspan="6" class="table-tab-active--grey font-weight-bold text-md-center">Tasks</th>
     </tr>                                      
    </thead>
    <tbody>
     <tr class="bg--lighter-grey txt--darker-blue" ">
      <td colspan="4">Lorem Ipsum</td>
      <td colspan="1" class="text-uppercase font-weight-bold">Lorem</td>
      <td colspan="1" class="font-weight-bold text-uppercase no-padding"><button class="btn btn--orange btn-block">Lorem Ipsum</button></td>
     </tr>
     <tr class="bg--lighter-grey txt--darker-blue" ">
      <td colspan="4">Lorem Ipsum</td>
      <td colspan="1" class="text-uppercase font-weight-bold">Lorem</td>
      <td colspan="1" class="font-weight-bold text-uppercase no-padding"><button class="btn btn--lighter-grey btn-block">Button</button></td>
     </tr>                          
    </tbody>
</table>

score 0 · Answer 1 · edited Nov 10 '16 at 18:45

0

Set a % width on the table, and then set each td to have a specified width. You can use something like

.table td:nth-child(0) {width: 70% } 
.table td:nth-child(1) { width:15% }

Or, set % width explicitly in <td> tag.

edited Nov 10 '16 at 18:45

Mr Lister

45,515
15
108
150

answered Oct 27 '16 at 14:06

rob

2,119
1
22
41

Is it not achievable using `colspan` ? – Patrick McDermott Oct 27 '16 at 14:08
Oh...I'm sure it is. I figured you wanted a % since that's what you specified. Personally, I never use colspans as I don't see any benefit, plus it's just more code. Here is a really good rundown of colspan stuff, although I still think it's clunky compared to using percentages. But I'm not the HTML expert. http://stackoverflow.com/questions/9830506/how-do-you-use-colspan-and-rowspan-in-html-tables – rob Oct 27 '16 at 14:11

score 0 · Answer 2 · answered Nov 10 '16 at 19:13

That's not what colspans are for.
You can't use a colspan to increase the width of a column; they're meant to tell the table that a cell should take up multiple columns.

So if there are 6 columns to a table, then using a colspan of 4 will cause a cell to take up 4 columns; and if each column is the same width, then that cell will be 4 times as wide as the other cells, yes.

table {border:1px outset #777; table-layout:fixed}
td {border:1px inset #777; width:16.66%}

<table>
 <tr>
  <td>one</td><td>two</td><td>three</td><td>four</td><td>five</td><td>six</td>
 </tr>
 <tr>
  <td colspan="4">one to four</td><td>five</td><td>six</td>
 </tr>
</table>

But in order for that to work, the columns must have widths already.
So, you won't escape from setting the widths. And if you have to do that anyway, there is no need, in your case, to use colspan as well. Only widths.

table {border:1px outset #777; table-layout:fixed}
td {border:1px inset #777; width:16.66%}
td:first-child {width:66.66%}

<table>
 <tr>
  <td>one</td><td>two</td><td>three</td>
 </tr>
</table>

You may need to study the table-layout property though; it keeps the widths of cells as you set it. Without it, tables may sometimes ignore the specified widths in order to display everything.

HTML tables, not desired colspan

2 Answers2