table scroll bar only at the bottom of the table

[lschierer]

🙋 Feature Request

I am attempting to add a fairly large table using the coral table class to a page. If it fully displays, it has 18 columns. However, unless my browser window is really wide, it gets truncated on the right side, and a scroll bar appears at the bottom. Since the bottom of the table might be out of sight, I would like some more options for how to display.

🤔 Expected Behavior

I'd like one of several other behaviors to be possible, ideally where I can pick which works best for my site after looking at each.

1. an option to make the table fixed width, and scale the text down in size to fit.
2. display the horizontal scroll bar at both top and bottom of the table, not just the bottom
3. display a floating scroll bar

😯 Current Behavior

the scroll bar is only at the very bottom of the table, and may be out of sight. I have to scroll to the bottom to realize there is more data to the right, especially if it happens to truncate between columns such that there is no visual indication that I should scroll. ### Reproduce Scenario (including but not limited to)

Steps to Reproduce

I added the following short code to a hugo site after enabling the theme:

officium:EvonyTKRTips luke$ cat layouts/shortcodes/sp-table.html 
{{- with .Get "class" -}} {{- $newclass := . -}}{{- end -}}
{{- with .Get "csv" -}} {{- $csv_name := . -}} 
{{- printf "<!-- filename is %s -->\n" $csv_name | safeHTML -}}
{{- $rows := resources.Get $csv_name | transform.Unmarshal -}}
{{- $r1 := first 1 $rows -}}
{{- $r2 := first 1 (after 1 $rows) -}}
{{- $data := newScratch -}}
{{- $typeIsBool := false -}}
{{- $typeIsNumber := false -}}

{{- $data.Set "htmlTable" "<!-- start of Coral Table -->\n" -}}
{{- $data.Add "htmlTable" "  <table is=\"coral-table\">\n" -}}
  {{- range $r1 -}}
    {{- $data.Add "htmlTable" "  <colgroup >\n" -}}
    {{- range $r2 -}}
      {{- range $i, $v := . -}}
			  {{- printf "<!-- found column with content: %s -->\n" $v | safeHTML -}}
				{{- if findRE "[^.0-9]" $v -}}
				  {{- if or (eq $v "true") (eq $v "false") -}}
					  {{- printf "<!-- matched as bool -->\n" | safeHTML -}}
			      {{- $data.Add "htmlTable" "    <col is=\"coral-table-column\" sortable=\"\" " -}}
            {{- $data.Add "htmlTable" "sortabletype=\"alphanumeric\" " -}}
			      {{- $data.Add "htmlTable" ">\n" -}}
            {{- $data.SetInMap "r" (string $i) "bool" -}}
					{{- else -}}
            {{- $data.SetInMap "r" (string $i) "string" -}}
			      {{- $data.Add "htmlTable" "    <col is=\"coral-table-column\" sortable=\"\" " -}}
			      {{- $data.Add "htmlTable" ">\n" -}}
					{{- end -}}
				{{- else -}}
				  {{- printf "<!-- matched as number -->\n" | safeHTML -}}
			    {{- $data.Add "htmlTable" "    <col is=\"coral-table-column\" sortable=\"\" " -}}
          {{- $data.Add "htmlTable" "sortabletype=\"number\" " -}}
				  {{- $data.Add "htmlTable" ">\n" -}}
          {{- $data.SetInMap "r" (string $i) "number" -}}
				{{- end -}}
			{{ end }}
		{{ end }}
  {{- $data.Add "htmlTable" "  </colgroup >\n" -}}
  {{ end }}
  {{- $data.Add "htmlTable" "  <thead is=\"coral-table-head\">\n" -}}
		{{- $data.Add "htmlTable" "  <tr is=\"coral-table-row\">\n" -}}
		{{- range first 1 $rows -}}
      {{- range . -}}
     	  {{- $data.Add "htmlTable" "    <th is=\"coral-table-headercell\">\n" -}}
          {{- $data.Add "htmlTable" (. | markdownify )  -}}
        {{- $data.Add "htmlTable" "\n    </th>\n" -}}
			{{- end -}}
		{{- end -}}
		{{- $data.Add "htmlTable" "  </tr>\n" -}}
	{{- $data.Add "htmlTable" "  </thead>\n" -}}
  {{- $data.Add "htmlTable" "  <tbody is=\"coral-table-body\" divider=\"column\">\n" -}}
		{{- range after 1 $rows -}}
		  {{- $data.Add "htmlTable" "  <tr is=\"coral-table-row\">\n" -}}
				{{- range $i, $c := . -}}
  				{{- if eq (index ($data.Get "r") (string $i)) "number" -}} 
	  				{{- $data.Add "htmlTable" (printf "   <td is=\"coral-table-cell\" value=\"%s\" " $c) -}}
					{{ else }}
            {{- $data.Add "htmlTable" "   <td is=\"coral-table-cell\" " -}}
					{{ end }}
					{{- if (eq $i  0) -}}
						{{- $data.Add "htmlTable" "role=\"rowheader\" " -}}
					{{- end -}}
					{{- $data.Add "htmlTable" ">\n" -}}
						{{- $data.Add "htmlTable" ( markdownify $c ) -}}
			    {{- $data.Add "htmlTable" "\n   </td>\n" -}}
				{{- end -}}
  		{{- $data.Add "htmlTable" "  </tr>\n" -}}
		{{- end -}}
  {{- $data.Add "htmlTable" "  </tbody>\n" -}}
{{- $data.Add "htmlTable" "  </table>\n" -}}
{{- $data.Get "htmlTable" | safeHTML -}}
{{- else -}} 
	{{- errorf "missing value for param 'csv': %s" .Position -}}
{{- end -}}
officium:EvonyTKRTips luke$ 

I used that on an 18 column csv file. Other than the first column, and the header, which ends up fixed at about 6 characters wide, which contains a name, each column contains either a leter grade (A+, A, B+, B...), a number grade (100%, 90% ...), or a rank from 1 to n (max 3 digits). so the header is determining the width of the columns.
"yellows rank" "yellows grade" "yellows score" gets wrapped at the space and ends up with a 7 character wide column for 2-4 character wide data.

Platform and Version

officium:EvonyTKRTips luke$ npx hugo version
hugo v0.111.3-5d4eb5154e1fed125ca8e9b5a0315c4180dab192+extended darwin/arm64 BuildDate=2023-03-12T11:40:50Z VendorInfo=gohugoio
officium:EvonyTKRTips luke$

with a fresh git clone of the theme.

Sample Code that illustrates the problem

See above.

Logs taken while reproducing problem