Fábio Zangirolami
Reputation: 1956
force html table in a new line (with only one <tr>)
I want to make the td wrap around to a new line dynamically, with using only a single tr. As you can see in the screenshot below, all of the td elements continue horizontally outside of the window. I want them to wrap underneath, inside of the window.
An example can be seen here: fiddle
.hidden {
overflow: hidden;
text-align: center;
}
.gaba1 {
display: inline-block;
width: 100px;
background-color: #f9f9f9;
}
.gaba2 {
display: inline-block;
width: 100px;
background-color: white;
}<div class='hidden'>
<table>
<tbody>
<tr>
<td>
<div class="gaba1">01 - D</div>
</td>
<td>
<div class="gaba2">02 - C</div>
</td>
<td>
<div class="gaba1">03 - E</div>
</td>
<td>
<div class="gaba2">04 - E</div>
</td>
<td>
<div class="gaba1">05 - A</div>
</td>
<td>
<div class="gaba2">06 - D</div>
</td>
<td>
<div class="gaba1">07 - A</div>
</td>
<td>
<div class="gaba2">08 - B</div>
</td>
<td>
<div class="gaba1">09 - D</div>
</td>
<td>
<div class="gaba2">10 - C</div>
</td>
<td>
<div class="gaba1">11 - B</div>
</td>
<td>
<div class="gaba2">12 - E</div>
</td>
<td>
<div class="gaba1">13 - A</div>
</td>
<td>
<div class="gaba2">14 - D</div>
</td>
<td>
<div class="gaba1">15 - A</div>
</td>
<td>
<div class="gaba2">16 - C</div>
</td>
<td>
<div class="gaba1">17 - B</div>
</td>
<td>
<div class="gaba2">18 - E</div>
</td>
<td>
<div class="gaba1">19 - B</div>
</td>
<td>
<div class="gaba2">20 - A</div>
</td>
<td>
<div class="gaba1">01 - C</div>
</td>
<td>
<div class="gaba2">02 - A</div>
</td>
<td>
<div class="gaba2">21 - D</div>
</td>
<td>
<div class="gaba1">22 - D</div>
</td>
<td>
<div class="gaba2">23 - A</div>
</td>
<td>
<div class="gaba1">01 - B</div>
</td>
<td>
<div class="gaba2">01 - A</div>
</td>
<td>
<div class="gaba1">01 - A</div>
</td>
<td>
<div class="gaba2">01 - B</div>
</td>
<td>
<div class="gaba2">02 - C</div>
</td>
<td>
<div class="gaba1">03 - B</div>
</td>
</tr>
</tbody>
</table>
</div>Upvotes: 0
Views: 6286
Answers (3)
Adam Milecki
Reputation: 1786
Wes's response is great if you want a table. However wrapping tables is not good responsive solution. Instead you should use inline-block divs.
<div class="gaba1">01 - D</div>
<div class="gaba2">02 - C</div>
<div class="gaba1">03 - E</div>
...
https://jsfiddle.net/y8c6ugyj/1/
Upvotes: 0
m4n0
Reputation: 32255
You will need to change the display value of td to display: inline-block. The default is table-cell which does not allow it to wrap to a new line and behaves like a single row.
.hidden {
overflow: hidden;
text-align: center;
}
.gaba1 {
display: inline-block;
width: 100px;
background-color: #f9f9f9;
}
.gaba2 {
display: inline-block;
width: 100px;
background-color: white;
}
/* Added Code */
.hidden td {
display: inline-block;
}<div class='hidden'>
<table>
<tbody>
<tr>
<td>
<div class="gaba1">01 - D</div>
</td>
<td>
<div class="gaba2">02 - C</div>
</td>
<td>
<div class="gaba1">03 - E</div>
</td>
<td>
<div class="gaba2">04 - E</div>
</td>
<td>
<div class="gaba1">05 - A</div>
</td>
<td>
<div class="gaba2">06 - D</div>
</td>
<td>
<div class="gaba1">07 - A</div>
</td>
<td>
<div class="gaba2">08 - B</div>
</td>
<td>
<div class="gaba1">09 - D</div>
</td>
<td>
<div class="gaba2">10 - C</div>
</td>
<td>
<div class="gaba1">11 - B</div>
</td>
<td>
<div class="gaba2">12 - E</div>
</td>
<td>
<div class="gaba1">13 - A</div>
</td>
<td>
<div class="gaba2">14 - D</div>
</td>
<td>
<div class="gaba1">15 - A</div>
</td>
<td>
<div class="gaba2">16 - C</div>
</td>
<td>
<div class="gaba1">17 - B</div>
</td>
<td>
<div class="gaba2">18 - E</div>
</td>
<td>
<div class="gaba1">19 - B</div>
</td>
<td>
<div class="gaba2">20 - A</div>
</td>
<td>
<div class="gaba1">01 - C</div>
</td>
<td>
<div class="gaba2">02 - A</div>
</td>
<td>
<div class="gaba2">21 - D</div>
</td>
<td>
<div class="gaba1">22 - D</div>
</td>
<td>
<div class="gaba2">23 - A</div>
</td>
<td>
<div class="gaba1">01 - B</div>
</td>
<td>
<div class="gaba2">01 - A</div>
</td>
<td>
<div class="gaba1">01 - A</div>
</td>
<td>
<div class="gaba2">01 - B</div>
</td>
<td>
<div class="gaba2">02 - C</div>
</td>
<td>
<div class="gaba1">03 - B</div>
</td>
</tr>
</tbody>
</table>
</div>Upvotes: 1
Wes Foster
Reputation: 8900
Since you WANT to use tables, you can achieve the desired look, including the background colors, by getting rid of the div elements and applying the following styles to the table columns:
.hidden {
overflow: hidden;
text-align: center;
}
td {
display: inline-block;
width: 100px;
}
/* every ODD td will have a gray background */
td:nth-child(odd) {
background-color: #f9f9f9;
}
/* every EVEN td will have a white background */
td:nth-child(even) {
background-color: white;
}<div class='hidden'>
<table>
<tbody>
<tr>
<td>01 - D</td>
<td>02 - C</td>
<td>03 - E</td>
<td>04 - E</td>
<td>05 - A</td>
<td>06 - D</td>
<td>07 - A</td>
<td>08 - B</td>
<td>09 - D</td>
<td>10 - C</td>
<td>11 - B</td>
<td>12 - E</td>
<td>13 - A</td>
<td>14 - D</td>
<td>15 - A</td>
<td>16 - C</td>
<td>17 - B</td>
<td>18 - E</td>
<td>19 - B</td>
<td>20 - A</td>
<td>
<div class="gaba1">01 - C</td>
<td>02 - A</td>
<td>21 - D</td>
<td>
<div class="gaba1">22 - D</td>
<td>23 - A</td>
<td>
<div class="gaba1">01 - B</td>
<td>01 - A</td>
<td>
<div class="gaba1">01 - A</td>
<td>01 - B</td>
<td>02 - C</td>
<td>
<div class="gaba1">03 - B</td>
</tr>
</tbody>
</table>
</div>However, the same can be accomplished using only div tags, which I would recommend doing instead of using a table.
Upvotes: 1
Related Questions
- How to make <td> in new line
- CSS/Javascript to force html table row on a single line
- Make table rows on a single line HTML+CSS
- How to make the table text never break line?
- Line break <tr> contents in CSS
- Break table <td> in two lines
- HTML CSS How to stop a table to put the content after it on a new line?
- Removing <table> standard line break
- Wrap long HTML tables to next line
- Table: Extra text in new line