我有一个带有Bootstrap样式的HTML响应表,问题是某些单元格可能有很多文本,因此我的单元格如下所示:
标题
文字..............
....文本enf 这里。
我期望的是这样的事情:
(对齐中心)标题
文本.................文本结束。
我尝试将宽度样式添加到所有" td",添加" col-md",但没有任何效果,这是我的表:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="panel panel-info">
</div>
<div class="panel-heading">
<h4>Table</h4>
</div>
<div class="panel-body">
<div class="col-md-12">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<td>ID</td>
<td>Revision</td>
<td>Proposito</td>
<td>OpenDate</td>
<td>CloseDate</td>
<td>Copias</td>
<td>Status</td>
<td>Owner</td>
<td>Model</td>
<td>VS</td>
<td>Station</td>
<td>FollowUp</td>
<td>FollowUpNumber</td>
<td><span class="glyphicon glyphicon-cog"></span>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>00001</td>
<td>A</td>
<td>Quality Alert New</td>
<td>2016-09-21</td>
<td>2016-10-21</td>
<td>1</td>
<td>On approve</td>
<td>myuser_forRegister</td>
<td>XXXX-5554-3332-PA</td>
<td>VS04</td>
<td>Shippment</td>
<td>8D</td>
<td>8</td>
<td><span class="glyphicon glyphicon-pencil"></span>
</td>
</tr>
</tbody>
</table>
</div>
<div>
</div>
</div>
&#13;
换句话说,我想在Snippet代码中显示表格,但如果你在整页中看到它,你可以看到我的问题,我该怎么办?
答案 0 :(得分:2)
只需添加属性:
white-space: nowrap;
到你的桌子或你想要有dinamyc宽度的细胞。
.table {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
white-space: nowrap;
}
答案 1 :(得分:0)
如果您不想包装文本,可以添加以下css属性:
white-space: nowrap;
您可以将其直接应用于td中的td或跨度。
请记住,表格是贪婪的,如果需要,它会溢出容器,无论是否设置了宽度。删除文本包装将增加发生这种情况的机会。