Question

我有一个问题，一切都搞砸了。我尝试了几种解决方案，但我的个人资料页面并没有按照预期的方式进行调整。我希望一切都在中心，干净。以下是它的示例：https://imgur.com/t0OzF35此外，如何添加右边框AKA在用户名：和 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

EDITED

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;
}

Answer 2

使用一个包含多行的表。

不要将每一行都放在自己的表格中。

（并且不要将th元素用于数据单元格，请使用td。仅对标题单元格使用th。

HTML / CSS表格没有对齐，表格中的文字仍然填充

2 个答案: