如何讓一個按鈕擴展一個html表頭的長度？

Question

我試圖得到一個按鈕，我放在表<th>擴大標題列的全寬和高度，即使當同一列中的表格單元格大於文本。如果我這樣做，在css中寬度爲100％，那麼按鈕將與單元格大小匹配，然後標題將超出按鈕和標題。

我正在使用該按鈕，因此當用戶點擊它時，該列將進行排序。

這是我的代碼只是想與寬度做到：

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

，這是它的外觀，而無需使用寬度：

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

Answer 1

用你的js改變被點擊的th的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 2

製作你的按鈕display: block。

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

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

Answer 3

如果一個元素設置爲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。