I am currently working on creating a side-scrolling table using Bootstrap formatting. The challenge I'm facing is displaying the entire string from the dropdown selects (DropdownList) as the column widths are limited due to being encapsulated within bootstrap. Ideally, I would like to make the columns wider and enable side-scrolling specifically for the table.
https://i.sstatic.net/4yPzm.png
<div class="row">
<div class="col-md-12">
<table id="DetailsMolarTable" class="table table-striped table-condensed">
<thead>
<tr>
<th colspan="1">@ApplicationStrings.RequestedConcentration</th>
<th colspan="1" class="conc-requested-weight-input"></th>
<th colspan="1" class="conc-requested-volume-input"></th>
<th colspan="1" class="oem-range-input"></th>
<th colspan="1">@ApplicationStrings.ConcCertified</th>
</tr>
<tr>
<th hidden>ID</th>
<th class="col-md-1 conc-requested-molar-input">@ApplicationStrings.Molar</th>
<th class="col-md-1 conc-requested-weight-input">@ApplicationStrings.Weight</th>
<th class="col-md-1 conc-requested-volume-input">@ApplicationStrings.Volume</th>
<th class="col-md-1 oem-range-input">@ApplicationStrings.OEMRange</th>
<th class="col-md-1 conc-certified-molar-input">@ApplicationStrings.Molar</th>
<th class="col-md-1 conc-certified-weight-input">@ApplicationStrings.Weight</th>
<th class="col-md-1 conc-certified-volume-input">@ApplicationStrings.Volume</th>
<th class="col-md-1 precision-select">@ApplicationStrings.Precision</th>
<th class="col-md-1" >@ApplicationStrings.Units</th>
<th class="col-md-1">@ApplicationStrings.PXNum</th>
<th class="col-md-2">@ApplicationStrings.ComponentName</th>
<th class="col-md-1">@ApplicationStrings.ComponentGrade</th>
<th class="col-md-1">@ApplicationStrings.Uncertainty</th>
<th class="col-md-1">@ApplicationStrings.Instruments</th>
<th class="col-md-1">@ApplicationStrings.GasStandards</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.Details)
{
<tr>
<td id="certDetailId" hidden class="item-index">@item.DetailID</td>
<td class="conc-requested-molar-input">
<div class="input-group input-group-sm">
<input type="text" class="form-control" value="@item.ConcRequested_Mol" />
<div class="input-group-btn">
<button class="btn btn-default" name="btnBalance" aria-label="balance concentration">
<span class="glyphicon glyphicon-equalizer"> </span>
</button>
</div>
</div>
</td>
// Rest of the table content omitted for brevity
</tr>
}
</tbody>
<tfoot><tfoot>
</table>
</div>
</div>
If you have any other suggestions or alternative solutions, feel free to share them! :)