在列之后的 html 表中强制换行

Question

I want to have just 4 columns per row in my table , how can i force a line break in table using css ? please check what i'v tried in the link below -

<table style="table-layout: fixed; width: 100%;">
    <tbody>
        <tr>
            <td style="word-wrap: break-word;overflow-wrap: break-word;width:25%"></td>
            <td style="word-wrap: break-word;overflow-wrap: break-word;width:25%"></td>
            <td style="word-wrap: break-word;overflow-wrap: break-word;width:25%"></td>
            <td style="word-wrap: break-word;overflow-wrap: break-word;width:25%"></td>
            <td style="word-wrap: break-word;overflow-wrap: break-word;width:25%"></td>
        <tr>
    </tbody>
</table>

LINK - jsfiddle

Answer 1

I found an easy way to do it using Bootstrap :

<div class="row">
    <div class="col-sm-3" style="background-color:lavender;"><table>...</table></div>
    <div class="col-sm-3" style="background-color:lavenderblush;"><table>...</table></div>
    <div class="col-sm-3" style="background-color:lavender;"><table>...</table></div>
    <div class="col-sm-3" style="background-color:lavenderblush;"><table>...</table></div>
</div>