Question

如何使这两个表对齐？

<html>
    <head> 
        <style>
            #index_table, #index_table_header{
                text-align:left;
                margin:20px;
                margin: 0 auto;
                table-layout: fixed;
            }
            #index_table, #index_table_header{
                width:800px;
            }
            #index_table{
                display: block;
                height: 390px;
                overflow-y: scroll;
            }
            #index_table_header td{
                padding:10px 8px;
                width: 100px;
                border: 1px solid black;
            }
            #index_table td{
                padding:10px 8px;
                width: 100px;
                border: 1px solid black;
            }


            #index_table td:nth-child(1), #index_table_header td:nth-child(1){
                width: 80px;
                }
            #index_table  td:nth-child(3), #index_table_header  td:nth-child(3){
                width: 70px;
                }

            #index_table  td:nth-child(5), #index_table_header  td:nth-child(5){
                width: 200px;
                }  
            #index_table  td:nth-child(2), #index_table_header  td:nth-child(2) {
                width: 250px;
                }


        </style>       
    </head>
    <body>
            <table id="index_table_header">
                    <thead>
                        <tr>
                            <td>ID</th>
                            <td>Item</td>
                            <td>Amount</td>
                            <td>Added</td>
                            <td>Nutritional Value ID</td>
                            <td>Actions</td>
                        </tr>
                    </thead>
            </table>
            <table id="index_table">
                <tbody>
                    <tr>
                        <td>395</td>
                        <td>chicken liver</td>
                        <td>0.37</td>
                        <td>2019-10-14</td>
                        <td>67</td>
                        <td>
                            <a href="/delete/395">Delete</a>
                            <br>
                            <a href="/update/395">Update</a>
                        </td>
                    </tr>

    </body>
</table>
    </html>

需要考虑的几件事

我需要表格和表格单元格（列）准确对齐
第二个表实际上有数百行，我希望它可以滚动，并且我不想让标题不可见，这就是为什么我有两个表并且不想合并到一个表的原因。

Answer 1

我相信您的第一个表实际上是第二个表的标题。如果是这样，您可以这样做。您可以通过和

区分标题和数据

#index_table {
  text-align: left;
  margin: 20px;
  margin: 0 auto;
}

#index_table {
  width: 800px;
}

#index_table thead {
  display: block;
}

#index_table tbody {
  display: block;
  height: 390px;
  overflow-y: scroll;
}

#index_table th {
  padding: 10px 8px;
  border: 1px solid black;
  background-color: gray;
}

#index_table td {
  padding: 10px 8px;
  border: 1px solid black;
}

#index_table td:nth-child(1),th:nth-child(1) {
  width: 80px;
}

#index_table td:nth-child(2),th:nth-child(2) {
  width: 70px;
}

#index_table td:nth-child(3),th:nth-child(3) {
  width: 200px;
}

#index_table td:nth-child(4),th:nth-child(4) {
  width: 250px;
}

#index_table td:nth-child(5),th:nth-child(5) {
  width: 250px;
}

<html>

<body style="height: 100px">
  <table id="index_table">
    <thead>
      <tr>
        <th>ID</th>
        <th>Item</th>
        <th>Amount</th>
        <th>Added</th>
        <th>Nutritional Value ID</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>395</td>
        <td>chicken liver</td>
        <td>0.37</td>
        <td>2019-10-14</td>
        <td>67</td>
        <td>
          <a href="/delete/395">Delete</a>
          <br>
          <a href="/update/395">Update</a>
        </td>
      </tr>
      <tr>
        <td>395</td>
        <td>chicken liver</td>
        <td>0.37</td>
        <td>2019-10-14</td>
        <td>67</td>
        <td>
          <a href="/delete/395">Delete</a>
          <br>
          <a href="/update/395">Update</a>
        </td>
      </tr>
      <tr>
        <td>395</td>
        <td>chicken liver</td>
        <td>0.37</td>
        <td>2019-10-14</td>
        <td>67</td>
        <td>
          <a href="/delete/395">Delete</a>
          <br>
          <a href="/update/395">Update</a>
        </td>
      </tr>
      <tr>
        <td>395</td>
        <td>chicken liver</td>
        <td>0.37</td>
        <td>2019-10-14</td>
        <td>67</td>
        <td>
          <a href="/delete/395">Delete</a>
          <br>
          <a href="/update/395">Update</a>
        </td>
      </tr>
      <tr>
        <td>395</td>
        <td>chicken liver</td>
        <td>0.37</td>
        <td>2019-10-14</td>
        <td>67</td>
        <td>
          <a href="/delete/395">Delete</a>
          <br>
          <a href="/update/395">Update</a>
        </td>
      </tr>
      <tr>
        <td>395</td>
        <td>chicken liver</td>
        <td>0.37</td>
        <td>2019-10-14</td>
        <td>67</td>
        <td>
          <a href="/delete/395">Delete</a>
          <br>
          <a href="/update/395">Update</a>
        </td>
      </tr>
      <tr>
        <td>395</td>
        <td>chicken liver</td>
        <td>0.37</td>
        <td>2019-10-14</td>
        <td>67</td>
        <td>
          <a href="/delete/395">Delete</a>
          <br>
          <a href="/update/395">Update</a>
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

Answer 2

您可以使用此代码

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <title>Hello, world!</title>
  <style type="text/css">
    body {
      margin: 0;
    }
    
    table {
      border-collapse: collapse;
      border-width: 0;
      display: block;
      overflow: auto;
    }
    
    td,
    th {
      border: 1px solid;
      padding: .5em 2em;
    }
    
    th {
      background-color: #dddddd;
    }
  </style>
</head>

<body>
  <div class="container">
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Item</th>
          <th>Amount</th>
          <th>Added</th>
          <th>Nutritional Value ID</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>395</td>
          <td>chicken liver</td>
          <td>0.37</td>
          <td>2019-10-14</td>
          <td>67</td>
          <td>
            <a href="/delete/395">Delete</a>
            <br>
            <a href="/update/395">Update</a>
          </td>
        </tr>
        <tr>
          <td>395</td>
          <td>chicken liver</td>
          <td>0.37</td>
          <td>2019-10-14</td>
          <td>67</td>
          <td>
            <a href="/delete/395">Delete</a>
            <br>
            <a href="/update/395">Update</a>
          </td>
        </tr>
        <tr>
          <td>395</td>
          <td>chicken liver</td>
          <td>0.37</td>
          <td>2019-10-14</td>
          <td>67</td>
          <td>
            <a href="/delete/395">Delete</a>
            <br>
            <a href="/update/395">Update</a>
          </td>
        </tr>
        <tr>
          <td>395</td>
          <td>chicken liver</td>
          <td>0.37</td>
          <td>2019-10-14</td>
          <td>67</td>
          <td>
            <a href="/delete/395">Delete</a>
            <br>
            <a href="/update/395">Update</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

HTML CSS表格不会排队

2 个答案: