2016-06-06 4 views
0

Как установить ширину таблицы начальной загрузки?Загрузочный стол пользовательской ширины для каждого столбца

Я попытался использовать class="col-md-2", он не влияет на ширину. Класс таблицы, по-видимому, имеет ширину, равную ширине отображения.

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

Это последний код, который я пробовал.

<table class="table"> 
    <tr> 
     <th class="col-md-1">Action</th> 
     <th class="col-md-2">Description</th> 
    </tr> 
    <tr ng-repeat="x in Tablelist track by $index"> 
     <td> 
      <div class="btn-group"> 
       <button class="btn btn-primary btn-xs" ng-click="Opensetprice(x.id,x.matcode,x.pr_qty)">$</button> 
       <button class="btn btn-danger btn-xs" ng-click="Delete(x.doc_no,x.item_no, $index)">X</button> 
      </div> 
     </td> 
     <td>{{x.material}}</td> 
    </tr> 
</table> 

пытались переопределить класс table ширину с width:auto;, не делает никакой помощи.

ответ

1

Дайте ваш стол родитель overflow: auto;

2

Классы Bootstrap's col-xx-n не должны использоваться с <table> тегами. Эти баллы предназначены для использования на элементах, которые можно переместить на основе размера видового экрана. Но так как строки/ячейки внутри <table> не могут быть сделаны для повторного позиционирования, это просто не работает.

То, что вы должны искать это ...

  1. Ширина столбца в %.
  2. min-width для некоторых конкретных столбцов, содержимое которых не должно сокращаться после определенной ширины.

Примечание: - Таблица демонстрирует чувствительное поведение по своей сути. Вам просто нужно разумно использовать %width.

+0

Значит, мне нужно создать каждую ширину столбца с%? –

+0

По умолчанию таблица присваивает расчетную ширину всем столбцам на основе их содержимого. После этого вы можете переопределить ширину столбцов с помощью CSS. –

1

Bootstrap таблица должна настроить его ширина в соответствии с его содержанием, не нужно регулировать ширину со свойствами CSS или встроенного стиля.

Я могу помочь вам больше, если вы поделитесь снимком экрана, что вам нужно на самом деле.

+0

спасибо, но @Autista_z сказал мне, чтобы я столкнулся с таблицей 'overflow: auto;' и она работает. Это то, что я ищу, мне нужно иметь полную таблицу, а не только ширину видового экрана, я могу установить ячейку 'max-width', которая не займет слишком большую ячейку и установит' text-overflow: ellipsis ; ' –

1

Попробуйте добавить это в CSS:

.table tr th:nth-child(2) { 
    width: 80%; /*Custom your width*/ 
} 

The: селектор п-го ребенка (п) соответствует каждому элементу, который является п-й ребенок, независимо от типа, его родителя.

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