Table Responsive keeping width and height of cells

Asked

Viewed 41 times

0

How can I improve this formatting so that this table is well represented on a mobile screen? You can adjust the code so that if the page width is decreased, new lines are created with automatic content breaks?

<div class="d-flex">
	<table align="center" class="table table-sm table-dark table-striped table-hover table-bordered ms">
	<thead>
<tr>titulo</tr>
	</thead><tr class="d-flex ms" align="center">
			<td id=d1 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b1" name="b1" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('1');">
	<span id="s1" class="" > 01</span></button> </td> 		<td id=d2 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b2" name="b2" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('2');">
	<span id="s2" class="" > 02</span></button> </td> 		<td id=d3 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b3" name="b3" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('3');">
	<span id="s3" class="" > 03</span></button> </td> 		<td id=d4 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b4" name="b4" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('4');">
	<span id="s4" class="" > 04</span></button> </td> 		<td id=d5 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b5" name="b5" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('5');">
	<span id="s5" class="" > 05</span></button> </td> 		<td id=d6 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b6" name="b6" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('6');">
	<span id="s6" class="" > 06</span></button> </td> 		<td id=d7 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b7" name="b7" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('7');">
	<span id="s7" class="" > 07</span></button> </td> 		<td id=d8 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b8" name="b8" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('8');">
	<span id="s8" class="" > 08</span></button> </td> 		<td id=d9 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b9" name="b9" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('9');">
	<span id="s9" class="" > 09</span></button> </td> 		<td id=d10 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b10" name="b10" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('10');">
	<span id="s10" class="" > 10</span></button> </td> </tr><tr class="d-flex" align="center">		<td id=d11 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b11" name="b11" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('11');">
	<span id="s11" class="" > 11</span></button> </td> 		<td id=d12 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b12" name="b12" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('12');">
	<span id="s12" class="" > 12</span></button> </td> 		<td id=d13 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b13" name="b13" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('13');">
	<span id="s13" class="" > 13</span></button> </td> 		<td id=d14 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b14" name="b14" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('14');">
	<span id="s14" class="" > 14</span></button> </td> 		<td id=d15 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b15" name="b15" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('15');">
	<span id="s15" class="" > 15</span></button> </td> 		<td id=d16 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b16" name="b16" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('16');">
	<span id="s16" class="" > 16</span></button> </td> 		<td id=d17 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b17" name="b17" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('17');">
	<span id="s17" class="" > 17</span></button> </td> 		<td id=d18 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b18" name="b18" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('18');">
	<span id="s18" class="" > 18</span></button> </td> 		<td id=d19 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b19" name="b19" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('19');">
	<span id="s19" class="" > 19</span></button> </td> 		<td id=d20 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b20" name="b20" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('20');">
	<span id="s20" class="" > 20</span></button> </td> </tr><tr class="d-flex" align="center">		<td id=d21 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b21" name="b21" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('21');">
	<span id="s21" class="" > 21</span></button> </td> 		<td id=d22 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b22" name="b22" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('22');">
	<span id="s22" class="" > 22</span></button> </td> 		<td id=d23 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b23" name="b23" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('23');">
	<span id="s23" class="" > 23</span></button> </td> 		<td id=d24 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b24" name="b24" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('24');">
	<span id="s24" class="" > 24</span></button> </td> 		<td id=d25 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b25" name="b25" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('25');">
	<span id="s25" class="" > 25</span></button> </td> 		<td id=d26 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b26" name="b26" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('26');">
	<span id="s26" class="" > 26</span></button> </td> 		<td id=d27 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b27" name="b27" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('27');">
	<span id="s27" class="" > 27</span></button> </td> 		<td id=d28 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b28" name="b28" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('28');">
	<span id="s28" class="" > 28</span></button> </td> 		<td id=d29 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b29" name="b29" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('29');">
	<span id="s29" class="" > 29</span></button> </td> 		<td id=d30 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b30" name="b30" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('30');">
	<span id="s30" class="" > 30</span></button> </td> </tr><tr class="d-flex" align="center">		<td id=d31 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b31" name="b31" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('31');">
	<span id="s31" class="" > 31</span></button> </td> 		<td id=d32 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b32" name="b32" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('32');">
	<span id="s32" class="" > 32</span></button> </td> 		<td id=d33 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b33" name="b33" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('33');">
	<span id="s33" class="" > 33</span></button> </td> 		<td id=d34 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b34" name="b34" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('34');">
	<span id="s34" class="" > 34</span></button> </td> 		<td id=d35 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b35" name="b35" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('35');">
	<span id="s35" class="" > 35</span></button> </td> 		<td id=d36 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b36" name="b36" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('36');">
	<span id="s36" class="" > 36</span></button> </td> 		<td id=d37 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b37" name="b37" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('37');">
	<span id="s37" class="" > 37</span></button> </td> 		<td id=d38 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b38" name="b38" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('38');">
	<span id="s38" class="" > 38</span></button> </td> 		<td id=d39 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b39" name="b39" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('39');">
	<span id="s39" class="" > 39</span></button> </td> 		<td id=d40 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b40" name="b40" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('40');">
	<span id="s40" class="" > 40</span></button> </td> </tr><tr class="d-flex" align="center">		<td id=d41 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b41" name="b41" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('41');">
	<span id="s41" class="" > 41</span></button> </td> 		<td id=d42 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b42" name="b42" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('42');">
	<span id="s42" class="" > 42</span></button> </td> 		<td id=d43 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b43" name="b43" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('43');">
	<span id="s43" class="" > 43</span></button> </td> 		<td id=d44 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b44" name="b44" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('44');">
	<span id="s44" class="" > 44</span></button> </td> 		<td id=d45 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b45" name="b45" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('45');">
	<span id="s45" class="" > 45</span></button> </td> 		<td id=d46 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b46" name="b46" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('46');">
	<span id="s46" class="" > 46</span></button> </td> 		<td id=d47 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b47" name="b47" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('47');">
	<span id="s47" class="" > 47</span></button> </td> 		<td id=d48 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b48" name="b48" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('48');">
	<span id="s48" class="" > 48</span></button> </td> 		<td id=d49 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b49" name="b49" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('49');">
	<span id="s49" class="" > 49</span></button> </td> 		<td id=d50 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b50" name="b50" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('50');">
	<span id="s50" class="" > 50</span></button> </td> </tr><tr class="d-flex" align="center">		<td id=d51 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b51" name="b51" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('51');">
	<span id="s51" class="" > 51</span></button> </td> 		<td id=d52 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b52" name="b52" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('52');">
	<span id="s52" class="" > 52</span></button> </td> 		<td id=d53 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b53" name="b53" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('53');">
	<span id="s53" class="" > 53</span></button> </td> 		<td id=d54 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b54" name="b54" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('54');">
	<span id="s54" class="" > 54</span></button> </td> 		<td id=d55 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b55" name="b55" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('55');">
	<span id="s55" class="" > 55</span></button> </td> 		<td id=d56 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b56" name="b56" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('56');">
	<span id="s56" class="" > 56</span></button> </td> 		<td id=d57 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b57" name="b57" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('57');">
	<span id="s57" class="" > 57</span></button> </td> 		<td id=d58 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b58" name="b58" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('58');">
	<span id="s58" class="" > 58</span></button> </td> 		<td id=d59 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b59" name="b59" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('59');">
	<span id="s59" class="" > 59</span></button> </td> 		<td id=d60 style="" ><span id="sid"></span>
	<button type="button" disabled style=" color: white;" id="b60" name="b60" class="btn btn-sm btn-success btn-block ms" onclick= "guardarposie('60');">
	<span id="s60" class="" > 60</span></button> </td> </tr>
					
					
					</table>

html table responsive-layout

1 answer

1

With table as you did is not possible, for as media queries you can’t create new ones TRs, and without new TRs you can’t make new "rows" of content. Table not to create layout. So if you have 10 TD for TR, there is no responsive "fit" that will make you stay 5 TD for TR for example.... CSS does not create HTML tags in the DOM... Think of another way to layout, or know that you will always have 10 TD for TR...

In short, you can’t break one TR with 10 TDs in two TRs of 5 TDs with only @media

Now if you want to do a "gambiarra" vc can have two tables, one for large screens, and one for small screens, and when it is at certain screen width vc shows a table and hides the other, and vise-versa.

Here is an example, below 800px I show the table for cell phones.

inserir a descrição da imagem aqui

table {
    width: 100%;
}
td{
    border: 1px solid #000;
}
.mobile {
    display: none;
}
@media (max-width: 800px) {
    .mobile {
        display: table;
    }
    .desktop {
        display: none;
    }
}
<table class="desktop">
    <tr>
        <td>01</td>
        <td>02</td>
        <td>03</td>
        <td>04</td>
        <td>05</td>
        <td>06</td>
        <td>07</td>
        <td>08</td>
        <td>09</td>
        <td>10</td>
    </tr>
</table>

<table class="mobile">
    <tr>
        <td>01</td>
        <td>02</td>
        <td>03</td>
        <td>04</td>
        <td>05</td>
    </tr>
    <tr>
        <td>06</td>
        <td>07</td>
        <td>08</td>
        <td>09</td>
        <td>10</td>
    </tr>
</table>

  • I liked your idea. And how to determine if I am on mobile or desktop?

  • @user2876585 this will give you an idea. But basically there is not much to know, you will have to make your CSS to the screen width, and not thinking whether it is mobile or desktop. Unless you use some JS to know if the access device is one or the other... https://answall.com/questions/386448/resolu%C3%A7%C3%a3o-m%C3%a1xima-ideal-to-display-count%C3%bado-in-mobile-mode

Browser other questions tagged html table responsive-layout

You are not signed in. Login or sign up in order to post.