如何使按钮扩展html表格标题的长度？

我试图得到一个按钮，我把它放在表格

中，以扩展标题列的全宽和全高，即使同一列中的表格单元格大于文本。如果我这样做，宽度100%在css中，那么按钮将只匹配单元格大小，然后标题将延伸到按钮和标题之外

我使用的按钮，所以当用户点击它的列将排序

这是我试图处理宽度的代码：

<th><button onclick="tableColumnSort(this)" style="width:100%">@descriptor.Name</button></th>

@descriptor.Name

这就是不使用宽度时的外观：

<th><button onclick="tableColumnSort(this)">@descriptor.Name</button></th>

@descriptor.Name

---

使按钮

显示：block

表格，th，td{边框折叠：折叠；边框：1px实心#333；}
th按钮{显示：块；宽度：100%；}

删除
零件号
DLT
t计算
反式
3201703151R
3201703151R
3201703151R
3201703151R

如果将元素设置为

宽度：100%

或

高度：100%

，则该元素相对于其父元素。因此，如果您要设置按钮的宽度：100%，并且希望它是标题宽度的100%，那么在标题上设置一个宽度（不是百分比），它将尊重它。像这样：

HTML:

---

看看这个。

用你的js改变点击的th的css，用低灰色背景（#ccc很好），并稍微改变字体大小，1或2px。TL；DR更改前端，以显示与用户交互的更优雅的th

<table>
  <thead>
    <tr>
      <th onclick="tableColumnSort(this); changeTH(this);">
        shortHeader
      </th>
      <th onclick="tableColumnSort(this); changeTH(this);">
        veryLongLongHeader
      </th>
      <th onclick="tableColumnSort(this); changeTH(this);">
        header
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table><table>
  <thead>
    <tr>
      <th onclick="tableColumnSort(this); changeTH(this);">
        shortHeader
      </th>
      <th onclick="tableColumnSort(this); changeTH(this);">
        veryLongLongHeader
      </th>
      <th onclick="tableColumnSort(this); changeTH(this);">
        header
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

游击手
维隆长头
标题
游击手
维隆长头
标题

关于JS：

function changeTH(container){
   var ths = document.getElementsByTagName('th');
   var totalThs = ths.length;
   //reset all ths before set your new th style
   for (i = 0; i < totalThs; i++){
     ths[i].style.background = '#fff';
     ths[i].style.fontSize = 'inherit';
   }
   container.style.background = '#ccc';
   container.style.fontSize = '12px'; //or other size you prefer
}

功能更改（容器）{
var ths=document.getElementsByTagName（'th'）；
var totalThs=ths.length；
//在设置新的th样式之前重置所有th
对于（i=0；i

---

更好的方法是在js文件中添加所有监听器，这更优雅，但我的示例效果很好。

将滚动条添加到table@RAJNIKPATEL添加了一个滚动条，我只是显示了问题的一个小快照。这不起作用。就像我在帖子中的第一张照片一样，效果很好。我用Chrome57、Firefox51、IE11和Edge 38/15进行了检查。如果你发布了一个而不是图片，那会更好。谢谢，我不知道为什么我不能让其他建议发挥作用，但这让我想到只创建一个css按钮，然后将类与：hover选项分配给我的th元素，并保留onclick。非常简单，简洁，优雅。也许在onclick中，我将使用一些jQuery来调整颜色，直到排序完成。谢谢你的开箱即用回答！

<table>
  <thead>
    <tr>
      <th onclick="tableColumnSort(this); changeTH(this);">
        shortHeader
      </th>
      <th onclick="tableColumnSort(this); changeTH(this);">
        veryLongLongHeader
      </th>
      <th onclick="tableColumnSort(this); changeTH(this);">
        header
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table><table>
  <thead>
    <tr>
      <th onclick="tableColumnSort(this); changeTH(this);">
        shortHeader
      </th>
      <th onclick="tableColumnSort(this); changeTH(this);">
        veryLongLongHeader
      </th>
      <th onclick="tableColumnSort(this); changeTH(this);">
        header
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

function changeTH(container){
   var ths = document.getElementsByTagName('th');
   var totalThs = ths.length;
   //reset all ths before set your new th style
   for (i = 0; i < totalThs; i++){
     ths[i].style.background = '#fff';
     ths[i].style.fontSize = 'inherit';
   }
   container.style.background = '#ccc';
   container.style.fontSize = '12px'; //or other size you prefer
}