Я хочу разбить длинную строку таблицы HTML на несколько строк в соответствии с шириной страницы

Question

Я использую AngularJS для создания строки из кнопок Material в таблице HTML. Выбранная кнопка подсвечивается.

<tr> 
    <td ng-click="pbmain.selectWC(WC.WCName)" ng-repeat="WC in pbmain.WCList"> 
     md-button(ng-class="WC.WCName == pbmain.selectedWCName ? 'md-raised md-primary' : 'md-raised'") {{WC.WCName}} 
    </td> 
</tr> 

Количество кнопок и текста на кнопках может быть довольно длинным и строка часто в 2-3 раза больше ширины окна браузера. На данный момент я просматриваю, но я ищу более удобное для пользователя решение.

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

Answer 1

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

нелогич-:

<table border="0" cellspacing="0" cellpadding="0"> 
<tr> 
    <td> 
     <span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span> 
    </td>  
</tr> 

CSS

table { 
    table-layout: fixed; 
    width: 100% 
} 

span { 
    border: 1px solid black; 
    margin: 10px; 
    width: 100px; 
    display: inline-block; 
} 

Pls имеет взгляд на эту скрипку. http://jsfiddle.net/6pnrygjp/

Answer 2

Я понятия не имею, как это сделать легко в таблице. Возможно, вы могли бы сделать некоторую предварительную работу над своим массивом, чтобы сделать его двумерным и чем ng-repeat tr и td-тегами.

Моим решением будет чистая система сетки с бутстрапом.

http://getbootstrap.com/css/#grid

При этом вы можете достичь полностью отзывчивый экран. Если вы не должны придерживаться табличной системы, вы должны это учитывать.