可滚动表对齐标题和正文

时间：2015-03-12 06:00:54

标签： html css

我有一个使用以下代码创建的表：

＆＃13;
＆＃13; 
.table {
  border-collapse: collapse;
  border-spacing: 0;
  border-color: #CCC;
  width: 100%;
}
.table td {
  font-size: 14px;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
  border-color: #CCC;
  color: #333;
  background-color: #FFFFFF;
  font-family: "Courier New", Courier, monospace !important;
  text-align: center;
}
.table th {
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
  border-color: #CCC;
  color: #333;
  background-color: #F0F0F0;
}
.table th {
  font-weight: bold;
  font-family: "Courier New", Courier, monospace !important;
  text-align: center;
}
.tablealign {
  float: right;
  padding-left: 3%;
  padding-right: 10%;
  width: 30%;
  height: 200px;
  border-radius: 3px;
  padding-bottom: 50px;
}
.vscrollable {
  overflow-x: hidden;
  overflow-y: scroll;
  height: 100px;
  display: block;
}
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width initial-scale=1.0" />

  <title>StudentRecords | Portal</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
  <div>
    <div class="tablealign">
      <table class="table">
        <thead>
          <tr>
            <th>Course ID</th>
            <th>Course Name</th>
          </tr>
        </thead>
        <tbody class="table vscrollable">
          <tr>
            <td>hello there</td>
            <td>hello world</td>
          </tr>
          <tr>
            <td>hello there</td>
            <td>hello world</td>
          </tr>
          <tr>
            <td>hello there</td>
            <td>hello world</td>
          </tr>
          <tr>
            <td>hello there</td>
            <td>hello world</td>
          </tr>
          <tr>
            <td>hello there</td>
            <td>hello world</td>
          </tr>
          <tr>
            <td>hello there</td>
            <td>hello world</td>
          </tr>
          <tr>
            <td>hello there</td>
            <td>hello world</td>
          </tr>
          <tr>
            <td>hello there</td>
            <td>hello world</td>
          </tr>
          <tr>
            <td>hello there</td>
            <td>hello world</td>
          </tr>
          <tr>
            <td>hello there</td>
            <td>hello world</td>
          </tr>
          <tr>
            <td>hello there</td>
            <td>hello world</td>
          </tr>
          <tr>
            <td>hello there</td>
            <td>hello world</td>
          </tr>
          <tr>
            <td>hello there</td>
            <td>hello world</td>
          </tr>
          <tr>
            <td>hello there</td>
            <td>hello world</td>
          </tr>
          <tr>
            <td>hello there</td>
            <td>hello world</td>
          </tr>
          <tr>
            <td>hello there</td>
            <td>hello world</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

但是，当我运行它时，我的表体永远不会与表头对齐。我尝试使用一个表并将主体显示为块，但结果是相同的。我尝试使用2个表（一个用于标题，一个用于正文），但结果是相同的。

如何将身体与标题对齐？ （要查看我正在谈论的内容，请运行代码段并点击＆＃34;整页＆＃34;）。

4 个答案:

答案 0 :(得分：1)

这是fiddle。

和纯代码： HTML：

<div>
<div class="tablealign">
    <table class="table">
        <thead>
            <tr>
                <th>Course ID</th>
                <th>Course Name</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>hello there</td>
                <td>hello world</td>
            </tr>
            <tr>
                <td>hello there</td>
                <td>hello world</td>
            </tr>
            <tr>
                <td>hello there</td>
                <td>hello world</td>
            </tr>
            <tr>
                <td>hello there</td>
                <td>hello world</td>
            </tr>
            <tr>
                <td>hello there</td>
                <td>hello world</td>
            </tr>
            <tr>
                <td>hello there</td>
                <td>hello world</td>
            </tr>
            <tr>
                <td>hello there</td>
                <td>hello world</td>
            </tr>
            <tr>
                <td>hello there</td>
                <td>hello world</td>
            </tr>
            <tr>
                <td>hello there</td>
                <td>hello world</td>
            </tr>
            <tr>
                <td>hello there</td>
                <td>hello world</td>
            </tr>
            <tr>
                <td>hello there</td>
                <td>hello world</td>
            </tr>
            <tr>
                <td>hello there</td>
                <td>hello world</td>
            </tr>
            <tr>
                <td>hello there</td>
                <td>hello world</td>
            </tr>
            <tr>
                <td>hello there</td>
                <td>hello world</td>
            </tr>
            <tr>
                <td>hello there</td>
                <td>hello world</td>
            </tr>
            <tr>
                <td>hello there</td>
                <td>hello world</td>
            </tr>
        </tbody>
    </table>
</div>

CSS：

    .table {
    border-collapse: collapse;
    width: 100%;
}
.table td {
    font-size: 14px;
    padding: 10px 20px;
    overflow: hidden;
    word-break: normal;
    color: #333;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background-color: #FFFFFF;
    font-family:"Courier New", Courier, monospace !important;
    text-align: center;
}
.table th {
    font-weight: bold;
    font-family:"Courier New", Courier, monospace !important;
    text-align: center;
    font-size: 14px;
    border: 1px solid #ccc;
    border-bottom: 2px solid #ccc;
    padding: 10px 20px;
    word-break: normal;
    color: #333;
    background-color: #F0F0F0;
}
.tablealign {
    float: right;
    padding-left: 3%;
    padding-right: 10%;
    width: 40%;
    height: 200px;
    border-radius: 3px;
    padding-bottom: 50px;
}
tbody {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100px;
    display: block;
}
thead {
    display:table;
    width: calc(100% - 17px);
    table-layout:fixed;
}
tbody tr {
    table-layout: fixed;
    display:table;
    width:100%;
}

答案 1 :(得分：1)

您需要从<table>和<tbody>标记中断布局，并将表格布局从<thead>或<tr>恢复。 最后，table-layout:fixed;将有助于均匀喷洒细胞

.table thead{
  display:table;
  border-collapse: collapse;
  border-spacing: 0;
  border-color: #CCC;
  width: calc(100% - 1em);
  table-layout:fixed;
}
.table td {
  font-size: 14px;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  word-break: normal;
  border-color: #CCC;
  text-align: center;
}
.table th {
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  border-color: #CCC;
  color: #333;
  background-color: #F0F0F0;
}
.table th {
  font-weight: bold;
  text-align: center;
}
.tablealign {
  float: right;
  padding-left: 3%;
  padding-right: 10%;
  width: 30%;
  height: 200px;
  border-radius: 3px;
  padding-bottom: 50px;
}
.table.vscrollable {
  overflow-x: hidden;
  overflow-y: scroll;
  height: 100px;
  display: block;

}
.vscrollable tr {
  display:table;
  table-layout:fixed;
  width:100%;
  }
<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width initial-scale=1.0" />

  <title>StudentRecords | Portal</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
  <div>
    <div class="tablealign">
      <table class="table">
        <thead>
          <tr>
            <th>Course ID</th>
            <th>Course Name</th>
          </tr>
        </thead>
        <tbody class="table vscrollable">
          <tr>
            <td>hello there</td>
            <td>hello world</td>
          </tr>
          <tr>
            <td>hello there</td>
            <td>hello world</td>
          </tr>
          <tr>
            <td>hello there</td>
            <td>hello world</td>
          </tr>
          <tr>
            <td>hello there</td>
            <td>hello world</td>
          </tr>
          <tr>
            <td>hello there</td>
            <td>hello world</td>
          </tr>
          <tr>
            <td>hello there</td>
            <td>hello world</td>
          </tr>
          <tr>
            <td>hello there</td>
            <td>hello world</td>
          </tr>
          <tr>
            <td>hello there</td>
            <td>hello world</td>
          </tr>
          <tr>
            <td>hello there</td>
            <td>hello world</td>
          </tr>
          <tr>
            <td>hello there</td>
            <td>hello world</td>
          </tr>
          <tr>
            <td>hello there</td>
            <td>hello world</td>
          </tr>
          <tr>
            <td>hello there</td>
            <td>hello world</td>
          </tr>
          <tr>
            <td>hello there</td>
            <td>hello world</td>
          </tr>
          <tr>
            <td>hello there</td>
            <td>hello world</td>
          </tr>
          <tr>
            <td>hello there</td>
            <td>hello world</td>
          </tr>
          <tr>
            <td>hello there</td>
            <td>hello world</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</body>

</html>

答案 2 :(得分：0)

<table class="table">
    <thead>
      <tr>
        <th>Course ID</th>
        <th>Course Name</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>hello there</td>
        <td>hello world</td>
      </tr>
      <tr>
        <td>hello there</td>
        <td>hello world</td>
      </tr>
      <tr>
        <td>hello there</td>
        <td>hello world</td>
      </tr>
      <tr>
        <td>hello there</td>
        <td>hello world</td>
      </tr>
      <tr>
        <td>hello there</td>
        <td>hello world</td>
      </tr>
      <tr>
        <td>hello there</td>
        <td>hello world</td>
      </tr>
      <tr>
        <td>hello there</td>
        <td>hello world</td>
      </tr>
      <tr>
        <td>hello there</td>
        <td>hello world</td>
      </tr>
      <tr>
        <td>hello there</td>
        <td>hello world</td>
      </tr>
      <tr>
        <td>hello there</td>
        <td>hello world</td>
      </tr>
      <tr>
        <td>hello there</td>
        <td>hello world</td>
      </tr>
      <tr>
        <td>hello there</td>
        <td>hello world</td>
      </tr>
      <tr>
        <td>hello there</td>
        <td>hello world</td>
      </tr>
      <tr>
        <td>hello there</td>
        <td>hello world</td>
      </tr>
      <tr>
        <td>hello there</td>
        <td>hello world</td>
      </tr>
      <tr>
        <td>hello there</td>
        <td>hello world</td>
      </tr>
    </tbody>
  </table>

答案 3 :(得分：0)

你有2张桌子。删除第一个关闭表标签和第二个关闭表标签，然后它对我来说很好。

相关问题
最新问题