Responsive Tabellen sind von Haus aus im Bootstrap Framework enthalten. Mit einem kleinen Codeschnipsel kannst du automatisch alle Tabellen um die benötigten Klassen erweitern.
Dieses Snippet funktioniert sowohl für Bootstrap 3, als auch für Bootstrap 4.
table-responsive Wrapper um WordPress Tabellen legen
Das Snippet passt zwei Eigenschaften der Tabellen Konstrukte innerhalb deiner WordPress Seiten und Beiträge an. Die Umsetzung in PHP erfolgt mit einem regulären Ausdruck.
Zum einen wirst du Tabellen auf deinem Smartphone horizontal mit dem Finger scrollen können, zum anderen wird die Darstellung der Tabelle auf Bootstrap Standard gesetzt. Somit entfällt die händische Erweiterung deines HTML Codes um Bootstrap Tabellen Klassen vollständig.
<!-- 1. HTML table -->
<table>
<tbody>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</tbody>
</table>
<!-- 2. Bootstrap classes -->
<div class="table-responsive">
<table class="table table-hover">
<tbody>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</tbody>
</table>
</div>
- Zuerst wird ein
div
mit der Klasse table-responsive um deine Tabelle gelegt. - Danach werden zwei Bootstrap Klassen in das öffnende
table
Tag eingefügt.
Responsive Bootstrap Tabellen
Dieser Filter überschreibt nur Tabellen innerhalb des the_content
Bereichs. Hast du einer Tabelle bereits eigene Klassen zugewiesen, überspringt der Filter diese.
function wps_bootstrap_add_custom_table_class( $content )
{
$pattern = '/(<table>)((.|\n)*?)(<\/table>)/';
$prefix = '<div class="table-responsive"><table class="table table-hover">';
$suffix = '</table></div>';
/*
* 1. Get table content
* 2. Add custom tags
*/
$content = preg_replace(
$pattern,
$prefix . '$2' . $suffix,
$content
);
return $content;
}
add_filter(
'the_content',
'wps_bootstrap_add_custom_table_class'
);
Kopiere dieses Snippet einfach in deine functions.php Datei und passe die Klassen bei Bedarf an.