Вопросы Теги

То, как я создаю HTML-таблицу с, фиксировало/замораживало левый столбец и тело с возможностью прокрутки?

DIR1 и DIR2 содержат имена файлов в каталогах 2 и 3 соответственно. Помимо возможных проблем с пробелами или специальными символами в именах файлов, вам придется использовать 2/$i и 3/$j. Только $i и $j будут ссылаться на файлы с одинаковыми именами в текущем каталоге (родительские элементы для 2 и 3).

Лучше не анализировать вывод ls. Вам не нужны две вложенные циклы. 

#!/bin/bash

DIR1=2
DIR2=3

for source in $DIR1/*
do
    dest="$DIR2/$(basename $source)"

    if [ -f "$dest" ]
    then
        sudo cat "$source" >> "$dest"
    fi
done

см. Также https://mywiki.wooledge.org/BashPitfalls#for_f_in_.24.28ls_.2A.mp3.29

В зависимости от ваших потребностей это может быть лучше запустить весь сценарий с sudo вместо запуска sudo для каждого файла. Версия выше будет выполнять только cat "$source" как root. При запуске всего скрипта от имени root это также включает в себя >> "$dest".

247
задан Ratan Uday Kumar 28 October 2019 в 20:49
поделиться

5 ответов

Если вам нужна таблица, в которой только столбцы прокручиваются по горизонтали, вы можете position: absolute первый столбец (и явно указать его ширину), а затем обернуть всю таблицу в блоке overflow-x: scroll . Однако не пытайтесь делать это в IE7 ...

Соответствующий HTML и CSS: 

 table {border-collapse: отдельный; граница-интервал: 0; border-top: сплошной серый цвет 1px; } td, th {маржа: 0; граница: сплошной серый цвет 1px; белое пространство: nowrap; ширина верхней границы: 0 пикселей; } div {ширина: 500 пикселей; переполнение-x: прокрутка; маржа слева: 5em; переполнение-y: видимое; отступ: 0; } .headcol {позиция: абсолютная; ширина: 5em; слева: 0; верх: авто; ширина верхней границы: 1 пиксель; / * актуально только для первой строки * / margin-top: -1px; / * компенсировать верхнюю границу * /} .headcol: before {content: 'Row'; } .long {фон: желтый; межбуквенный интервал: 1em; } 
 
 
 
  1   QWERTYUIOPASDFGHJKLZXCVBNM   QWERTYUIOPASDFGHJKLZXCVBNM  
 
  2   QWERTYUIOPASDFGHJKLZXCVBNM   QWERTYUIOPASDFGHJKLZXCVBNM   
  3   QWERTYUIOPASDFGHJKLZXCVBNM   QWERTYUIOPASDFGHJKLZXCVBNM  
 
  4   QWERTYUIOPASDFGHJKLZXCVBNM   QWERTYUIOPASDFGHJKLZXCVBNM  
 
  5   QWERTYUIOPASDFGHJKLZXCVBNM   
 
  6   QWERTYUIOPASDFGHJKLZXCVBNM   QWERTYUIOPASDFGHJKLZXCVBNM

Fiddle

356
ответ дан 23 November 2019 в 03:02
поделиться

Для меня это был единственный, который работал идеально (спасибо Полу О'Брайену!): https://codepen.io/paulobrien/pen/gWoVzN

Вот фрагмент: 

// requires jquery library
jQuery(document).ready(function() {
  jQuery(".main-table").clone(true).appendTo('#table-scroll').addClass('clone');   
 });
  .table-scroll {
    position:relative;
    max-width:600px;
    margin:auto;
    overflow:hidden;
    border:1px solid #000;
  }
.table-wrap {
	width:100%;
	overflow:auto;
}
.table-scroll table {
	width:100%;
	margin:auto;
	border-collapse:separate;
	border-spacing:0;
}
.table-scroll th, .table-scroll td {
	padding:5px 10px;
	border:1px solid #000;
	background:#fff;
	white-space:nowrap;
	vertical-align:top;
}
.table-scroll thead, .table-scroll tfoot {
	background:#f9f9f9;
}
.clone {
	position:absolute;
	top:0;
	left:0;
	pointer-events:none;
}
.clone th, .clone td {
	visibility:hidden
}
.clone td, .clone th {
	border-color:transparent
}
.clone tbody th {
	visibility:visible;
	color:red;
}
.clone .fixed-side {
	border:1px solid #000;
	background:#eee;
	visibility:visible;
}
.clone thead, .clone tfoot{background:transparent;}
<div id="table-scroll" class="table-scroll">
  <div class="table-wrap">
    <table class="main-table">
      <thead>
        <tr>
          <th class="fixed-side" scope="col">&nbsp;</th>
          <th scope="col">Header 2</th>
          <th scope="col">Header 3</th>
          <th scope="col">Header 4</th>
          <th scope="col">Header 5</th>
          <th scope="col">Header 6</th>
          <th scope="col">Header 7</th>
          <th scope="col">Header 8</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th class="fixed-side">Left Column</th>
          <td>Cell content<br>
            test</td>
          <td><a href="#">Cell content longer</a></td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
        </tr>
        <tr>
          <th class="fixed-side">Left Column</th>
          <td>Cell content</td>
          <td>Cell content longer</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
        </tr>
        <tr>
          <th class="fixed-side">Left Column</th>
          <td>Cell content</td>
          <td>Cell content longer</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
        </tr>
        <tr>
          <th class="fixed-side">Left Column</th>
          <td>Cell content</td>
          <td>Cell content longer</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
        </tr>
        <tr>
          <th class="fixed-side">Left Column</th>
          <td>Cell content</td>
          <td>Cell content longer</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
        </tr>
        <tr>
          <th class="fixed-side">Left Column</th>
          <td>Cell content</td>
          <td>Cell content longer</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th class="fixed-side">&nbsp;</th>
          <td>Footer 2</td>
          <td>Footer 3</td>
          <td>Footer 4</td>
          <td>Footer 5</td>
          <td>Footer 6</td>
          <td>Footer 7</td>
          <td>Footer 8</td>
        </tr>
      </tfoot>
    </table>
  </div>
</div>

<p>See <a href="https://codepen.io/paulobrien/pen/LBrMxa" target="blank">position Sticky version </a>with no JS</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
1
ответ дан 23 November 2019 в 03:02
поделиться

Можно просто сделать первый столбец position: sticky; z-index: 9. Это заставит столбец/строку придерживаться своей текущей позиции. Контроль мой пример codepen здесь https://пример codepen.io/swastikmishra/pen/zYYdKBQ

HTML 

<style type="text/css">
            table{ text-align: center; }
            .table-container{ width: 500px; height: 300px; overflow: scroll;}
            table th, table td {
                white-space: nowrap;
                padding: 10px 20px;
                font-family: Arial;
            }
            table tr th:first-child, table td:first-child{
                position: sticky;
                width: 100px;
                left: 0;
                z-index: 10;
                background: #fff;
            }
            table tr th:first-child{
                z-index: 11;
            }
            table tr th{
                position: sticky;
                top: 0;
                z-index: 9;
                background: #fff;
            }
        </style>
        <div class="table-container">
            <table>
                <tr><th>Hello World</th><th>Hello World</th><th>Hello World</th><th>Hello World</th><th>Hello World</th><th>Hello World</th><th>Hello World</th></tr>
                <tr><td>H11</td><td>H12</td><td>H13</td><td>H14</td><td>H15</td><td>H16</td><td>H17</td></tr>
                <tr><td>H21</td><td>H22</td><td>H23</td><td>H24</td><td>H25</td><td>H26</td><td>H27</td></tr>
                <tr><td>H31</td><td>H32</td><td>H33</td><td>H34</td><td>H35</td><td>H36</td><td>H37</td></tr>
                <tr><td>H41</td><td>H42</td><td>H44</td><td>H44</td><td>H45</td><td>H46</td><td>H47</td></tr>
                <tr><td>H51</td><td>H52</td><td>H54</td><td>H54</td><td>H55</td><td>H56</td><td>H57</td></tr>
                <tr><td>H61</td><td>H62</td><td>H64</td><td>H64</td><td>H65</td><td>H66</td><td>H67</td></tr>
                <tr><td>H71</td><td>H72</td><td>H74</td><td>H74</td><td>H75</td><td>H76</td><td>H77</td></tr>
                <tr><td>H81</td><td>H82</td><td>H84</td><td>H84</td><td>H85</td><td>H86</td><td>H87</td></tr>
            </table>
        </div>
0
ответ дан 23 November 2019 в 03:02
поделиться

В качестве альтернативы задайте стиль телу заданного размера (например, через height: 20em ) и используйте overflow-y: scroll;

Затем, у вас может быть огромное тело, которое будет прокручиваться независимо от остальной части страницы.

0
ответ дан 23 November 2019 в 03:02
поделиться

Стиль левого столбца с позиция: фиксированная . (Вы, вероятно, захотите использовать стили top и left , чтобы контролировать, где именно это происходит.)

11
ответ дан 23 November 2019 в 03:02
поделиться