Question

我无法将表设置为与标题相同。请帮助并提前致谢。代码和图片如下。enter image description here

    <!-- This is the table Style-->
    <style>
        table {
            width:100%;
        }
        th, td {
            width: 100%;
            border: 3px solid black;
            border-collapse: collapse;
        }
        th, td {
            width: 100%;
            padding: 13px;
            text-align: left;
        }
        table#t01 th {
            width: 100%;
            background-color: orange;
            color: black;
            font-size: 20px;
            position: relative;                
        }
    </style>

//这是HTML代码

<div>
  <table id="t01">
    <tr class="header"> 
      <th>Name</th>
      <th>Download</th>
    </tr>
    <tr class="data_table"></tr> 
  </table>
</div>

Answer 1

您的html错误，请使用：

1.2.3.0/24

Answer 2

您可以使用Bootstrap框架。您几乎可以获得用于Web设计的所有内容：

访问 getbootstrap

Bootstrap表的示例。

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
   <div class="container">
  <div class="row">
    <div class="col-sm-12">
      <table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
    </div>
  </div>
</div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

Answer 3

尝试执行以下代码。

table {
  width:100%;
}
th, td {
  width: 100%;
  border: 3px solid black;
  border-collapse: collapse;
}
th, td {
  width: 100%;
  padding: 13px;
  text-align: left;
}
table#t01 th {
  width: 100%;
  background-color: orange;
  color: black;
  font-size: 20px;
  position: relative;
}

  <table id="t01">
    <tr class="header"> 
      <th colspan="2">Name</th>
      <th>Download</th>
    </tr>
    <tr class="data-table"> 
      <td>Mp3</td>
      <td><a href="#">Download</a></td>
    </tr>
    <tr class="data-table"> 
      <td>File</td>
      <td><a href="#">Download</a></td>
    </tr>
  </table>

如何在html中设置表头和表数据

3 个答案: