Как мы исправили прокрутку с исправлением заголовка и отрегулировали ширину заголовков, а также тд равны? - PullRequest
Новая
       3

Как мы исправили прокрутку с исправлением заголовка и отрегулировали ширину заголовков, а также тд равны?

0 голосов
/ 18 марта 2019

если я добавлю n колонтитулов, он будет установлен с определенной минимальной шириной, и если общая минимальная ширина колонтитулов должна быть выше 100% прокрутки таблицы, которую нужно предоставить, одновременно нужно, чтобы ширина td равнялась ширине заголовка:

HTML-код, как показано ниже: https://jsfiddle.net/1w7vnLec/

<html>
<head>
<style>
table.scroll {
     width: 100%; 
     /* Optional */
    /* border-collapse: collapse; */
    border-spacing: 0;
    border: 2px solid black;
}

table.scroll tbody,
table.scroll thead { display: block; }

thead tr th { 
    height: 30px;
    line-height: 30px;
    /* text-align: left; */
}

table.scroll tbody {
    height: 100px;
    overflow-y: auto;
    overflow-x: scroll;
}

tbody { border-top: 2px solid black; }

tbody td, thead th {
    /* width: 20%; */ /* Optional */
    border-right: 1px solid black;
    /* white-space: nowrap; */
}

tbody td:last-child, thead th:last-child {
    border-right: none;
}

</style>




</head>
<body>
<table class="scroll">
    <thead>
        <tr>
            <th>Head 1</th>
            <th>Head 2</th>
            <th>Head 3</th>
            <th>Head 4</th>
            <th>Head 5</th>
            <th>Head 6</th>
            <th>Head 7</th>
            <th>Head 8</th>
            <th>Head 9</th>
            <th>Head 10</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 1</td>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
             <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
        </tr>

    </tbody>
</table>
</body>
</html>

как мы исправили прокрутку с фиксированным заголовком и отрегулировали ширину заголовков, а также td равными?

1 Ответ

1 голос
/ 18 марта 2019

Удалите свой JS и удалите этот CSS 

table.scroll tbody,
table.scroll thead {
    display: block;
}

Затем установите min-width для ваших td s и установите для его родителя значение scroll: overflow или scroll: auto overflow-x: auto в зависимости от поведения, которое вы ищете.

Вот фрагмент рабочего кода: 

.scroll {
  overflow: scroll;
}

table {
     width: 100%; 
    border-spacing: 0;
    border: 2px solid black;
}

thead tr th { 
    height: 30px;
    line-height: 30px;
}

table.scroll tbody {
    height: 100px;
    overflow-y: auto;
    overflow-x: scroll;
}

tbody {
    border-top: 2px solid black;
}

tbody td,
thead th {
    border-right: 1px solid black;
}

tbody td:last-child,
thead th:last-child {
    border-right: none;
}

tbody td {
    min-width: 200px;
}
<html>
<head>
 <script  src="jquery-1.9.1.min.js"></script>




</head>
<body>
<div class="scroll">
<table>
    <thead>
        <tr>
            <th>Head 1</th>
            <th>Head 2</th>
            <th>Head 3</th>
            <th>Head 4</th>
            <th>Head 5</th>
            <th>Head 6</th>
            <th>Head 7</th>
            <th>Head 8</th>
            <th>Head 9</th>
            <th>Head 10</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 1</td>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
			 <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
			<td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
			 <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
			 <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
			 <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
        </tr>
    </tbody>
</table>
</div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...