Question

我正在尝试获取一个按钮，我将其放在表<th>中以扩展标题列的整个宽度和高度，即使同一列中的表格单元格大于文本。如果我这样做，在css中宽度为100％，那么按钮将匹配单元格大小，然后标题将超出按钮和标题。

我正在使用按钮，所以当用户点击它时，列将进行排序。

这是我的代码，只是尝试使用width：

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

这就是它在不使用宽度的情况下的外观：

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

Answer 1

如果将元素设置为width: 100%或height: 100%，则它相对于其父元素。因此，如果您要设置按钮width: 100%，并且希望它是标题宽度的100％，请在标题上设置宽度（不是百分比），它会尊重它。像这样：

HTML：

<table>
  <thead>
    <tr>
      <th>
        <button>shortHeader</button>
      </th>
      <th>
        <button>veryLongLongHeader</button>
      </th>
      <th>
        <button>header</button>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table><table>
  <thead>
    <tr>
      <th>
        <button>shortHeader</button>
      </th>
      <th>
        <button>veryLongLongHeader</button>
      </th>
      <th>
        <button>header</button>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

CSS：

button {
  width: 100%;
}

th {
  width: 100px;
}

table, th, td {
  border: 1px solid #000;
}

查看此fiddle。

Answer 2

用你的js改变点击的css，灰色背景低（#ccc好了）并改变字体大小，1或2px。 TL; DR通过用户交互更改前端以显示更优雅的内容

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

更好的方法是在js文件中添加所有侦听器，它更优雅，但我的示例运行正常。

Answer 3

按下按钮display: block。

＆＃13;

table, th, td { border-collapse: collapse; border: 1px solid #333; }
th button { display: block; width: 100%; }

＆＃13;

<table>
  <thead>
    <tr>
      <th><button>DELETE</button></th>
      <th><button>PARTNO</button></th>
      <th><button>DLT</button></th>
      <th><button>TCOUNT</button></th>
      <th><button>TRANS</button></th>
    </tr>
  </thead>
  <tbody>
    <tr><td></td><td>3</td><td>20170315</td><td>1</td><td>R</td></tr>
    <tr><td></td><td>3</td><td>20170315</td><td>1</td><td>R</td></tr>
    <tr><td></td><td>3</td><td>20170315</td><td>1</td><td>R</td></tr>
    <tr><td></td><td>3</td><td>20170315</td><td>1</td><td>R</td></tr>
  </tbody>
</table>

＆＃13;

如何使按钮扩展html表头的长度？

3 个答案: