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

Question

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

0

Я использую 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 раза больше ширины окна браузера. На данный момент я просматриваю, но я ищу более удобное для пользователя решение.

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

sdmorris 26 нояб. 2015, в 12:17

Источник

Теги:

javascript

html

angularjs

2 ответа

0

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

Мое решение было бы чистой сеткой с бутстрапом.

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

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

Ágoston Székely 26 нояб. 2015, в 09:17

Ещё вопросы

P...P... · Accepted Answer · 2015-11-26T08-29-00.000Z

Вы можете добиться этого, применив правильные значения 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/