Table Fit
横線や内容幅合わせが可能なテーブル
- 上下
- 左右
- 横幅指定
- 内容幅合わせ
- 均等幅
- SP 縦表示
- 横スクロール無し
- 右端設置
| タイトル |
項目 |
項目 |
項目 |
| タイトル |
項目 |
項目 |
項目 |
| タイトル |
いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせす |
| 名前 |
項目 1 |
項目 2 |
| 名前 |
横幅指定: 200px / Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. |
項目 2 |
| 名前 |
項目 1 |
項目 2 |
| タイトル |
項目 |
項目 |
項目 |
| タイトル |
項目 |
項目 |
項目 |
| タイトル |
項目 |
項目 |
項目 |
| タイトル |
項目 |
項目 |
項目 |
| タイトル |
いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせす |
| タイトル |
いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせす |
.mod_tableFit {
border-radius: var(--radius-xm);
border: 1px solid var(--line-main);
background: var(--bg-paper);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.mod_tableFit-tb {
width: 100%;
font-size: var(--typo-min);
table-layout: auto;
}
.mod_tableFit-tr {
padding: 12px 0;
display: flex;
}
.mod_tableFit-head,
.mod_tableFit-tr:not(:last-child) {border-bottom: 1px solid var(--line-main);}
.mod_tableFit-td {
padding: 0 24px;
text-align: left;
}
.mod_tableFit-td:not(:first-child) {border-left: 1px solid var(--line-main);}
.mod_tableFit .ti {font-weight: bold;}
.mod_tableFit.wrap .mod_tableFit-td {white-space: wrap;}
.mod_tableFit.wrap .mod_tableFit-td.ti {min-width: fit-content;}
.mod_tableFit.wrap .mod_tableFit-td:not(.ti) {width: auto !important;}
.mod_tableFit.full .mod_tableFit-td {
width: auto !important;
flex: 1;
white-space: wrap;
}
.mod_tableFit-td.right {
margin-left: auto;
padding: 0 16px;
}
.mod_tableFit.hug {
width: fit-content;
max-width: 100%;
margin-inline: auto;
}
.mod_tableFit .btn {color: inherit;}
.mod_tableFit .btn:hover {background: var(--hover);}
.mod_tableFit .mod_tableFit-td .btn.xm {
width: 26px;
height: 26px;
}
@media (770px >= width) {
.mod_tableFit-td {
padding: 0 8px;
white-space: nowrap;
}
.mod_tableFit.sp-row .mod_tableFit-tr {flex-direction: column;}
.mod_tableFit.sp-row .mod_tableFit-td:not(:first-child) {border-left: none;}
.mod_tableFit.sp-row .mod_tableFit-td.ti {margin-bottom: 4px;}
.mod_tableFit.sp-row .mod_tableFit-td {box-sizing: border-box;}
.mod_tableFit.wrap .mod_tableFit-td.ti {min-width: fit-content;}
}
function mod_tableFit(){
$('.mod_tableFit-tb').each(function(){
if($(this).is(':hidden')){return true;}
let $td = $('.mod_tableFit-td',this);
$td.removeAttr('style');
let leng = $('.mod_tableFit-tr:first-child',this).children('.mod_tableFit-td').length;
for(let i = 0; i < leng+1; i++){
let wList = new Array();
$(this).find('.mod_tableFit-td:nth-child('+i+')').each(function(is){
wList[is] = $(this).width()+1;
});
let maxW = Math.max.apply(null, wList);
$(this).find('.mod_tableFit-td:nth-child('+i+')').css({'width':maxW+'px'});
}
let tw = $(this).parent().width();
let sw = $('.mod_tableFit-tr',this).get(0).scrollWidth;
if(tw < sw){
let wLists = new Array();
$td.each(function(i){
wLists[i] = $(this).width();
});
let maxW = Math.max.apply(null, wLists);
let ss = sw-tw;
$td.css({"max-width":maxW - ss+"px"});
}
});
}
$win.load(function(){
mod_tableFit();
});
使い方
HTMLは*-table-*で記述してるが、*-tr-*をflex化して*-td-*に横線を追加。
JSで*-td-*の横幅を内容幅合わせにしている。
flex化しているので[colspan]や[rowspan]は使用できません。
以下はTableと同じ仕様。
*-thead-*,*-tbody-*,*-th-*,*-td-*などの要素に+-.right-+のクラス追加で[text-align: right]付与。
+-.ti-+のクラス追加で[font-weight: bold]付与。
横幅指定について
横幅計算時にに小数点以下の判定はなくして+1pxにしているのでピッタリ合わせようとするとズレる可能性があるので注意してください。
JSは+-mod_tableFit();-+の関数で実行しています。
上部のデモのように初期非表示の場合は横幅を取得できず崩れてしまうので、表示とともに関数を実行しましょう。
横幅指定
横幅を指定したい場合は個別の専用のCSSを書くか[width=""]属性で指定してください。
横paddingが左右で48pxあるので、その分指定サイズより大きくなるので注意してください。
均等幅
+-.mod_tableFit--+に[full]のクラスを追加で、+-td.mod_tableFit-td-+に{flex: 1;}が付与されて横幅を均等にします。
テーブルを内容幅合わせ
+-.mod_tableFit-+に+-.hug-+のクラスを追加で、テーブル自体が内容幅合わせになります。
右端設置
最後の+-td.mod_tableFit-td-+に[action]のクラスを追加で、{margin-left: auto}が付与されて右端に設置されます。