私の現在のプロジェクトで助けていただきたいと思います。Htmlテーブル - セル内のフォントの最大サイズを
私はデータベースが照会され、結果がさまざまな行と列をテーブルに返すhtml形式の単純なWebページを持っています。
テーブルを作成する必要があるのは、テーブルセル内のテキストのサイズを最大にすることです。表CELLのサイズは偶数でなければならないが、ecllのテキストは可能な限り大きくする必要がある。
私はjQuery BigTextとjTextFillを試しましたが、どちらも固定幅/高さに依存するようです。各データベースクエリはさまざまな行数/列数を返しますので、小さなテーブル結果で画面を最大化しないため、固定幅/高さを設定できません。
これをちょうど終了しました。ほとんどの場合、jQueryを利便性/互換性のために使用します。 HTMLテーブルを拡大幅フォントテーブルに変換します。
ここでは、いくつかのより多くのあいた後です。ここで http://jsfiddle.net/xXHLc/11/
をJSであるが、それは同様に、いくつかのスタイルを必要とします：多分これは良い作品
jQuery("#expandable-font-table TD").each(function()
{
// need to set up the DIVs and TDs first
var jTd = jQuery(this);
var jDiv = jTd.find("DIV");
jDiv.width(jTd.width()+"px"); //set the DIV's width to it's parent TD
jTd.width(jTd.width()+"px"); //set the width of the TD so the table doesn't get confused
});
jQuery("#expandable-font-table TD DIV").each(function()
{
// get each DIV in the table and maximize it's font size
var jDiv = jQuery(this);
this.style.visibility="hidden"; // hide while resizing
var fontSize = jDiv.css("font-size"); // current default font size
fontSize = fontSize.substring(0,fontSize.length-2);
// loop while DIV is still within it's original width
while(this.scrollWidth <= this.clientWidth)
{
fontSize++;
this.style.fontSize = fontSize+"px";
}
this.style.fontSize = (fontSize-1)+"px";
this.style.visibility="visible";
});
HTML/Javascriptのフォントメトリクス機能はありません。いくつかのUIライブラリでは、レンダリングする前に異なるフォントサイズの文字列を測定するためにそれらを使用できます。それがなければ、以下のコードのようなものに頼ることができますが、それはちょっとしたハックです。多分誰かがより良い方法を知っているでしょう。
このコードテストでは、offsetWidthを見て文字列をレンダリングしてから再度レンダリングし、フォントサイズが最大文字列とほぼ同じ幅になるようにフォントサイズを変更します。
<!DOCTYPE html>
<html>
<head>
<script>
function init() {
var exampleData = [
["one", "this is longest cell", "apple"],
["banana", "peach", "kiwi"],
["AB", "yabba", "foo bar baz"]
];
var ncols = 3;
var tab = document.getElementById('tab');
var testArea = document.getElementById('testArea');
// First, loop through the cells and find the biggest one
var maxWidth = 0;
for (var i=0; i<exampleData.length; i++) {
var rowData = exampleData[i];
for (var j=0; j<ncols; j++) {
var span = document.createElement('span');
span.innerHTML = rowData[j];
testArea.appendChild(span);
if (maxWidth < span.offsetWidth)
maxWidth = span.offsetWidth;
testArea.removeChild(span);
}
}
// now, add them to the table, bumping the font so the span is as
// wide as maxWidth
for (var i=0; i<exampleData.length; i++) {
var rowData = exampleData[i];
var row = document.createElement('tr');
for (var j=0; j<ncols; j++) {
var span = document.createElement('span');
span.innerHTML = rowData[j];
testArea.appendChild(span);
/* Adjust style to get close to max size: */
var fs = 10;
span.style.fontSize = fs + "px";
while (span.offsetWidth < maxWidth) {
fs += 1;
span.style.fontSize = fs + "px";
}
// console.log(span.style.fontSize + " -> " + span.offsetWidth);
var td = document.createElement('td');
row.appendChild(td);
td.appendChild(span);
}
tab.appendChild(row);
}
}
</script>
</head>
<body onload='init()'>
<table id='tab'>
</table>
<div id='testArea' style='visibility:hidden'>
</div>
</body>
</html>
こんにちはロブNは、このソリューションは非常にうまく機能し、私は必要なものありません。私はちょうどmysqlのクエリの結果をスクリプト変数（あなたの提案されたソリューションのexamleData）に書くための最善の方法を見つける必要があります –
私は別の質問だと思いますが、あなたのアプリケーションの仕組みに依存します。良い方法はJSONライブラリを使うことです。あなたはあなたが持っているサーバサイドの言語でリストを作成し、それをJSON文字列に変換し、PHP/JSP/etcでページが作成されたときにそのページにレンダリングするか、非同期クエリ。 –
これが答えであれば、それを受け入れることができますか？そうでない場合は、修正できるものはありますか？ –
Matthewありがとう、これは実際に私が探しているものに非常に近いです。しかし、何らかの理由でテーブルの幅をある値に設定すると効果が壊れます（100％が優先されます）。その後、スクリプトは最初の列にのみ影響し、各列のフォントサイズは小さくなります –
今更新されました。これは、テーブルセル上で垂直方向の配置を保持することさえ可能にします。 – Matthew