技术求助：将SPRINKLER表格设为750px并优化汞柱列宽

需求回顾 #

• 将SPRINKLER DUTY REQUIREMENT/S表格宽度设为750px，与ANNUBAR FLOW TEST RESULTS表格保持一致
• 优化INCHES OF MERCURY列宽度，该列仅需填入0-34的数字

修改后的HTML代码 #

<!-- Chart Nine Body -->
<div class="row g-0" id="chartNine" style="display:none;">
    <h4 class="card-title">TOWN'S MAIN FED - SPRINKLER ANNUBAR FLOW TEST</h4>
    <table id="dataTable2">
        <thead>
            <tr>
                <th>SPRINKLER DUTY REQUIREMENT/S</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <label></label>
                    <input type="text6" value="0" />
                    <label> L/MIN @ </label>
                    <input type="text6" value="0" />
                    <label> KPA </label>
                </td>
            </tr>
        </tbody>
    </table>
    <button onclick="addTable('dataTable2');">+</button>
    <br>
    <table id="dataTable3">
        <thead>
            <tr>
                <th>ANNUBAR FLOW TEST RESULTS</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="background-color: gray; width: 60px;">
                    INCHES OF MERCURY
                </td>
                <td style="background-color: gray;">
                     MODEL 20T, SINGLE MOUNT 3/8" Dia Probe Size
                     <select>
                         <option disabled selected style="font-weight: bold">SELECT AN OPTION</option>
                         <option>20T DN50</option>
                         <option>20T DN65</option>
                         <option>20T DN80</option>
                         <option>20T DN90</option>
                         <option>20T DN100</option>
                         <option>20T DN125</option>
                         <option>20T DN150</option>
                     </select>
                </td>
                <td style="background-color: gray;">
                     kPa
                </td>
            </tr>
            <tr>
                <td style="background-color: gray; width: 60px;">
                    <label>
                        INCHES OF MERCURY
                    </label>
                </td>
                <td style="background-color: gray;">
                    <label>MODEL 20T, SINGLE MOUNT 3/8" Dia Probe Size
                         <select>
                             <option disabled selected style="font-weight: bold">SELECT AN OPTION</option>
                             <option>20T DN50</option>
                             <option>20T DN65</option>
                             <option>20T DN80</option>
                             <option>20T DN90</option>
                             <option>20T DN100</option>
                             <option>20T DN125</option>
                             <option>20T DN150</option>
                         </select></label>
                </td>
                <td style="background-color: gray;">
                    <label>kPa</label>
                </td>
            </tr>
            <tr>
                <td style="width: 60px;">
                    <label for="range1">
                        0
                    </label>
                </td>
                <td>
                    <label>TEST</label>
                </td>
                <td>
                    <input type="text6" value="0" />
                </td>
            </tr>
        </tbody>
    </table>
</div>
<div class="box" style="width: 750px;">
    <canvas id="nineChart" style="display:none;"></canvas>
</div>

修改后的CSS样式 #

#dataTable2 {
    counter-reset: nRow;
    width: 750px;
    border-collapse: collapse;
}

#dataTable2 thead th {
    font-size: 1.2em;
    padding: .4em 0;
    background-color: gray;
    width: 100%;
}

#dataTable3 {
    width: 750px;
    border-collapse: collapse;
}

#dataTable3 thead th {
    font-size: 1.2em;
    padding: .4em 0;
    background-color: gray;
    width: 100%;
}

#dataTable3 tbody tr td:first-child {
    width: 60px;
    text-align: center;
}

#dataTable2 tbody tr td label:nth-child(1) {
    display: inline-block;
    width: 2em;
    text-align: center;
}

#dataTable2 tbody tr td label:nth-child(1)::before {
    counter-increment: nRow;
    content: counter(nRow);
}

修改说明 #

1. 统一表格宽度：给两个表格添加width:750px，同时设置border-collapse:collapse避免边框额外占用宽度导致溢出；将表头宽度设为100%，确保铺满表格。
2. 优化目标列宽度：通过选择器锁定INCHES OF MERCURY列，设置宽度为60px（足够容纳两位数字+留白），并添加居中对齐让数字显示更整齐，同时在HTML对应单元格补充内联样式作为加固。
3. 修复了原HTML中dataTable3 tbody最后一行缺失<tr>标签的结构问题，确保表格渲染正常。

内容的提问来源于stack exchange，提问作者RottenPotatoes