我想根据页面宽度将一个很长的 HTML 表格行拆分为多行

Question

I am using AngularJS to generate a row of Material buttons in an HTML table. The selected button is highlighted.

<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>

The number of buttons and text on the buttons can be quite long and the row is often 2-3 times the width of the browser window. For the moment, I scroll across but I am looking for a more user-friendly solution.

I would like to be able to split the row automatically, according to the page width - something like the example below.

Answer 1

You can achieve this by applying proper CSS to table and button elements. No need to split a row into multiple rows.

Example:

<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;
}

Have a look at this fiddle .

Answer 2

I have no idea how to accomplish this easily within a table. Maybe you could make some pre-work on your array to make it two-dimensional and then ng-repeat tr and td tags as well.

My solution would be a clean grid system with Bootstrap .

With this you can achieve a fully responsive screen. If you do not need to stick with a table system, then you should consider this.

Answer 3

Well, I was searching by splitting rows into multiple rows and I got here.

It seems that your problem could be better solver by using display: inline-block; for every button.

However, if you really need a table for other purpose check at this next approach . It would redrawn your linear tabular long table into a multilined table by only using css. Than you can play around with your screen size.