<div id="wormGearTabulatorTable" style="max-height: 100%; max-width: 100%; position: relative;" class="tabulator" role="grid" tabulator-layout="fitDataTable"><div class="tabulator-header" role="rowgroup"><div class="tabulator-header-contents" role="rowgroup"><div class="tabulator-headers" role="row" style="height: 62px;"><div class="tabulator-col" role="columnheader" aria-sort="none" tabulator-field="name" style="min-width: 40px; width: 78px; height: 62px;"><div class="tabulator-col-content"><div class="tabulator-col-title-holder"><div class="tabulator-col-title" style="text-align: left;">Type</div></div></div></div><span class="tabulator-col-resize-handle" style="height: 62px;"></span><div class="tabulator-col tabulator-col-group" role="columngroup" aria-sort="none" aria-title="Value" style="height: 62px;"><div class="tabulator-col-content" style="max-width: 119px;"><div class="tabulator-col-title-holder"><div class="tabulator-col-title" style="text-align: center;">Value</div></div></div><div class="tabulator-col-group-cols" style="min-height: 42px;"><div class="tabulator-col" role="columnheader" aria-sort="none" tabulator-field="minValue" style="min-width: 40px; width: 40px; height: 41px;"><div class="tabulator-col-content"><div class="tabulator-col-title-holder"><div class="tabulator-col-title" style="text-align: right;">Min</div></div></div></div><span class="tabulator-col-resize-handle" style="height: 41px;"></span><div class="tabulator-col" role="columnheader" aria-sort="none" tabulator-field="nomValue" style="min-width: 40px; width: 40px; height: 41px;"><div class="tabulator-col-content"><div class="tabulator-col-title-holder"><div class="tabulator-col-title" style="text-align: right;">Nom</div></div></div></div><span class="tabulator-col-resize-handle" style="height: 41px;"></span><div class="tabulator-col" role="columnheader" aria-sort="none" tabulator-field="maxValue" style="min-width: 40px; width: 40px; height: 41px;"><div class="tabulator-col-content"><div class="tabulator-col-title-holder"><div class="tabulator-col-title" style="text-align: right;">Max</div></div></div></div><span class="tabulator-col-resize-handle" style="height: 41px;"></span></div></div><span class="tabulator-col-resize-handle" style="height: 62px;"></span></div><div class="tabulator-frozen-rows-holder" style="min-width: 0px;"></div></div></div><div class="tabulator-tableholder" tabindex="0" style="height: 260px;"><div class="tabulator-table" role="rowgroup" style="padding-top: 0px; padding-bottom: 0px;"><div class="tabulator-row tabulator-selectable tabulator-row-odd" role="row"><div class="tabulator-cell" role="gridcell" tabulator-field="name" style="width: 78px; text-align: left; height: 35px;">Axial Damping [N*S/mm]</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell tabulator-editable" role="gridcell" tabulator-field="minValue" tabindex="0" style="width: 40px; text-align: right; height: 35px;">0.00</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell tabulator-editable" role="gridcell" tabulator-field="nomValue" tabindex="0" style="width: 40px; text-align: right; height: 35px;">0.00</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell tabulator-editable" role="gridcell" tabulator-field="maxValue" tabindex="0" style="width: 40px; text-align: right; height: 35px;">0.00</div><span class="tabulator-col-resize-handle"></span></div><div class="tabulator-row tabulator-selectable tabulator-row-even" role="row"><div class="tabulator-cell" role="gridcell" tabulator-field="name" style="width: 78px; text-align: left; height: 35px;">Axial Stiffness [kN/mm]</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell tabulator-editable" role="gridcell" tabulator-field="minValue" tabindex="0" style="width: 40px; text-align: right; height: 35px;">0.00</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell tabulator-editable" role="gridcell" tabulator-field="nomValue" tabindex="0" style="width: 40px; text-align: right; height: 35px;">0.00</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell tabulator-editable" role="gridcell" tabulator-field="maxValue" tabindex="0" style="width: 40px; text-align: right; height: 35px;">0.00</div><span class="tabulator-col-resize-handle"></span></div><div class="tabulator-row tabulator-selectable tabulator-row-odd" role="row"><div class="tabulator-cell" role="gridcell" tabulator-field="name" style="width: 78px; text-align: left; height: 35px;">Efficiency [-]</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell tabulator-editable" role="gridcell" tabulator-field="minValue" tabindex="0" style="width: 40px; text-align: right; height: 35px;">0.83</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell tabulator-editable" role="gridcell" tabulator-field="nomValue" tabindex="0" style="width: 40px; text-align: right; height: 35px;">0.83</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell tabulator-editable" role="gridcell" tabulator-field="maxValue" tabindex="0" style="width: 40px; text-align: right; height: 35px;">0.83</div><span class="tabulator-col-resize-handle"></span></div><div class="tabulator-row tabulator-selectable tabulator-row-even" role="row"><div class="tabulator-cell" role="gridcell" tabulator-field="name" style="width: 78px; text-align: left; height: 35px;">Inertia Worm Wheel [kgmm²]</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell" role="gridcell" tabulator-field="minValue" tabindex="0" style="width: 40px; text-align: right; height: 35px; background-color: rgb(204, 204, 204);"></div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell tabulator-editable" role="gridcell" tabulator-field="nomValue" tabindex="0" style="width: 40px; text-align: right; height: 35px;">0.00</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell" role="gridcell" tabulator-field="maxValue" tabindex="0" style="width: 40px; text-align: right; height: 35px; background-color: rgb(204, 204, 204);"></div><span class="tabulator-col-resize-handle"></span></div><div class="tabulator-row tabulator-selectable tabulator-row-odd" role="row"><div class="tabulator-cell" role="gridcell" tabulator-field="name" style="width: 78px; text-align: left; height: 35px;">Inertia Worm [kgmm²]</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell" role="gridcell" tabulator-field="minValue" tabindex="0" style="width: 40px; text-align: right; height: 35px; background-color: rgb(204, 204, 204);"></div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell tabulator-editable" role="gridcell" tabulator-field="nomValue" tabindex="0" style="width: 40px; text-align: right; height: 35px;">0.00</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell" role="gridcell" tabulator-field="maxValue" tabindex="0" style="width: 40px; text-align: right; height: 35px; background-color: rgb(204, 204, 204);"></div><span class="tabulator-col-resize-handle"></span></div><div class="tabulator-row tabulator-selectable tabulator-row-even" role="row"><div class="tabulator-cell" role="gridcell" tabulator-field="name" style="width: 78px; text-align: left; height: 35px;">Max. Motor Torque [Nm]</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell" role="gridcell" tabulator-field="minValue" tabindex="0" style="width: 40px; text-align: right; height: 35px; background-color: rgb(204, 204, 204);"></div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell tabulator-editable" role="gridcell" tabulator-field="nomValue" tabindex="0" style="width: 40px; text-align: right; height: 35px;">0.00</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell" role="gridcell" tabulator-field="maxValue" tabindex="0" style="width: 40px; text-align: right; height: 35px; background-color: rgb(204, 204, 204);"></div><span class="tabulator-col-resize-handle"></span></div><div class="tabulator-row tabulator-selectable tabulator-row-odd" role="row"><div class="tabulator-cell" role="gridcell" tabulator-field="name" style="width: 78px; text-align: left; height: 35px;">Transmission Worm - Worm Wheel [-]</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell" role="gridcell" tabulator-field="minValue" tabindex="0" style="width: 40px; text-align: right; height: 35px; background-color: rgb(204, 204, 204);"></div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell tabulator-editable" role="gridcell" tabulator-field="nomValue" tabindex="0" style="width: 40px; text-align: right; height: 35px;">21.00</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell" role="gridcell" tabulator-field="maxValue" tabindex="0" style="width: 40px; text-align: right; height: 35px; background-color: rgb(204, 204, 204);"></div><span class="tabulator-col-resize-handle"></span></div></div></div></div>字符串
first image
second image的
我的表宽度应调整到所有缩放，使它应该看起来像第二个图像适当的附件
[enter image description here][1]
this.iShaftTabulatorHeaders = [
{
title: "Type", field: "name", headerHozAlign: "left", width: "42%", headerSort: false, hozAlign: "left", editable: false
},
{
title: "Value", headerHozAlign: "center", width: "60%",
columns: [
{
title: "Min", field: "minValue", editor: "input",editable:editCheck, headerSort: false, width: "20%", hozAlign: "right", formatter:
decimalFormatter
, headerHozAlign: "right", cellEdited: validateIShaft
, editorParams: {
formatter: decimalFormatter
},
},
{
title: "Nom", field: "nomValue", editor: "input", headerSort: false, cellEdited: validateIShaft, width: "20%", hozAlign: "right", formatter: decimalFormatter, headerHozAlign: "right"
, editorParams: {
formatter: decimalFormatter
}
},
{
title: "Max", field: "maxValue", editor: "input",editable:editCheck, cellEdited: validateIShaft, headerSort: false, width: "20%", hozAlign: "right", formatter: decimalFormatter, headerHozAlign: "right"
, editorParams: {
formatter: decimalFormatter
}
},
],
},
];
this.ishaftTabulatorTable = new Tabulator("#ishaftTabulatorTable", {
maxHeight: "100%",
maxWidth: "100%",
data: ishaftTableData,
layout: "fitDataTable",
headerSort: false,
columns: this.iShaftTabulatorHeaders,
})
[it is coming like this for my code ][1]
[i want like this it should adjust for zooms][1]<div *ngIf="tableDataWorm!==null||tableDataWorm !== undefined||tableDataWorm.length !==0" id="ishaftTabulatorTable" style="max-height: 100%;max-width: 100%;position: relative;"></div>
1条答案
按热度按时间laik7k3q1#
你必须写媒体查询自定义css.你必须找到缩放级别和像素宽度之间的关系.所以，如果你通过使用媒体查询量身定制您的网站为各种设备，确保响应，浏览器缩放级别自动考虑.