使用Materialize CSS表格出错：PHP数据库查询页面异常问题

Hey there, let's break down why your Materialize CSS table isn't working with your WordPress template and walk through fixes step by step:

1. Materialize CSS/JS isn't properly loaded in WordPress #

WordPress has a specific way to enqueue external resources—just dropping Materialize files into your template can cause load order issues or missing dependencies (like jQuery, which Materialize relies on).

Add this code to your theme's functions.php file to properly load Materialize:

function enqueue_materialize_resources() {
    // Load Materialize CSS
    wp_enqueue_style('materialize-css', 'https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css');
    // Load Materialize JS (depends on jQuery, which WordPress loads by default)
    wp_enqueue_script('materialize-js', 'https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js', array('jquery'), '', true);
}
add_action('wp_enqueue_scripts', 'enqueue_materialize_resources');

2. Your table HTML doesn't follow Materialize's required structure #

Materialize tables need specific classes and semantic HTML elements (like <thead> and <tbody>) to render correctly. Unlike plain <table> tags, skipping these will break styling.

Here's how to update your template code with a valid Materialize table:

<?php /*Template Name: contactread */ 
get_header(); 

$servername = "localhost";
$username = "*****";
$password = "*****";
$dbname = "*****";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// Example query (replace with your actual table/columns)
$sql = "SELECT name, email, message FROM your_contact_table";
$result = $conn->query($sql);
?>

<!-- Wrap table in a container for proper spacing -->
<div class="container">
    <table class="striped highlight responsive-table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Message</th>
            </tr>
        </thead>
        <tbody>
            <?php if ($result->num_rows > 0): ?>
                <?php while($row = $result->fetch_assoc()): ?>
                <tr>
                    <!-- Use esc_html() to sanitize output (WordPress best practice) -->
                    <td><?php echo esc_html($row['name']); ?></td>
                    <td><?php echo esc_html($row['email']); ?></td>
                    <td><?php echo esc_html($row['message']); ?></td>
                </tr>
                <?php endwhile; ?>
            <?php else: ?>
                <tr>
                    <td colspan="3">No contact entries found.</td>
                </tr>
            <?php endif; ?>
        </tbody>
    </table>
</div>

<?php 
$conn->close();
get_footer(); 
?>

Note: Always use esc_html() for dynamic output to prevent XSS vulnerabilities—this is a critical WordPress best practice.

3. Theme CSS conflicts #

Some WordPress themes have aggressive CSS that overrides Materialize styles. To test this:

• Switch to a default WordPress theme (like Twenty Twenty-Four) temporarily.
• If the table works, your original theme is causing conflicts. Fix this by using more specific CSS selectors or adjusting the load order of Materialize's stylesheet to load after your theme's CSS.

4. Incomplete PHP error handling #

Your original connection error code cuts off mid-sentence (die("Connection fai...");). If the database connection fails, this will terminate the page before it reaches the table code. Always complete error messages to ensure you can debug issues properly.

内容的提问来源于stack exchange，提问作者Capt. Black BearD