Ist es möglich, Tabellenzeilen in Antwort umzuwandeln?

Question

Ist es möglich, eine Tabellenzeile und deren Inhalt (tds) so zu umbrechen, dass die Tabelle reaktionsfähig bleibt? Zum Beispiel:

<table> 
<tr> 
<td><!---content---></td> 
<td><!---content---></td> 
<td><!---content---></td> 
<td><!---content---></td> 
<td><!---content---></td> 
</tr> 
<tr> 
<td><!---content---></td> 
<td><!---content---></td> 
<td><!---content---></td> 
<td><!---content---></td> 
<td><!---content---></td> 
</tr> 
</table> 

Können diese beiden Reihen von 5 zwei Reihen von 4 werden und eine Reihe von 2 für einige Bildschirmgrößen oder drei Reihen von 3 und eine Reihe von 1 für die andere, und so weiter?

Haben versucht Floats und Inline-Styling, aber die Zeilen sind immer in der nächsten Zeile, und nie bündig nebeneinander, so dass die td-Bereiche nahtlos aussehen. Ich habe keinen Zugriff auf das HTML der Tabellenstruktur, also versuche ich es mit CSS oder sogar Javascript/jQuery anzusprechen.

Irgendwelche Ideen?

Answer 1

table Elemente sind nicht so konzipiert, dass sie so funktionieren, wie Sie es wünschen. Was Sie fragen, wird allgemein als Responsive UI bezeichnet und wir haben viele fertige Lösungen dafür. Ich würde dringend Bootstrap-Bibliothek/Framework für diesen Zweck empfehlen.

Bootstraps grid System können Sie tun, was Sie verlangen. Falls Sie an diesem Ansatz nur selten interessiert sind, können Sie auch über andere Optionen (andere Frameworks als Bootstrap) sowie here nachlesen.

Answer 2

ich das immer tun:

CSS:

.row { 
    width: 100%; 
} 
.row > div { 
    float: left; 
} 
.w25 { 
    width: 25%; 
} 
.w33 { 
    width: 33.333333%; 
} 
.w50 { 
    width: 50%; 
} 

mehr hinzufügen, wenn Sie es wünschen. Nach diesem css können Sie einfach anrufen, wo Sie wollen.

<div class="row"> 
    <div class="w50">1</div> 
    <div class="w50">2</div> 
</div> 

In Ihrem Fall (5 Zellen) Sie .w20 {width:20%;} zu der CSS hinzufügen könnten, <div class="w20></div>" in dem HTML-Code zu verwenden.

---

Es gibt nur einen kleinen Nachteil der Verwendung dieser Methode. Wenn Sie Tabellen, Zeilen und Zellen erstellen, werden die Zellen nach ihrem Inhalt aufgeteilt. Aber mit meiner Methode werden sie immer 20%, 50% oder was auch immer sein.

Eine andere Alternative wäre, flex zu verwenden, aber wie Sie here sehen können, unterstützen dies nicht alle Browser.

Answer 3

1) Für Ihre Zwecke können Sie verschiedene Arten von Tisch und Show verwenden/verstecken einige von ihnen auf dem Bildschirm je nach Größe Hier ist die Lösung für Ihren Fall:

HTML:

.table-xs { 
 
    display: none; 
 
    border: 1px solid black; 
 
} 
 

 
.table-xs td { 
 
    border: 1px solid blue; 
 
    text-align: center; 
 
} 
 

 
@media (max-width: 540px) { 
 
    .table-xs { 
 
    display: table; 
 
    } 
 
} 
 

 
/* === medium === */ 
 
.table-md { 
 
    display: none; 
 
    border: 1px solid black; 
 
} 
 

 
.table-md td { 
 
    border: 1px solid red; 
 
    text-align: center; 
 
} 
 

 
@media (min-width: 541px) and (max-width: 720px) { 
 
    .table-md { 
 
    display: table; 
 
    } 
 
} 
 

 
/* === large === */ 
 
.table-lg { 
 
    display: none; 
 
    border: 1px solid black; 
 
} 
 

 
.table-lg td { 
 
    border: 1px solid green; 
 
    text-align: center; 
 
} 
 

 
@media (min-width: 721px) { 
 
    .table-lg { 
 
    display: table; 
 
    } 
 
}

<table class="table-lg"> 
 
    <tr> 
 
    <td>content</td> 
 
    <td>content</td> 
 
    <td>content</td> 
 
    <td>content</td> 
 
    <td>content</td> 
 
    </tr> 
 
    <tr> 
 
    <td>content</td> 
 
    <td>content</td> 
 
    <td>content</td> 
 
    <td>content</td> 
 
    <td>content</td> 
 
    </tr> 
 
</table> 
 

 
<table class="table-md"> 
 
    <tr> 
 
    <td>content</td> 
 
    <td>content</td> 
 
    <td>content</td> 
 
    <td>content</td> 
 
    </tr> 
 
    <tr> 
 
    <td>content</td> 
 
    <td>content</td> 
 
    <td>content</td> 
 
    <td>content</td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="2">content</td> 
 
    <td colspan="2">content</td> 
 
    </tr> 
 
</table> 
 

 
<table class="table-xs"> 
 
    <tr> 
 
    <td>content</td> 
 
    <td>content</td> 
 
    <td>content</td> 
 
    </tr> 
 
    <tr> 
 
    <td>content</td> 
 
    <td>content</td> 
 
    <td>content</td> 
 
    </tr> 
 
    <tr> 
 
    <td>content</td> 
 
    <td>content</td> 
 
    <td>content</td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="3">content</td> 
 
    </tr> 
 
</table>

2) Sie können Flexbox anstelle von Tabelle

Answer 4

Wenn Sie nicht tun Zugriff auf die Tabelle haben, können Sie sie entsprechend der Bildschirmgröße neu rendern.

Sie können so etwas wie dies versuchen:

function renderTable() { 
 
    var myTable = $('#myTable'); 
 
    var content_var = ["content01", "content02", 
 
       "content03", "content04", 
 
       "content05", "content06", 
 
       "content07", "content08", 
 
       "content09", "content10"]; 
 
    var html_lgTable = ` 
 
    <table> 
 
    <tbody> 
 
    <tr> 
 
     <td> ${content_var[0]} </td> 
 
     <td> ${content_var[1]} </td> 
 
     <td> ${content_var[2]} </td> 
 
     <td> ${content_var[3]} </td> 
 
     <td> ${content_var[4]} </td> 
 
    </tr> 
 
    <tr> 
 
     <td> ${content_var[5]} </td> 
 
     <td> ${content_var[6]} </td> 
 
     <td> ${content_var[7]} </td> 
 
     <td> ${content_var[8]} </td> 
 
     <td> ${content_var[9]} </td> 
 
    </tr> 
 
    </tbody> 
 
    </table>` 
 

 
    var html_mdTable = ` 
 
    <table> 
 
    <tbody> 
 
    <tr> 
 
     <td> ${content_var[0]} </td> 
 
     <td> ${content_var[1]} </td> 
 
     <td> ${content_var[2]} </td> 
 
     <td> ${content_var[3]} </td> 
 
    </tr> 
 
    <tr> 
 
     <td> ${content_var[4]} </td> 
 
     <td> ${content_var[5]} </td> 
 
     <td> ${content_var[6]} </td> 
 
     <td> ${content_var[7]} </td> 
 
    </tr> 
 
    <tr> 
 
     <td colspan="2"> ${content_var[8]} </td> 
 
     <td colspan="2"> ${content_var[9]} </td> 
 
    </tr> 
 
    </tbody> 
 
    </table>` 
 

 
    var html_xsTable = ` 
 
    <table> 
 
    <tbody> 
 
    <tr> 
 
     <td> ${content_var[0]} </td> 
 
     <td> ${content_var[1]} </td> 
 
     <td> ${content_var[2]} </td> 
 
    </tr> 
 
    <tr> 
 
     <td> ${content_var[3]} </td> 
 
     <td> ${content_var[4]} </td> 
 
     <td> ${content_var[5]} </td> 
 
    </tr> 
 
    <tr> 
 
     <td> ${content_var[6]} </td> 
 
     <td> ${content_var[7]} </td> 
 
     <td> ${content_var[8]} </td> 
 
    <tr> 
 
     <td colspan="3"> ${content_var[9]} </td> 
 
    </tr> 
 
    </tbody> 
 
    </table>` 
 

 
    var windowW = $(window).innerWidth(); 
 
    
 
    if (windowW < 500) { 
 
    $('#myTable').html(html_xsTable); 
 
    } 
 
    else if ((windowW > 500) && (windowW < 900)) { 
 
    $('#myTable').html(html_mdTable); 
 
    } 
 
    else $('#myTable').html(html_lgTable); 
 
} 
 

 
$(document).ready(function() { 
 
    renderTable(); 
 
    $(window).on("resize", function() { 
 
     renderTable(); 
 
    }) 
 
});

table { 
 
    display: table; 
 
    border: 1px solid black; 
 
} 
 

 
table td { 
 
    border: 1px solid black; 
 
    text-align: center; 
 
}

<script 
 
    src="https://code.jquery.com/jquery-2.2.4.min.js" 
 
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" 
 
    crossorigin="anonymous"></script> 
 
<table id="myTable"> 
 
</table>

Natürlich sollte content_var Array aus Original-Tabelle analysiert werden.