Bootstrap-使用表格响应功能且未固定以像素为单位的宽度固定在左侧的固定列？
目标
使用JHipster v5.0.1，Bootstrap v4.0.0
我想修复第一列，并在屏幕尺寸变小时根据需要滚动。
++第一列可以包含各种内容长度。我希望它的大小与内容长度保持一致。
<table class="table table-striped table-bordered table-responsive">
<thead>
<th> Title to be fixed </th>
<th> Title to be scrolled A</th>
<th> Title to be scrolled B</th>
<th> Title to be scrolled C</th>
<th> Title to be scrolled E</th>
<th> Title to be scrolled F</th>
<th> Title to be scrolled G</th>
<th> Title to be scrolled H</th>
<th> Title to be scrolled I</th>
<th> Title to be scrolled J</th>
<th> Title to be scrolled K</th>
<th> Title to be scrolled L</th>
<th> Title to be scrolled M</th>
<th> Title to be scrolled N</th>
<th> Title to be scrolled O</th>
<th> Title to be scrolled P</th>
<th> Title to be scrolled Q</th>
<th> Title to be scrolled R</th>
<th> Title to be scrolled S</th>
<th> Title to be scrolled T</th>
<th> Title to be scrolled U</th>
<th> Title to be scrolled V</th>
<th> Title to be scrolled W</th>
<th> Title to be scrolled X</th>
<th> Title to be scrolled Y</th>
<th> Title to be scrolled Z</th>
</thead>
<tbody>
<td> Content to be fixed </td>
<td> Content to be scrolled A</td>
<td> Content to be scrolled B</td>
<td> Content to be scrolled C</td>
<td> Content to be scrolled E</td>
<td> Content to be scrolled F</td>
<td> Content to be scrolled G</td>
<td> Content to be scrolled H</td>
<td> Content to be scrolled I</td>
<td> Content to be scrolled J</td>
<td> Content to be scrolled K</td>
<td> Content to be scrolled L</td>
<td> Content to be scrolled M</td>
<td> Content to be scrolled N</td>
<td> Content to be scrolled O</td>
<td> Content to be scrolled P</td>
<td> Content to be scrolled Q</td>
<td> Content to be scrolled R</td>
<td> Content to be scrolled S</td>
<td> Content to be scrolled T</td>
<td> Content to be scrolled U</td>
<td> Content to be scrolled V</td>
<td> Content to be scrolled W</td>
<td> Content to be scrolled X</td>
<td> Content to be scrolled Y</td>
<td> Content to be scrolled Z</td>
</tbody>
</table>
我想要这样的东西，但第一列固定：
尝试
我尝试了一些在stackoverflow中发现的代码，尤其是在此问题中：how do I create an HTML table with fixed/frozen left column and scrollable body?
但是，它们中的大多数都使用固定宽度的表格，并且这种样式在td style =“ width：200px”中使用。这对我来说是个问题，因为我希望表格适应屏幕用户的大小，而不是表格要固定大小。另外，我发现的大多数代码都摆脱了表响应类，我希望保留该类以进行滚动激活，因为该类可以根据表大小和屏幕大小进行调整。
尝试2
例如，我还尝试使用scooterlord的解决方案： How to make fixed header table with table and cell width in percents in CSS?
，但我无法使其在我的页面上正常工作。标头不出现。这里是概述：
如果我最终可以使它们出现，那么我会失去表引导程序类的所有优点吗？！
尝试3
.table-centered td, th {
text-align: center !important;
vertical-align: middle !important;
white-space: nowrap !important;
padding: 0.2rem !important;
}
input {
vertical-align: middle;
text-align: center;
}
.position-fixed {
background-color: white;
}
<div>
<table class="table table-striped table-bordered table-responsive">
<thead>
<tr>
<th class="position-fixed"> Title to be fixed </th>
<th> Title to be scrolled A</th>
<th> Title to be scrolled B</th>
<th> Title to be scrolled C</th>
<th> Title to be scrolled E</th>
<th> Title to be scrolled F</th>
<th> Title to be scrolled G</th>
<th> Title to be scrolled H</th>
<th> Title to be scrolled I</th>
<th> Title to be scrolled J</th>
<th> Title to be scrolled K</th>
<th> Title to be scrolled L</th>
<th> Title to be scrolled M</th>
<th> Title to be scrolled N</th>
<th> Title to be scrolled O</th>
<th> Title to be scrolled P</th>
<th> Title to be scrolled Q</th>
<th> Title to be scrolled R</th>
<th> Title to be scrolled S</th>
<th> Title to be scrolled T</th>
<th> Title to be scrolled U</th>
<th> Title to be scrolled V</th>
<th> Title to be scrolled W</th>
<th> Title to be scrolled X</th>
<th> Title to be scrolled Y</th>
<th> Title to be scrolled Z</th>
</tr>
</thead>
<tbody>
<tr>
<td class="position-fixed"> Content to be fixed </td>
<td> Content to be scrolled A</td>
<td> Content to be scrolled B</td>
<td> Content to be scrolled C</td>
<td> Content to be scrolled E</td>
<td> Content to be scrolled F</td>
<td> Content to be scrolled G</td>
<td> Content to be scrolled H</td>
<td> Content to be scrolled I</td>
<td> Content to be scrolled J</td>
<td> Content to be scrolled K</td>
<td> Content to be scrolled L</td>
<td> Content to be scrolled M</td>
<td> Content to be scrolled N</td>
<td> Content to be scrolled O</td>
<td> Content to be scrolled P</td>
<td> Content to be scrolled Q</td>
<td> Content to be scrolled R</td>
<td> Content to be scrolled S</td>
<td> Content to be scrolled T</td>
<td> Content to be scrolled U</td>
<td> Content to be scrolled V</td>
<td> Content to be scrolled W</td>
<td> Content to be scrolled X</td>
<td> Content to be scrolled Y</td>
<td> Content to be scrolled Z</td>
</tr>
</tbody>
</table>
</div>
仍然不好，像元大小与表格的其余部分不一致。并且“固定”后的第一列被隐藏。
尝试4
确定可以。不完美，但总比没有好。然而，该位置在x和y轴上都固定，这是一个问题。有办法只在x中而不是y中修复它吗？
.table-centered td, th {
text-align: center !important;
vertical-align: middle !important;
white-space: nowrap !important;
/*padding: 0.2rem !important;*/
}
.second-column {
padding-left: 20rem !important;
}
input {
vertical-align: middle;
text-align: center;
}
.position-fixed {
background-color: white;
width: 18rem;
}
<div>
<table class="table table-striped table-bordered table-responsive table-centered">
<thead>
<tr>
<th class="position-fixed"> Title to be fixed </th>
<th class="second-column"> Title to be scrolled A</th>
<th> Title to be scrolled B</th>
<th> Title to be scrolled C</th>
<th> Title to be scrolled E</th>
<th> Title to be scrolled F</th>
<th> Title to be scrolled G</th>
<th> Title to be scrolled H</th>
<th> Title to be scrolled I</th>
<th> Title to be scrolled J</th>
<th> Title to be scrolled K</th>
<th> Title to be scrolled L</th>
<th> Title to be scrolled M</th>
<th> Title to be scrolled N</th>
<th> Title to be scrolled O</th>
<th> Title to be scrolled P</th>
<th> Title to be scrolled Q</th>
<th> Title to be scrolled R</th>
<th> Title to be scrolled S</th>
<th> Title to be scrolled T</th>
<th> Title to be scrolled U</th>
<th> Title to be scrolled V</th>
<th> Title to be scrolled W</th>
<th> Title to be scrolled X</th>
<th> Title to be scrolled Y</th>
<th> Title to be scrolled Z</th>
</tr>
</thead>
<tbody>
<tr>
<td class="position-fixed"> Content to be fixed </td>
<td class="second-column"> Content to be scrolled A</td>
<td> Content to be scrolled B</td>
<td> Content to be scrolled C</td>
<td> Content to be scrolled E</td>
<td> Content to be scrolled F</td>
<td> Content to be scrolled G</td>
<td> Content to be scrolled H</td>
<td> Content to be scrolled I</td>
<td> Content to be scrolled J</td>
<td> Content to be scrolled K</td>
<td> Content to be scrolled L</td>
<td> Content to be scrolled M</td>
<td> Content to be scrolled N</td>
<td> Content to be scrolled O</td>
<td> Content to be scrolled P</td>
<td> Content to be scrolled Q</td>
<td> Content to be scrolled R</td>
<td> Content to be scrolled S</td>
<td> Content to be scrolled T</td>
<td> Content to be scrolled U</td>
<td> Content to be scrolled V</td>
<td> Content to be scrolled W</td>
<td> Content to be scrolled X</td>
<td> Content to be scrolled Y</td>
<td> Content to be scrolled Z</td>
</tr>
</tbody>
</table>
</div>
您知道一种保持表响应表优势，同时又能保持列固定的方法吗？好吗？
谢谢
Manuela
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？