Reputation: 2409
I am trying to design a table which will display data pulled from a database in somewhat of a graphical form. I would love for the table to have the functionality to overflow to the next line when the collective 'td's have reached a max-width that is set by the table.
Example: table width set to 30% (lets say for argument's sake thats 100px) and the tds have a width of 10px. When there have been 11 tds entered, the 11th moves to a newline and continues displaying there.
Here is what I have so far:
HTML:
<table>
<tr>
<td></td>
<td class='green'></td>
<td class='green'></td>
<td></td>
<td></td>
<td class='green'></td>
<td class='green'></td>
<td class='green'></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class='green'></td>
<td class='green'></td>
</tr>
</table>
CSS:
td{
width:10px;
height:10px;
border: 1px solid black;
}
table{
max-width:30%;
}
.green {
background:green;
}
Link to fiddle: http://jsfiddle.net/hDsts/160/
Currently, if another <td>
is added it just resizes all of them to fit within the max-width set by the table. I want it to overflow to the next line.
Any suggestions on how to solve this problem or of other ways I could accomplish this goal?
Upvotes: 2
Views: 11701
Reputation: 686
You can set the TD's to display: inline-block;
But you're also going to need to specify a width for the table to conform to otherwise it will be 30% of the window width. eg. wrap it in in a div with a specify width.
http://jsfiddle.net/hDsts/160/
Upvotes: 2
Reputation: 400
I think it is impossible to do it only with css and html, I prefer you to use display: flex
to achieve your goal.
HTML:
<div class="holder">
<div class="item"> 1 </div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"> Last element </div>
</div>
CSS:
.holder {
max-width: 30%;
background-color: #ccc;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-webkit-flex-wrap: wrap;
font-size: 12px;
}
.item {
width: 100px;
border: 1px solid #000;
height: 20px;
flex: 80px 1;
text-align: center;
color: #000;
}
So minimal width of item would be 80px.
Here is working example: http://codepen.io/GomatoX/pen/Ceonj
Upvotes: 3