如何更改表行的宽度

我有引导样式的HTML响应表，问题是，一些细胞可以有很多的文字，因为这样的结果我的手机是这样的：如何更改表行的宽度

页眉
text ..............
.... enf of text
here。

而我希望是这样的：

（居中对齐）头
文本.................文本这里结束。

我尝试添加宽度风格到所有的 “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>

换句话说我想要像Snippet代码那样显示表格，但是如果您在整页中看到它，则可以看到我的问题，我该怎么办？

来源

2016-09-21 User1899289003

[制作宽表配合引导容器]的可能的复制（http://stackoverflow.com/questions/22897377/making-wide-table-fit-bootstrap-container） –

也可以看看在http ：//stackoverflow.com/questions/14725342/bootstrap-fluid-table-too-wide-for-window –

只需将属性： white-space: nowrap; 添加到您的表或您想要dinamyc宽度的单元格。

.table { width: 100%; max-width: 100%; margin-bottom: 20px; white-space: nowrap; }

来源

2016-09-21 17:55:11

就是这样！谢谢！ – User1899289003

如果你不想让你的文字换行，你可以添加的CSS属性：

white-space: nowrap;

你可以申请直接到TD或在TD内的跨度。

只要记住表格是贪婪的，并且在必要时会溢出它们的容器，无论是否设置了宽度。删除文字包装会增加您发生这种情况的几率。

来源

2016-09-21 17:54:53

如何更改表行的宽度

回答

相关问题