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

クリックしたthのCSSを低灰色の背景（#cccは良い）でjsで変更し、フォントサイズを1〜2pxに変更します。 TL; DRの変更、ユーザーとの対話JSで

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

をより良い方法は、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。