应用于表单控件":invalid"样式时表格列宽问题

Question

我想以表格形式显示以下form，允许用户输入不应超过1500的金额。当字段的值更改input时，它会检查该值并显示error message。

问题是，当显示error message时，包含input的宽度列会发生变化(如您在代码片段中看到的那样(。在搜索中，我发现类invalid-feedback具有导致宽度变化的display: block;属性。但是我找不到解决这个问题的任何方法。如何解决这个问题？

这是我的代码

$('input').change(function() {
if ($(this).val() > 1500) {
$(this).removeClass('is-valid').addClass("is-invalid");
$($(this).attr('data-msgbox')).html('Amount should not be more than Rs. 1,500');
} else {
$(this).removeClass('is-invalid').addClass("is-valid");
}
});

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="table-responsive">
<table class="table table-borderless table-hover cs-table">
<caption class="cs-content">Fee Particulars and Amount</caption>
<thead class="cs-title">
<tr>
<th scope="col">#</th>
<th scope="col">Particulars</th>
<th scope="col">Amount</th>
</tr>
</thead>
<tbody class="cs-content">
<tr>
<th scope="row">1.</th>
<td>Tution Fee</td>
<td>
<div class="form-group m-0">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fa fa-rupee-sign"></i></div>
</div>
<input type="number" class="form-control" name="tution" id="tutionFee" placeholder="Tution Fee" data-input-length="3,4" data-msgbox="#tutionFeeMsg">
<div class="invalid-feedback" id="tutionFeeMsg"></div>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">2.</th>
<td>Admission/Re-admission</td>
<td>
<div class="form-group m-0">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fa fa-rupee-sign"></i></div>
</div>
<input type="number" class="form-control" name="admission" id="admissionFee" placeholder="Admission/Re-admission Charge" data-input-length="3,4" data-msgbox="#admissionFeeMsg">
<div class="invalid-feedback" id="admissionFeeMsg"></div>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">3.</th>
<td>Library Charge</td>
<td>
<div class="form-group m-0 w-100">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fa fa-rupee-sign"></i></div>
</div>
<input type="number" class="form-control" name="library" id="libraryFee" placeholder="Library Charge" data-input-length="2,3,4" data-msgbox="#libraryFeeMsg">
<div class="invalid-feedback" id="libraryFeeMsg"></div>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">4.</th>
<td>Examination Charge</td>
<td>
<div class="form-group m-0">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fa fa-rupee-sign"></i></div>
</div>
<input type="number" class="form-control" name="examination" id="examinationFee" placeholder="Examination Fee" data-input-length="2,3,4" data-msgbox="#examinationFeeMsg">
<div class="invalid-feedback" id="examinationFeeMsg"></div>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">5.</th>
<td>Electricity Charge</td>
<td>
<div class="form-group m-0">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fa fa-rupee-sign"></i></div>
</div>
<input type="number" class="form-control" name="electricity" id="electricityFee" placeholder="Electricity Charge" data-input-length="2,3,4" data-msgbox="#electricityFeeMsg">
<div class="invalid-feedback" id="electricityFeeMsg"></div>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">6.</th>
<td>Development Charge</td>
<td>
<div class="form-group m-0">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fa fa-rupee-sign"></i></div>
</div>
<input type="number" class="form-control" name="development" id="development" placeholder="Development Charge" data-input-length="2,3,4" data-msgbox="#developmentMsg">
<div class="invalid-feedback" id="developmentMsg"></div>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">7.</th>
<td>Fine</td>
<td>
<div class="form-group m-0">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fa fa-rupee-sign"></i></div>
</div>
<input type="number" class="form-control" name="fine" id="fine" placeholder="Fine" data-input-length="2,3,4" data-msgbox="#fineMsg">
<div class="invalid-feedback" id="fineMsg"></div>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">8.</th>
<td>Back Dues</td>
<td>
<div class="form-group m-0">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fa fa-rupee-sign"></i></div>
</div>
<input type="number" class="form-control" name="dues" id="dues" placeholder="Back Dues" data-input-length="2,3,4" data-msgbox="#duesMsg">
<div class="invalid-feedback" id="duesMsg"></div>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">9.</th>
<td>Late Fine</td>
<td>
<div class="form-group m-0">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fa fa-rupee-sign"></i></div>
</div>
<input type="number" class="form-control" name="late_fine" id="lateFine" placeholder="Late Fine" data-input-length="2,3,4" data-msgbox="#lateFineMsg">
<div class="invalid-feedback" id="lateFineMsg"></div>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">10.</th>
<td>Miscellaneous</td>
<td>
<div class="form-group m-0">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fa fa-rupee-sign"></i></div>
</div>
<input type="number" class="form-control" name="miscellaneous" id="miscellaneous" placeholder="Miscellaneous" data-input-length="2,3,4" data-msgbox="#miscellaneousMsg">
<div class="invalid-feedback" id="miscellaneousMsg"></div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>

谢谢！！

Answer 1

为了固定包含input的列宽，将此width-fixed类分配给包含input字段的每个td并添加此CSS规则.width-fixed{ width:300px!important;}，您可以更改width值以满足您的要求

$('input').change(function() {
if ($(this).val() > 1500) {
$(this).removeClass('is-valid').addClass("is-invalid");
$($(this).attr('data-msgbox')).html('Amount should not be more than Rs. 1,500');
} else {
$(this).removeClass('is-invalid').addClass("is-valid");
}
});

.width-fixed{
width:300px!important;
}
@media (max-width:480px){
.width-fixed{
width:300px!important;
overflow-x: scroll!important;
}
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="table-responsive">
<table class="table table-borderless table-hover cs-table">
<caption class="cs-content">Fee Particulars and Amount</caption>
<thead class="cs-title">
<tr>
<th scope="col">#</th>
<th scope="col">Particulars</th>
<th scope="col">Amount</th>
</tr>
</thead>
<tbody class="cs-content">
<tr>
<th scope="row">1.</th>
<td>Tution Fee</td>
<td class="width-fixed">
<div class="form-group m-0">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fa fa-rupee-sign"></i></div>
</div>
<input type="number" class="form-control" name="tution" id="tutionFee" placeholder="Tution Fee" data-input-length="3,4" data-msgbox="#tutionFeeMsg">
<div class="invalid-feedback" id="tutionFeeMsg"></div>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">2.</th>
<td>Admission/Re-admission</td>
<td class="width-fixed">
<div class="form-group m-0">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fa fa-rupee-sign"></i></div>
</div>
<input type="number" class="form-control" name="admission" id="admissionFee" placeholder="Admission/Re-admission Charge" data-input-length="3,4" data-msgbox="#admissionFeeMsg">
<div class="invalid-feedback" id="admissionFeeMsg"></div>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">3.</th>
<td>Library Charge</td>
<td class="width-fixed">
<div class="form-group m-0 w-100">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fa fa-rupee-sign"></i></div>
</div>
<input type="number" class="form-control" name="library" id="libraryFee" placeholder="Library Charge" data-input-length="2,3,4" data-msgbox="#libraryFeeMsg">
<div class="invalid-feedback" id="libraryFeeMsg"></div>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">4.</th>
<td>Examination Charge</td>
<td class="width-fixed">
<div class="form-group m-0">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fa fa-rupee-sign"></i></div>
</div>
<input type="number" class="form-control" name="examination" id="examinationFee" placeholder="Examination Fee" data-input-length="2,3,4" data-msgbox="#examinationFeeMsg">
<div class="invalid-feedback" id="examinationFeeMsg"></div>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">5.</th>
<td>Electricity Charge</td>
<td class="width-fixed">
<div class="form-group m-0">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fa fa-rupee-sign"></i></div>
</div>
<input type="number" class="form-control" name="electricity" id="electricityFee" placeholder="Electricity Charge" data-input-length="2,3,4" data-msgbox="#electricityFeeMsg">
<div class="invalid-feedback" id="electricityFeeMsg"></div>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">6.</th>
<td>Development Charge</td>
<td class="width-fixed">
<div class="form-group m-0">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fa fa-rupee-sign"></i></div>
</div>
<input type="number" class="form-control" name="development" id="development" placeholder="Development Charge" data-input-length="2,3,4" data-msgbox="#developmentMsg">
<div class="invalid-feedback" id="developmentMsg"></div>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">7.</th>
<td>Fine</td>
<td class="width-fixed">
<div class="form-group m-0">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fa fa-rupee-sign"></i></div>
</div>
<input type="number" class="form-control" name="fine" id="fine" placeholder="Fine" data-input-length="2,3,4" data-msgbox="#fineMsg">
<div class="invalid-feedback" id="fineMsg"></div>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">8.</th>
<td>Back Dues</td>
<td class="width-fixed">
<div class="form-group m-0">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fa fa-rupee-sign"></i></div>
</div>
<input type="number" class="form-control" name="dues" id="dues" placeholder="Back Dues" data-input-length="2,3,4" data-msgbox="#duesMsg">
<div class="invalid-feedback" id="duesMsg"></div>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">9.</th>
<td>Late Fine</td>
<td class="width-fixed">
<div class="form-group m-0">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fa fa-rupee-sign"></i></div>
</div>
<input type="number" class="form-control" name="late_fine" id="lateFine" placeholder="Late Fine" data-input-length="2,3,4" data-msgbox="#lateFineMsg">
<div class="invalid-feedback" id="lateFineMsg"></div>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">10.</th>
<td>Miscellaneous</td>
<td class="width-fixed">
<div class="form-group m-0">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fa fa-rupee-sign"></i></div>
</div>
<input type="number" class="form-control" name="miscellaneous" id="miscellaneous" placeholder="Miscellaneous" data-input-length="2,3,4" data-msgbox="#miscellaneousMsg">
<div class="invalid-feedback" id="miscellaneousMsg"></div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>