Final Project help with centering html table

Question

I'm currently working on the cs50 Final Project (a website). So I'm printing the data in a sqlite table as an html table for a page of my website. However, my table headers and data sometimes took up multiple lines each. To correct this, I made sure white-space didn't wrap. Although that fixed that problem, it introduced another - my table is all the way to the right! I tried multiple methods to center the table, but none worked. Any help in centering the table is appreciated.

Here's the html for the table:

{% extends "layout.html" %}

{% block title %}
    All Sets
{% endblock %}

{% block main %}
        <link href="{{ url_for('static', filename='legoset.css') }}" rel="stylesheet"/>
    <table class="table table-striped">
        <thead>
            <th>Set Number</th>
            <th>Set Variant</th>
            <th>Set Theme</th>
            <th>Set Subtheme</th>
            <th>Year Released</th>
            <th>Set Name</th>
            <th>Minifig Count</th>
            <th>Number of Pieces</th>
            <th>Set Price (USD)</th>
            <th>Set Image (url)</th>
        </thead>
            {% for row in rows %}
                <tr>
                    <td>{{ row.Number }}</td>
                    <td>{{ row.Variant }}</td>
                    <td>{{ row.Theme }}</td>
                    <td>{{ row.Subtheme }}</td>
                    <td>{{ row.Year }}</td>
                    <td>{{ row.Name }}</td>
                    <td>{{ row.Minifigs }}</td>
                    <td>{{ row.Pieces }}</td>
                    <td>{{ row.USPrice }}</td>
                    <td>{{ row.ImageURL }}</td>
                </tr>
            {% endfor %}
    </table>    
{% endblock %}

And here's the linked css:

table {
    margin: 0px auto;
    float: none;
}
th, td {
    text-align: center;
    white-space: nowrap;
}

Answer 1

You are using Bootstrap to stylize ur table and as I see u r using <table class="table table-striped"> to create stripped table but r u really getting a stripped table? Change ur code to include something like this :

 <div class="container">
    <table class="table table-striped">
    <thead>
        <tr>
           <th>Set Number</th>
           <th>other headers</th>
           <th>....</th>
        </tr>
    </thead>
    <tbody>
        {% for row in rows %}
            <tr>
                <td>{{ row.Number }}</td>
                <td>{{ row.Variant }}</td>
                <td>{{ row.Theme }}</td>
                <td>{{ row.Subtheme }}</td>
                <td>{{ row.Year }}</td>
                <td>{{ row.Name }}</td>
                <td>{{ row.Minifigs }}</td>
                <td>{{ row.Pieces }}</td>
                <td>{{ row.USPrice }}</td>
                <td>{{ row.ImageURL }}</td>
            </tr>
       {% endfor %}
   </tbody>
   </table>
</div>

Notice which tags u miss in ur code.And what u mean by centering of the table should be related horizontal and vertical alignment of the table content. Check out w3schools' site to further see if u want to change the alignment of texts in ur table.

Answer 2

Try the following in ur linked CSS instead of u r including in table element of CSS:

table
{ 
   margin-left: auto;
   margin-right: auto;
}