[FIXED] How can user adjust html table column widths during session

Issue

How can user adjust html table column widths during their html session ?

The table td elements contain mostly text input fields that are sensibly sized via css classes and the table will default to accomodate them. This will probably result in some horizontal scrolling, but that is okay.

But during an editing session user may need to increase width of some columns to aid their editing, how do I do this it does't matter if these settings are lost next time they load the page.

I'm assuming I use Javascript to update the field width but how do I trigger this, what is the visual cue ?

<table>
    <tr>
        <th class="tableheading ui-corner-all">
            <label>
                #
            </label>
        </th>
        <th class="tableheading ui-corner-all">
            <label class="largeinputfield">
                Album
            </label>
        </th>
        <th class="tableheading ui-corner-all">
            <label class="mediuminputfield">
                Genre
            </label>
        </th>
        <th class="tableheading ui-corner-all">
            <label class="mediuminputfield">
                Album Artist
            </label>
        </th>
        <th class="tableheading ui-corner-all">
            <label class="mediuminputfield">
                Sort Album Artist
            </label>
        </th>
        <th class="tableheading ui-corner-all">
            <label class="mediuminputfield">
                Album Artists
            </label>
        </th>
        <th class="tableheading ui-corner-all">
            <label class="mediuminputfield">
                Sort Album Artists
            </label>
        </th>
    </tr>
    <tr>
        <td class="tableheading ui-corner-all">
            1
        </td>
        <td>
            <input name="13ALBUM" value="The Orchestral Suites" class="largeinputfield" type="text">
        </td>
        <td>
            <input name="13GENRE" value="" class="mediuminputfield" type="text">
        </td>
        <td>
            <input name="13ALBUM_ARTIST" value="Johann Sebastian Bach; Academy of Ancient Music, Christopher Hogwood" class="mediuminputfield" type="text">
        </td>
        <td>
            <input name="13ALBUM_ARTIST_SORT" value="Bach, Johann Sebastian; Academy of Ancient Music; Hogwood, Christopher" class="mediuminputfield" type="text">
        </td>
        <td>
            <input name="13ALBUM_ARTISTS" value="Johann Sebastian Bach;;;Academy of Ancient Music;;;Christopher Hogwood" class="mediuminputfield" type="text">
        </td>
        <td>
            <input name="13ALBUM_ARTISTS_SORT" value="Bach, Johann Sebastian;;;Academy of Ancient Music;;;Hogwood, Christopher" class="mediuminputfield" type="text">
        </td>
    </tr>
<tr>
<td class="tableheading ui-corner-all">
    1
</td>
<td>
    <input name="14ALBUM" value="The Orchestral Suites" class="largeinputfield" type="text">
</td>
<td>
    <input name="14GENRE" value="" class="mediuminputfield" type="text">
</td>
<td>
    <input name="14ALBUM_ARTIST" value="Johann Sebastian Bach; Academy of Ancient Music, Christopher Hogwood" class="mediuminputfield" type="text">
</td>
<td>
    <input name="14ALBUM_ARTIST_SORT" value="Bach, Johann Sebastian; Academy of Ancient Music; Hogwood, Christopher" class="mediuminputfield" type="text">
</td>
<td>
    <input name="14ALBUM_ARTISTS" value="Johann Sebastian Bach;;;Academy of Ancient Music;;;Christopher Hogwood" class="mediuminputfield" type="text">
</td>
<td>
    <input name="14ALBUM_ARTISTS_SORT" value="Bach, Johann Sebastian;;;Academy of Ancient Music;;;Hogwood, Christopher" class="mediuminputfield" type="text">
</td>
</tr>

Solution

You can do something like this, where you can use javascript to add draggable areas (set to blue for visibility). If you mess around with this, you should get to the solution you're looking for.

The set width on the table is important, as it won't work properly without that.

This goes through and automatically appends a resizing trigger to each TH element. Mousedown on that element sets its parent TH to the active element, which allows the global mousemove event to change its size.

function each(arr, fn){
  let i = arr.length
  while(--i > -1){ fn(arr[i]) }
}

function px(val){ return [val, 'px'].join("") }

var resizeElement, startSize, startX

function beginResize(e){
  killResize()
  let th = e.target.parentElement
  resizeElement = th
  startSize = th.clientWidth
  startX = e.pageX
}

function killResize(){
  resizeElement = null
  startSize = null
  startX = null
}

each(document.querySelectorAll('th'), elem => {
  let trigger = document.createElement('span')
  trigger.className = 'resizeTrigger'
  
  trigger.addEventListener('mousedown', beginResize)
  
  elem.appendChild(trigger)
})

document.addEventListener('mousemove', e => {
  if(resizeElement){
    let diff = e.pageX - startX
    resizeElement.style.width = px(startSize + diff)
  }
})

document.addEventListener('mouseup', killResize)

table {
  table-layout: fixed;
  width: 100%;
}
th {
  position: relative;
}

th > .resizeTrigger {
  content: '';
  position: absolute;
  display: block;
  width: 8px;
  right: -4px;
  top: 0;
  height: 100%;
  background: blue;
  cursor: ew-resize;
}
input {
width: 100%;
}

<table>
    <tr>
        <th class="tableheading ui-corner-all">
            <label>
                #
            </label>
        </th>
        <th class="tableheading ui-corner-all">
            <label class="largeinputfield">
                Album
            </label>
        </th>
        <th class="tableheading ui-corner-all">
            <label class="mediuminputfield">
                Genre
            </label>
        </th>
        <th class="tableheading ui-corner-all">
            <label class="mediuminputfield">
                Album Artist
            </label>
        </th>
        <th class="tableheading ui-corner-all">
            <label class="mediuminputfield">
                Sort Album Artist
            </label>
        </th>
        <th class="tableheading ui-corner-all">
            <label class="mediuminputfield">
                Album Artists
            </label>
        </th>
        <th class="tableheading ui-corner-all">
            <label class="mediuminputfield">
                Sort Album Artists
            </label>
        </th>
    </tr>
    <tr>
        <td class="tableheading ui-corner-all">
            1
        </td>
        <td>
            <input name="13ALBUM" value="The Orchestral Suites" class="largeinputfield" type="text">
        </td>
        <td>
            <input name="13GENRE" value="" class="mediuminputfield" type="text">
        </td>
        <td>
            <input name="13ALBUM_ARTIST" value="Johann Sebastian Bach; Academy of Ancient Music, Christopher Hogwood" class="mediuminputfield" type="text">
        </td>
        <td>
            <input name="13ALBUM_ARTIST_SORT" value="Bach, Johann Sebastian; Academy of Ancient Music; Hogwood, Christopher" class="mediuminputfield" type="text">
        </td>
        <td>
            <input name="13ALBUM_ARTISTS" value="Johann Sebastian Bach;;;Academy of Ancient Music;;;Christopher Hogwood" class="mediuminputfield" type="text">
        </td>
        <td>
            <input name="13ALBUM_ARTISTS_SORT" value="Bach, Johann Sebastian;;;Academy of Ancient Music;;;Hogwood, Christopher" class="mediuminputfield" type="text">
        </td>
    </tr>

Answered By - jmcgriz

Answer Checked By - Katrina (PHPFixing Volunteer)