Question

我正在尝试制作一个表格中心对齐的HTML页面。现在我想要整个页面的边框，但在中心。

table {
  min-width: 900px;
}

html,
body {
  height: 100%;
  min-width: 900px;
  margin: 0;
  padding: 0;
}

body {
  background: white;
  border-style: double;
}

<table class="table" align="center">
  <tr>
    <td colspan="2"> <img src="logo.png" class="logo" /> </td>
    <td colspan="2" align="right">
      <h3>Heading</h3>
    </td>
  </tr>
  <tr>
    <td colspan="4">
      <hr>
    </td>
  </tr>

  <tr>
    <td> <input type="number" class="input"> </td>
    <td> <input type="text" class="input"> </td>
    <td> <input type="text" class="input"> </td>
    <td> <input type="text" class="input"> </td>
  </tr>
  <tr>
    <td>Student ID Number</td>
    <td>Last Name</td>
    <td>First Name</td>
    <td>Middle Name</td>
  </tr>
</table>

我正在寻找这样的东西。 http://ibb.co/gyqTY6 我的内容显示在整个页面中，我希望在整个页面的中心有一个边框。

上面的样式为我提供了整个页面的边框，但我希望在整个页面的中心有一个边框。

Answer 1

你在寻找像这样的东西

     .container{
       border: 1px solid;
    margin: 3%;
    padding: 3%;
    margin-right: 18%;
    margin-left: 18%;

    }
table{
margin:0 auto;
}
table th{
min-width:20%;
}
    body{
      background:red;
    }

 <div class="container">
      <h2>Basic Table</h2>
      <p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>            
      <table class="table" border="1">
        <thead>
          <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
          </tr>
             <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
          </tr>
             <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
          </tr>
             <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
          </tr>
             <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
          </tr>
             <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
          </tr>
             <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
          </tr>
             <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
          </tr>
             <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
          </tr>
          <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
          </tr>
          <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
          </tr>
        </tbody>
      </table>
    </div>

Answer 2

目前还不是很清楚你想要什么，但也许只是在桌子上使用边框就是你的意思。

在这种情况下，相应地设置表格的样式。编辑：特别是，避免将border应用于身体，这不会得到您想要的结果。

最小建议：

＆＃13;

table {
  min-width: 900px;
  border: 1px solid #000;
}

html,
body {
  height: 100%;
  min-width: 900px;
  margin: 0;
  padding: 0;
}

＆＃13;

<table class="table" align="center">
  <tr>
    <td colspan="2"> <img src="logo.png" class="logo" /> </td>
    <td colspan="2" align="right">
      <h3>Heading</h3>
    </td>
  </tr>
  <tr>
    <td colspan="4">
      <hr>
    </td>
  </tr>

  <tr>
    <td> <input type="number" class="input"> </td>
    <td> <input type="text" class="input"> </td>
    <td> <input type="text" class="input"> </td>
    <td> <input type="text" class="input"> </td>
  </tr>
  <tr>
    <td>Student ID Number</td>
    <td>Last Name</td>
    <td>First Name</td>
    <td>Middle Name</td>
  </tr>
</table>

＆＃13;

Answer 3

表格不应用于布局。它们会导致页面的呈现速度变慢并且在语义上不正确。它们只应用于呈现表格数据。

另外，不要使用h1，h2等因为它们使文本看起来的方式，使用它们，因为它们是特定重要性的新部分的逻辑起点。任何文本都可以设置为与任何其他文本一样。

所以，以上两点真的是在谈论“语义学”。您使用的HTML标记应描述它们传达的数据，而不是页面上数据的外观。这允许任何设备在任何地方消费数据，并且该设备应该理解数据是什么。 CSS旨在使数据看起来像你想要的样子。不要混淆两者。

现在，您可以使用CSS display属性“设置”要显示为内容的内容，这样您就可以避免使用<table>元素和相关元素。但是，您的布局看起来像简单的列，因此您可以通过多种方式处理此问题，但这里只有一个：

html, body {
 margin:0;
 padding:0;
}

body {
  background: white;
  border: double;
}

.header h1 {
  font-size:1.3em;
}

.wrapper {
  border: 1px double black;
  margin:25% 5px;  /* Adding the same margin to top and bottom creates vertical alignment */
  padding:10px;    
}

.column {
  display:inline-block;
}

<!-- By placing everything in a wrapper element, you can move it and style it easily -->
<div class="wrapper">
  <div class="header">
    <img src="logo.png" class="logo">
    <h1>Heading</h1>
  </div>
  <div>
    <hr>
  </div>	
  <div class="column">
    <input type="number" class="input"><br>
    <span>Student ID Number</span>
  </div>
  <div class="column">
	  <input type="text" class="input"><br>
	  <span>Last Name</span>      
  </div>
  <div class="column">
	  <input type="text" class="input"><br>
	  <span>First Name</span>      
  </div>
  <div class="column">    
	  <input type="text" class="input"><br>
	  <span>Middle Name</span>      
  </div>
</div>

页面的html边框中心

3 个答案: