Community

cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
mparzen
Community Member

Column Width in Tables

Jump to solution

Column width in tables

I had a table I liked, then added another column (its the last column) and its much wider than all the other columns. Is there a way to modify column widths? Not sure why this one is wider than all the other columns.

Thanks!

1 Solution

Accepted Solutions
mparzen
Community Member

and the answer sort of comes from canvas support. they said use the <col> command in html but did not' give any instructions. not what i wanted to do (that is go to html).

but a quick google search found the following fantastic answer on stackexchange; say you want first column 15% of the space, next 70% and last column 15%. then add the following to the beginning of your html in canvas:

html - Setting table column width - Stack Overflow

<table>
  
<colgroup>
  
<col span="1" style="width: 15%;">
  
<col span="1" style="width: 70%;">
  
<col span="1" style="width: 15%;">
  
</colgroup>
  
<!-- Put <thead>, <tbody>, and <tr>'s here! -->
</table>

View solution in original post

5 Replies
mparzen
Community Member

and the answer sort of comes from canvas support. they said use the <col> command in html but did not' give any instructions. not what i wanted to do (that is go to html).

but a quick google search found the following fantastic answer on stackexchange; say you want first column 15% of the space, next 70% and last column 15%. then add the following to the beginning of your html in canvas:

html - Setting table column width - Stack Overflow

<table>
  
<colgroup>
  
<col span="1" style="width: 15%;">
  
<col span="1" style="width: 70%;">
  
<col span="1" style="width: 15%;">
  
</colgroup>
  
<!-- Put <thead>, <tbody>, and <tr>'s here! -->
</table>

 @mparzen , may I steal this little code snippet to add to  @kmeeusen ​'s collection in the CanvasHacks Classroom ?

Thanks Stefanie!

KLM

Note: the <col> tag is actually not supported by html5.  The best practice is actually to use css to establish the width of a column.  Simply apply it to the <td>'s of the first row.  Example:

<table>

  <tr>

    <td style="width:15px">Row 1 Col 1</td>

    <td style="width:75px">Row 1 Col 2</td>

    <td style="width:15px">Row 1 Col 3</td>

  </tr>

  <tr>

    <td>Row 2 Col 1</td>

    <td>Row 2 Col 2</td>

    <td>Row 2 Col 3</td>

  </tr>

</table>

And how this table would render:

<table style="border: 1px solid black;">

<tbody>

<tr>

<td style="width: 15%;">Row 1 Col 1</td>

<td style="width: 70%;">Row 1 Col 2</td>

<td style="width: 15%;">Row 1 Col 3</td>

</tr>

<tr>

<td>Row 2 Col 1</td>

<td>Row 2 Col 2</td>

<td>Row 2 Col 3</td>

</tr>

</tbody>

</table>

              

Row 1 Col 1Row 1 Col 2Row 1 Col 3
Row 2 Col 1Row 2 Col 2Row 2 Col 3