HTML/CSS 表格不对齐，表格中的文本仍然填充

Question

我遇到了一个问题，一切都搞砸了。我已经尝试了几个解决方案，但我的个人资料页面无法按应有的方式对齐。我希望一切都在中心并且干净。这是它的外观示例:https://imgur.com/t0OzF35另外，如何添加右边框，也就是在 Username: 和 Edmin 之间添加边框。

<main>
<div class="container body-container">
    <div class="row">
        <div id="main" class="col-md-9">
            <div style="text-align: center">
                <style>
                    table {
                        border-spacing: 0;
                        margin:0;
                        padding: 0;
                        border-collapse: collapse;
                        width: 50%;
                    }
                    table, th, td {
                        margin:0;
                        padding: 0;
                        border: 3px solid black;
                    }
                    th {
                        margin:0;
                        padding: 0;
                        background-color: #2c3e50;
                        color: white;
                        text-align: center;
                        height: 50px;
                    }
                </style>
                <div class="form-group">
                    <img style="height: 250px; width: 250px; border:8px dashed #2c3e50" hspace="100" th:src="@{'data:image/jpeg;base64,' + ${image}}"  /><br/>
                    <br/>
                    <label class="col-sm-4 control-label" for="image">Change profile picture</label>
                    <div class="col-sm-4">
                        <input type="file" class="form-control" id="image" placeholder="Image" name="multipartFile" required="required"/>
                        <span class="help-block">Profile picture can be up to 32 MBs</span>
                    </div>
                </div>

                <table cellspacing="0" cellpadding="0">
                    <tr>
                        <th>E-mail:</th>
                        <th><span th:text="${user.email}"><br/></span></th>
                    </tr>
                </table>

                <table cellspacing="0" cellpadding="0">
                    <tr>
                        <th>Name:</th>
                        <th> <span th:text="${user.fullName}"></span></th>
                    </tr>
                    <tr>
                        <th>Username:</th>
                        <th> <span th:text="${user.username}"></span></th>
                    </tr>
                </table>
                <table cellspacing="0" cellpadding="0">
                    <tr>
                        <th>Age:</th>
                        <th><span th:text="${user.age}"><br/></span></th>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>
</main>

Answer 1

已编辑

table {
  border-spacing: 0;
  margin:0 auto;
  padding: 0;
  border-collapse: collapse;
  width: 50%;
  table-layout: fixed;
}
table, th, td {
  padding: 0;
  border: 3px solid black;
  border-collapse: collapse;
}