Html Can'；t在bootstrap 3表中获取可滚动的pre

我希望引导表单元格中的html pre元素可以滚动

我有以下代码：

<table class="table table-striped table-bordered table-hover">
    <thead>
        <tr class="info">
            <th class="col-xs-2">Title</th>
            <th class="col-xs-10">Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="col-xs-2">Title</td>
            <td class="col-xs-10">
               <pre style="width:100%; overflow: scroll;"> Very Long Preformated Description </pre>
            </td>
        </tr>
    </tbody>
</table>

标题
描述
标题
很长的预先描述

这实际上会将pre元素扩展到屏幕之外

我希望单元格保持其col-xs-10大小，并在pre元素上显示可滚动条

这看起来如何？

有一个用于可滚动表格的本机Bootstrap 3类，您可以将表格包装如下：

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

CSS

---

尝试使用最大宽度和最大高度属性Shi David，谢谢你的回答。我可以看到表格中有滚动条，没关系。但是，它仍然会在屏幕外扩展表，我希望避免这种情况。我希望pre元素或包含pre的单元格可以滚动，并将表格保持在屏幕边框内。嘿@jos，请查看我的其他建议

<div class="table-wrap">
  <table class="table table-striped table-bordered table-hover">
    <thead>
        <tr class="info">
            <th class="col-xs-2">Title</th>
            <th class="col-xs-10">Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="col-xs-2">Title</td>
            <td class="col-xs-10">
               <div class="pre-wrap">
                 <pre> Very Long Preformated Description Very Long Preformated Description </pre
                 </div>
            </td>
        </tr>
    </tbody>
  </table>
</div>  

.pre-wrap{
  overflow-x: auto; /* this creates the horizontal scroll bar */
  width:calc(83vw - 10px); /* set the width of this element to the width of col-xs-10 less a little padding */
  background-color:pink;
  border:1px solid red;
}

.table-wrap{
/*   margin optional, to help with illustration only */
  margin:10px;
}