javascript 如何调整制表宽度,使所有浏览器缩放它应该正确调整

7gs2gvoe  于 11个月前  发布在  Java
关注(0)|答案(1)|浏览(233)
<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>
laik7k3q

laik7k3q1#

你必须写媒体查询自定义css.你必须找到缩放级别和像素宽度之间的关系.所以,如果你通过使用媒体查询量身定制您的网站为各种设备,确保响应,浏览器缩放级别自动考虑.

相关问题