Can't create a table looks for my example html file

Web Development Front-End
1

Hi everyone, I got trouble to create a “Table” style of cheatsheet, I tried many times to fix it in the css, but all the content still group together without separate into row-by-row, cell-by-cell, column-by-column, I don’t know which part having issue… below is my HTML content & CSS code :

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>CSS Cheatsheet</title>
        <link rel="stylesheet" href="styles.css">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <header class="header">
            <h1>CSS Cheat Sheet</h1>
        </header>
        <main>
            <section class="table">
                <thead class="thead">
                    <tr class="table-title">
                        <th>Property</th>
                        <th>Name</th>
                        <th>Description</th>
                    </tr>
                </thead>
                <tbody class="table-body">
                    <tr class="table-row">
                        <td class="property"><code class="code">color</code></td>
                        <td class="name">Text Color</td>
                        <td class="description">Change the text color.</td>
                    </tr>
                    <tr class="table-row">
                        <td class="property"><code class="code">background-color</code></td>
                        <td class="name">Background Color</td>
                        <td class="description">Change the background color.</td>
                    </tr>
                    <tr class="table-row">
                        <td class="property"><code class="code">width</code></td>
                        <td class="name">Set width</td>
                        <td class="description">Set the width view, may in %, px, vh, vw, cover etc.</td>
                    </tr>
                    <tr class="table-row">
                        <td class="property"><code class="code">height</code></td>
                        <td class="name">Set height</td>
                        <td class="description">Set the height view, may in %, px, vh, vw, cover etc.</td>
                    </tr>
                    <tr class="table-row">
                        <td class="property"><code class="code">font-family</code></td>
                        <td class="name">Font family</td>
                        <td class="description">Change the type of font.</td>
                    </tr>
                    <tr class="table-row">
                        <td class="property"><code class="code">font-weight</code></td>
                        <td class="name">Font tick</td>
                        <td class="description">Change the text to tickness or thiness.</td>
                    </tr>
                    <tr class="table-row">
                        <td class="property"><code class="code">text-transform</code></td>
                        <td class="name">Transform the text</td>
                        <td class="description">Change the text to uppercase, lowercase etc.</td>
                    </tr>
                    <tr class="table-row">
                        <td class="property"><code class="code"></code></td>
                        <td class="name"></td>
                        <td class="description"></td>
                    </tr>
                    <tr class="table-row">
                        <td class="property"><code class="code"></code></td>
                        <td class="name"></td>
                        <td class="description"></td>
                    </tr>
                    <tr class="table-row">
                        <td class="property"><code class="code"></code></td>
                        <td class="name"></td>
                        <td class="description"></td>
                    </tr>
                </tbody>
            </section>

        </main>
        <footer>
            <section>

            </section>

        </footer>
    </body>
</html>

Here’s the CSS below:

body {
    box-sizing: border-box;
    margin: 0 auto;
    text-align: center;
    padding: 0 auto;
    width: 100%;
    height: 100%;
}

.table {
    border: 2px solid black;
    display: table;
    text-align: center;
}

.table-title {
    display: table-header-group;
    border-collapse: separate;
    text-align: center;
    border: 2px solid black;
}

.table-body {
    display: table-cell;
    border-collapse: collapse;
    text-align: center;
    border: 2px solid black;
}
1 Like
2

It looks like you are missing the opening and closing table tag. Insert table after your section class=table and that should fix it.

1 Like