Column Width in Tables

[mparzen]

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!

[mparzen · Accepted solution]

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>

[Stef_retired]

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

[kmeeusen]

Thanks Stefanie!

KLM

[DrNufer]

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>

[DrNufer]

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 1	Row 1 Col 2	Row 1 Col 3
Row 2 Col 1	Row 2 Col 2	Row 2 Col 3