Как изменить строку таблицы ширина

У меня есть отзывчивая таблица HTML со стилями Bootstrap, проблема заключается в том, что некоторые клетки могут иметь много текста, в результате этого моя клетка выглядит следующим образом:Как изменить строку таблицы ширина

Заголовка
текст ..............
.... enf текста
здесь.

И то, что я ожидал что-то вроде этого:

(выравнивание по центру) Заголовок
текст ................. конец текста здесь ,

Я попытался добавить стиль ширины для всех "тд", добавив "Col-мкр", но ничего не работает, вот мой стол:

<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; к вашему столу или к ячейкам, которые вы хотите иметь ширину динамика.

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

источник

2016-09-21 17:55:11

Вот и все! Благодаря! – User1899289003

Если вы не хотите, чтобы ваш текст, чтобы обернуть, вы можете добавить CSS свойство:

white-space: nowrap;

Вы можете применить это непосредственно к т.д или на пролете в пределах тд.

Просто помните, что таблицы являются жадными и, если необходимо, переполняют их контейнеры, независимо от того, установлена ли ширина или нет. Удаление обертывания текста повысит ваши шансы на это.

источник

2016-09-21 17:54:53

Как изменить строку таблицы ширина

ответ

Смежные вопросы