2017-03-31 19 views
0

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

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

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

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

enter image description here

,這是它的外觀,而無需使用寬度:

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

enter image description here

+0

將滾動條添加到表 –

+0

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

回答

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

+1

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

0

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

+0

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

+1

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

2

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

相關問題