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

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

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

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

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

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

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

來源

2017-03-31 eaglei22

將滾動條添加到表 –

@RAJNIK PATEL添加了一個滾動條，我只是顯示了一個小問題的快照。 – eaglei22

用你的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文件內的所有聽衆，它更優雅，但我的例子工作正常。

來源

2017-03-31 15:27:32 calexandre

謝謝，不知道爲什麼我不能得到其他建議的工作，但這給了我一個想法，只是創建一個CSS按鈕，只是分配類：懸停選項我的第th元素，並離開我的onclick什麼它是。非常簡單，直接與優雅。也許在onclick中，我將使用一些jQuery來調整顏色，直到排序完成。謝謝你的答案！ – eaglei22

製作你的按鈕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>

來源

2017-03-31 14:34:34 Abhitalks

這沒有奏效。只是顯示在我的文章中的第一張照片。 – eaglei22

工程就好了。我使用Chrome 57，Firefox 51，IE 11和Edge 38/15進行了檢查。如果您發佈[mcve]而不是圖片，會更好。 – Abhitalks

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

來源

2017-03-31 14:38:01 Darren

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

回答

相關問題