جدول HTML مع التمرير الأفقي (ثابت العمود الثابت)

Question

لقد كنت أحاول التفكير في طريقة لصنع طاولة مع عمود أول ثابت (وبقية الجدول مع تدفق أفقي) رأيت منشورًا كان له سؤال مماثل. ولكن يبدو أن بت العمود الثابت لا يتم حلها. مساعدة؟

Answer 1

لدي طاولة مماثلة على غرار ذلك:

<table style="width:100%; table-layout:fixed">
    <tr>
        <td style="width: 150px">Hello, World!</td>
        <td>
            <div>
                <pre style="margin:0; overflow:scroll">My preformatted content</pre>
            </div>
        </td>
    </tr>
</table>

Answer 2

ماذا عن:

table {
  table-layout: fixed; 
  width: 100%;
  *margin-left: -100px; /*ie7*/
}
td, th {
  vertical-align: top;
  border-top: 1px solid #ccc;
  padding: 10px;
  width: 100px;
}
.fix {
  position: absolute;
  *position: relative; /*ie7*/
  margin-left: -100px;
  width: 100px;
}
.outer {
  position: relative;
}
.inner {
  overflow-x: scroll;
  overflow-y: visible;
  width: 400px; 
  margin-left: 100px;
}

<div class="outer">
  <div class="inner">
    <table>
      <tr>
        <th class=fix></th>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
        <th>Col 4</th>
        <th class="fix">Col 5</th>
      </tr>
      <tr>
        <th class=fix>Header A</th>
        <td>col 1 - A</td>
        <td>col 2 - A (WITH LONGER CONTENT)</td>
        <td>col 3 - A</td>
        <td>col 4 - A</td>
        <td class=fix>col 5 - A</td>
      </tr>
      <tr>
        <th class=fix>Header B</th>
        <td>col 1 - B</td>
        <td>col 2 - B</td>
        <td>col 3 - B</td>
        <td>col 4 - B</td>
        <td class=fix>col 5 - B</td>
      </tr>
      <tr>
        <th class=fix>Header C</th>
        <td>col 1 - C</td>
        <td>col 2 - C</td>
        <td>col 3 - C</td>
        <td>col 4 - C</td>
        <td class=fix>col 5 - C</td>
      </tr>
    </table>
  </div>
</div>

يمكنك اختباره في هذا jsbin: http://jsbin.com/uxecel/4/edit

Answer 3

استخدم المكون الإضافي JQuery DataTables ، وهو يدعم رأسًا وأعمدة ثابتة. يضيف هذا المثال دعم العمود الثابت إلى جدول HTML "مثال":

http://datatables.net/extensions/fixedColumns/

لعمودين ثابتين:

http://www.datatables.net/release-datatables/extensions/fixedcolumns/examples/two_columns.html

Answer 4

استنادًا إلى نهج Skube ، وجدت أن الحد الأدنى من CSS كنت بحاجة إليه هو:

.horizontal-scroll-except-first-column {
    width: 100%;
    overflow: auto;
    margin-left: 20em;
}

.horizontal-scroll-except-first-column > table > * > tr > th:first-child,
.horizontal-scroll-except-first-column > table > * > tr > td:first-child {
    position: absolute;
    width: 20em;
    margin-left: -20em;
}

.horizontal-scroll-except-first-column > table > * > tr > th,
.horizontal-scroll-except-first-column > table > * > tr > td {
    /* Without this, if a cell wraps onto two lines, the first column
     * will look bad, and may need padding. */
    white-space: nowrap;
}

مع HTML:

<div class="horizontal-scroll-except-first-column">
    <table>
        ...
    </table>
</div>

Answer 5

ألقِ نظرة على هذا البرنامج المساعد jQuery:

http://fixedheadertable.com

يضيف عمودي (صف رأس ثابت) أو أفقي (عمود أول ثابت) التمرير إلى جدول HTML موجود. هناك عرض تجريبي يمكنك التحقق من كلتا الحالتين من التمرير.