Question

我想在视图中修复表格的标题部分。我做了如下代码。 <table class="table"> <tr style="position: fixed;width: 960px;"> <th> @Html.DisplayNameFor(model => model.Name) </th> <th> @Html.DisplayNameFor(model => model.Description) </th> </tr>

它修复了位置，但两列都在崩溃。我希望获得全宽度作为具有它的表格行。

Answer 1

您可以检查以下内容并根据当前表格进行更改。它会使你的标题固定并且tbody内容滚动

<section class="">
<div class="container">
<table>
  <thead>
    <tr class="header">
      <th>
        Table attribute name
        <div>Table attribute name</div>
      </th>
      <th>
        Value
        <div>Value</div>
      </th>
      <th>
        Description
        <div>Description</div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>align</td>
      <td>left, center, right</td>
      <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
    </tr>
    <tr>
      <td>bgcolor</td>
      <td>rgb(x,x,x), #xxxxxx, colorname</td>
      <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>
    </tr>
    <tr>
      <td>border</td>
      <td>1,""</td>
      <td>Specifies whether the table cells should have borders or not</td>
    </tr>
    <tr>
      <td>cellpadding</td>
      <td>pixels</td>
      <td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td>
    </tr>
    <tr>
      <td>cellspacing</td>
      <td>pixels</td>
      <td>Not supported in HTML5. Specifies the space between cells</td>
    </tr>
    <tr>
      <td>frame</td>
      <td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>
      <td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td>
    </tr>
    <tr>
      <td>rules</td>
      <td>none, groups, rows, cols, all</td>
      <td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td>
    </tr>
    <tr>
      <td>summary</td>
      <td>text</td>
      <td>Not supported in HTML5. Specifies a summary of the content of a table</td>
    </tr>
    <tr>
      <td>width</td>
      <td>pixels, %</td>
      <td>Not supported in HTML5. Specifies the width of a table</td>
    </tr>
  </tbody>
</table>
  </div>
</section>

CSS

html, body{
margin:0;
padding:0;
height:100%;
}
section {
  position: relative;
  border: 1px solid #000;
  padding-top: 37px;
  background: #500;
}
section.positioned {
  position: absolute;
  top:100px;
  left:100px;
  width:800px;
  box-shadow: 0 0 15px #333;
}
.container {
  overflow-y: auto;
  height: 200px;
}
table {
  border-spacing: 0;
  width:100%;
}
td + td {
  border-left:1px solid #eee;
}
td, th {
  border-bottom:1px solid #eee;
  background: #ddd;
  color: #000;
  padding: 10px 25px;
}
th {
  height: 0;
  line-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  color: transparent;
  border: none;
  white-space: nowrap;
}
th div{
  position: absolute;
  background: transparent;
  color: #fff;
  padding: 9px 25px;
  top: 0;
  margin-left: -25px;
  line-height: normal;
  border-left: 1px solid #800;
}
th:first-child div{
  border: none;
}

的jsfiddle

https://jsfiddle.net/dPixie/byB9d/3/light/

Answer 2

如果您希望直接修复上面的代码，基本上可以假设总宽度为960px（如表格宽度设置），请尝试以下css：

th {
    float: left;
    width: 50%;
    padding: 0;
}

这应该使表头每个都在其列中的总宽度彼此相邻。如果有效，请告诉我。

修复表头部分的位置

2 个答案: