html - html css表将不排队 | css表将不排队

如何使这两个表对齐？

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

需要考虑的几件事

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

最佳答案

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

#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>

关于html - html css表将不排队，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58445793/