用户如何在会话期间调整 html 表格列宽

Question

用户如何在 html 会话期间调整 html 表格列宽？

表格td元素主要包含通过 css 类合理调整大小的文本输入字段，表格将默认容纳它们。这可能会导致一些水平滚动，但没关系。

但是在编辑会话期间，用户可能需要增加某些列的宽度以帮助他们进行编辑，我该怎么做，下次加载页面时这些设置是否丢失都没有关系。

我假设我使用 Javascript 来更新字段宽度，但如何触发它，视觉提示是什么？

<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>

Answer 1

你可以做这样的事情，你可以使用javascript来添加可拖动区域（设置为蓝色以提高可见性）。如果您对此感到困惑，则应该找到您正在寻找的解决方案。

桌子上的设置宽度很重要，因为没有它就无法正常工作。

这会通过并自动将调整大小触发器附加到每个 TH 元素。该元素上的 Mousedown 将其父 TH 设置为活动元素，这允许全局 mousemove 事件更改其大小。

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>