Question

我的桌子的CSS有问题。

我创建了这个可水平滚动的表。一切都很好，但在水平滚动后，页脚的宽度不会延伸。

如何使宽度相同？

我尝试编辑.table-footer { }部分但未成功

您可以在此处查看：http://jsfiddle.net/jsL21e2j/

Answer 1

您需要将表格和页脚放在包含display:inline-block

的div包装中

例如：

<div class="wrapper">
    ...table and footer
</div>

.wrapper {display:inline-block;}

Example

Answer 2

您可以将其包装在显示为表格的div中：http://jsfiddle.net/jsL21e2j/3/

<div style="background-color: red; display: table">
your table and footer here
</div>

Answer 3

您需要在div中添加内容表并添加overflow-y作为滚动，并将overflow-y的正文设置为隐藏，这样内容内容将滚动显示所有内容的页脚显示。

小提琴http://jsfiddle.net/swapnilmotewar/jsL21e2j/4/

Answer 4

您可以放置表格的页脚并添加colspan，如下所示：

<tfoot>
  <tr>
    <td colspan="11">my footer</td>
  </tr>
</tfoot>

Answer 5

只需添加页脚类的宽度，如下面的小提琴中添加的那样。看看这个： -

.table-footer
{
    width: 855px;
}

http://jsfiddle.net/jsL21e2j/5/

Answer 6

如果您希望页脚向左粘，也就是说，滚动时不希望它向左移动，则可以使用position: sticky。

.table-footer {
    position: sticky;
    left: 0;
}
html {
    overflow: auto;
}
body {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right:0;
    overflow: auto;
}

＆＃13;

.table-footer {
    position: sticky;
    left: 0;
}
html {
    overflow: auto;
}
body {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right:0;
    overflow: auto;
}

table.dataTable {
  margin: 0 auto;
  clear: both;
  width: 100%
}
table.dataTable thead th {
  padding-left: 10px;
  padding-right: 10px;
  height: 30px;
  line-height: 30px;
  font-weight: 400;
  color: #666;
  cursor: pointer;
  *cursor: hand;
  font-size: 12px;
  font-weight: 600;
  text-shadow: 0 1px rgba(255, 255, 255, 0.5);
  -webkit-box-shadow: 0 1px 0 #fff inset;
  -moz-box-shadow: 0 1px 0 #fff inset;
  box-shadow: 0 1px 0 #fff inset
}
table.dataTable td {
  padding: 7px 11px
}
table.dataTable tbody tr td {
  border-left: 1px solid #eaebef
}
table.dataTable thead tr th {
  border-left: 1px solid #b5b7c3;
  border-bottom: 1px solid #b5b7c3;
  border-top: 1px solid #c3c5ce
}
table.dataTable tbody tr td:first-child {
  border-left: none
}
table.dataTable thead tr {
  background: #eaeaea;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZkZmRmZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2VhZWFlYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==);
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fdfdfd), color-stop(100%, #eaeaea));
  background-image: -webkit-linear-gradient(top, #fdfdfd, #eaeaea);
  background-image: -moz-linear-gradient(top, #fdfdfd, #eaeaea);
  background-image: -o-linear-gradient(top, #fdfdfd, #eaeaea);
  background-image: linear-gradient(top, #fdfdfd, #eaeaea)
}
table.dataTable thead tr th:first-child {
  border-left: none
}
table.dataTable thead tr:first-child {
  margin: 0;
  padding: 0;
  border-top: none
}
table.dataTable tr {
  border-top: 1px solid #eaebef
}
table.dataTable tr.even {
  background-color: #F3F4F8
}
.dataTables_info {
  clear: both;
  float: left;
  padding: 10px 0
}
.table-footer {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  clear: both;
  padding: 8px 12px;
  height: 36px;
  font-size: 11px;
  color: #666;
  border-top: 1px solid #cdcdcd;
  -moz-border-radius-bottomright: 3px;
  -webkit-border-bottom-right-radius: 3px;
  border-bottom-right-radius: 3px;
  -moz-border-radius-bottomleft: 3px;
  -webkit-border-bottom-left-radius: 3px;
  border-bottom-left-radius: 3px;
  background: #fdfdfd;
  background: #eaeaea;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZkZmRmZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2VhZWFlYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==);
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fdfdfd), color-stop(100%, #eaeaea));
  background-image: -webkit-linear-gradient(top, #fdfdfd, #eaeaea);
  background-image: -moz-linear-gradient(top, #fdfdfd, #eaeaea);
  background-image: -o-linear-gradient(top, #fdfdfd, #eaeaea);
  background-image: linear-gradient(top, #fdfdfd, #eaeaea)
}
.dataTables_paginate {
  float: right;
  margin-top: 7px
}
.paging_full_numbers {
  height: 22px;
  line-height: 22px
}
.paging_full_numbers a.paginate_button,
.paging_full_numbers a.paginate_active {
  border-top: 1px solid #E2E2E2;
  border-left: 1px solid #C9C9C9;
  border-right: 1px solid #C9C9C9;
  border-bottom: 1px solid #AEAEAE;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  border-radius: 3px;
  padding: 4px 7px;
  margin: 0 3px;
  cursor: pointer;
  color: #666;
  font-weight: 600;
  text-shadow: 0 1px rgba(255, 255, 255, 0.5);
  font-size: 11px;
  -webkit-box-shadow: 0 1px 0 #fff inset;
  -moz-box-shadow: 0 1px 0 #fff inset;
  box-shadow: 0 1px 0 #fff inset
}

＆＃13;

<link href="application.css" media="screen" rel="stylesheet" type="text/css">




<table cellpadding="0" cellspacing="0" border="0" class="dTable dataTable" id="DataTables_Table_0" aria-describedby="DataTables_Table_0_info">
  <thead>
    <tr role="row">
      <th class="sorting_asc" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-sort="ascending" aria-label="

                                                ID                                            
                                            : activate to sort column descending">
        <div>
          ID</div>
      </th>
      <th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="

                                                                                                                                  E-mail                                            
                                                                                                                                  : activate to sort column ascending">
        <div>
          E-mail</div>
      </th>
      <th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="

                                                                                                                                  Student ID                                            
                                                                                                                                  : activate to sort column ascending">
        <div>
          Student ID</div>
      </th>
      <th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="

                                                                                                                                  Chinese Name                                            
                                                                                                                                  : activate to sort column ascending">
        <div>
          Chinese Name</div>
      </th>
      <th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="

                                                                                                                                  English Name                                            
                                                                                                                                  : activate to sort column ascending">
        <div>
          English Name</div>
      </th>
      <th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="

                                                                                                                                  TW National ID / Passport Number                                            
                                                                                                                                  : activate to sort column ascending">
        <div>
          TW National ID / Passport Number</div>
      </th>
      <th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="

                                                                                                                                  Date of Birth                                            
                                                                                                                                  : activate to sort column ascending">
        <div>
          Date of Birth</div>
      </th>
      <th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="

                                                                                                                                  Phone Number                                            
                                                                                                                                  : activate to sort column ascending">
        <div>
          Phone Number</div>
      </th>
      <th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="

                                                                                                                                  Payment                                            
                                                                                                                                  : activate to sort column ascending">
        <div>
          Payment</div>
      </th>
      <th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="

                                                                                                                                  Group                                            
                                                                                                                                  : activate to sort column ascending">
        <div>
          Group</div>
      </th>
      <th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="

                                                                                                                                  Car No.                                            
                                                                                                                                  : activate to sort column ascending">
        <div>
          Car No.</div>
      </th>
    </tr>
  </thead>

  <tbody role="alert" aria-live="polite" aria-relevant="all">
    <tr class="odd">
      <td class=" sorting_1">5</td>
      <td class=" ">test@gmail.com</td>
      <td class=" ">test</td>
      <td class=" ">test</td>
      <td class=" ">Peter</td>
      <td class=" ">CHSG923423546432</td>
      <td class=" ">1990-08-28</td>
      <td class=" ">097815620454</td>
      <td class=" "></td>
      <td class=" "></td>
      <td class=" "></td>
    </tr>
    <tr class="even">
      <td class=" sorting_1">8</td>
      <td class=" ">test@gmail.com</td>
      <td class=" ">D1432014</td>
      <td class=" ">test</td>
      <td class=" ">test</td>
      <td class=" ">K423N5WEKR3L5</td>
      <td class=" ">1990-01-18</td>
      <td class=" ">+886 32 420 454</td>
      <td class=" "></td>
      <td class=" "></td>
      <td class=" "></td>
    </tr>
  </tbody>
</table>
<div class="table-footer">
  <div class="dataTables_info" id="DataTables_Table_0_info">Showing 1 to 2 of 2 entries</div>
  <div class="dataTables_paginate paging_full_numbers" id="DataTables_Table_0_paginate"><a tabindex="0" class="first paginate_button paginate_button_disabled" id="DataTables_Table_0_first">First</a><a tabindex="0" class="previous paginate_button paginate_button_disabled" id="DataTables_Table_0_previous">Previous</a><span><a tabindex="0" class="paginate_active">1</a></span>
    <a
    tabindex="0" class="next paginate_button paginate_button_disabled" id="DataTables_Table_0_next">Next</a><a tabindex="0" class="last paginate_button paginate_button_disabled" id="DataTables_Table_0_last">Last</a>
  </div>
</div>

＆＃13;

CSS问题与元素的宽度

6 个答案: