Таблица CSS css Столбцы смещены

Ответ 1

Критерии успеха этого вопроса:

• Чистый CSS.
• Динамические столбцы.
• Липкий заголовок и нижний колонтитул с размером столбцов.

То, что вы хотите, невозможно.

Причина, по которой ячейки почти правы, состоит в том, что таблица полу-там, но в документе фактически есть несколько таблиц. Переопределяя тип отображения элементов <table> на flex, вы отобрали страницу в нескольких разных группах. <thead> и <tfoot> являются их собственной таблицей, а их <tbody> является ее собственной таблицей. Они не соотносятся друг с другом, а не с другими ячейками таблицы в своей группе.

В других руководствах по этой теме требуется фиксированная ширина. http://joshondesign.com/2015/05/23/csstable

После игры с ним (в частности, пытаясь переместить thead и tfoot в фиксированные позиции), я решил, что любая попытка предоставить определенные правила для верхнего/нижнего колонтитула разбивает расположение таблиц и приведет к тому, что размер будет работать по-разному, поэтому фиксированная ширина требуется для ячеек. Даже в примерах они разбиты таким образом, но фиксированная ширина аннулирует проблему.

Самое простое исправление - исправить ширину и дать им свойства overflow-x.

Альтернативой является использование JavaScript. С JS все ставки отключены, и вы можете делать все, что только можете себе представить. В частности, вы можете использовать JS для автоматической сортировки ячеек. Я помню, что у меня был успех с плагином jQuery, который выполнил это.
https://www.datatables.net/

В противном случае нет. Я не могу найти какой-либо пример онлайн, который делает то, что вам нужно. Любые попытки получить эту конкретную работу макета - это взломать, и вам лучше сделать версию без JS с ячейками overflow-x и фиксированной шириной и версию с поддержкой JS, которая автоматически сортирует ячейки.

Ответ 2

Как вы уже знаете из других ответов, вы должны удалить white-space: nowrap;, но там также можно что-то сделать с полосой прокрутки:

table thead, table tfoot {
    width: calc(100% - 17px);
}

Обновлено Plunker

это выглядит отлично на моем ПК, потому что полосы прокрутки Windows имеют ширину 17 пикселей. Если вы хотите быть в безопасности и проверить ширину полосы прокрутки, используйте это:

window.onload = function() {
    var tr = document.getElementById("__tbody").children[0];
    var scrWidth = window.innerWidth - tr.clientWidth - 3;
    var width = "calc(100% - " + scrWidth + "px)";
    document.getElementById("__thead").style.width = width;
    document.getElementById("__tfoot").style.width = width;
}

Это вычисляет, насколько широки полосы прокрутки, а затем настраивает thead и tfoot. Конечно, тогда вам нужно установить идентификаторы <thead id="__thead">, <tbody id="__tbody"> и <tfoot id="__tfoot">.

Ответ 3

Чтобы вернуть таблицу обратно к ее нормальному, динамически изменяющему размеру самому себе, нужно выполнить несколько шагов. Каждый упомянутый шаг даст свободу вернуться к соответствующим элементам таблицы, делая их жизнь намного проще.

Сначала удалите все экземпляры flex. Вы хотите, чтобы стол работал как таблица, не так ли? Затем пусть ваши thead, tr и tfoot будут сами собой. Зачем их отображать в виде таблицы? Наконец, ваш tbody настроен для отображения в виде блока. Это, в некотором смысле, отделяет его от друзей другого стола, а именно thead и tfoot. Это создает одинокую ситуацию для всех участников.

Ваш последний код будет выглядеть следующим образом:

table {
    table-layout: auto;
    max-height: 300px;
}

table thead, table tfoot,
table tbody tr {
    table-layout: fixed;
}

tbody td,
thead th,
tfoot td{
    border-right: 1px solid transparent;
    vertical-align: middle;
    white-space: nowrap;
}

table thead {
    width: 100%;
}
table tfoot {
    width: 100%;
}
table tbody {
    overflow-y: auto;
}

table tbody tr {
    width: 100%;
}

Это позволит вашим ячейкам таблицы быть самим собой - динамически изменять размер по мере их соответствия.

Ответ 4

Удалить

white-space: nowrap;

и добавьте

word-wrap: break-word;

tfoot td{
        border-right: 1px solid transparent;
        vertical-align: middle;
        word-wrap: break-word;
    }

Ответ 5

Ответ на первый вопрос:

td {
    text-overflow: ellipsis !important;
    overflow: hidden !important;
}

text-overflow: эллипсис очень полезен, потому что пользователь может скопировать все значение.

Ответ на второй вопрос:

Посмотрите на ответ на этот вопрос: Прокрутка таблицы с помощью HTML и CSS

Кажется, вам нужно либо javascript, либо внутреннее решение таблицы.

ОБНОВЛЕНО для второго ответа:

Используйте следующие стили на вашем столе и tbody (работая в Chrome):

table { 
    overflow-y: visible !important;
}
tbody {
    overflow-y: overlay !important;
}

Демо-версия плунжера

Ответ 6

1-й ответ: добавьте ниже css в элемент td

  td{
      white-space: normal;
      word-wrap: break-word;

      }

Второй ответ: вам нужно создать отдельную таблицу для верхнего и нижнего колонтитула и назначить ширину 20% для каждого td и th. Он должен работать.

Ответ 7

Вот ваш ответ: https://plnkr.co/edit/cyN0qDuxIs8LjkxIhur5?p=preview

tbody td,
thead th,
tfoot td{
    word-wrap:break-word;
    table-layout:fixed;
    white-space:normal;
}

Ответ 8

Использовать классы начальной загрузки для стилизации. Ваш пользовательский стиль (style.css) создает проблему. Кроме того, тег <table> обеспечивает динамическую ширину столбцов по умолчанию. Выдержка из Как создать столбец динамической ширины в Twitter Bootstrap:

<table class="table">
<tr><th>Id</th>     <th>Name</th>      <th>Email address</th></tr>
<tr><td>100001</td> <td>Joe</td>       <td>[email protected]</td></tr>
<tr><td>100</td>    <td>Christine</td> <td>[email protected]</td></tr>
<tr><td>1001</td>   <td>John</td>      <td>[email protected]</td></tr>

Это даст вам желаемый результат

Ответ 9

Ваше несоосность приходит из-за следующих

• переполненный текст
• ширина полосы прокрутки в tbody

Решение:

• укажите overflow-x: auto в 'td', а некоторые max-width/width

• сделайте last th намного больше, чем другие, в качестве ширины полосы прокрутки.

• чтобы лучше смотреть на полосу прокрутки, поставить пользовательский CSS для строки прокрутки

Добавьте следующий css на свою страницу и наслаждайтесь plunkerLink

th,td {
      width: 20%!important;
      overflow-x: auto;
      padding: 10px;
    }

    th:last-of-type {
      width: calc(20% + 6px)!important;
    }

    ::-webkit-scrollbar {
      width: 3px!important;
      height: 6px!important;
    }

    ::-webkit-scrollbar-button {
      width: 0;
      height: 0;
    }

    ::-webkit-scrollbar-thumb {
      border: 2px solid #ccc;
      background: #ccc;
      border-radius: 8px;
    }

    ::-webkit-scrollbar-track-piece {
      width: 3px!important;
      border: 1px solid #fff;
    }

Ответ 10

https://plnkr.co/edit/3hYms9hRqzF2DV9yTBCG?p=preview

Добавил это в ваш css:

tr.info td {word-wrap: break-word; white-space: normal;}

Ответ 11

Я просто изменил ваш style.css в демонстрацию Plunker следующим образом

/* Put your css in here */

table {
    table-layout: auto;
    display: flex;
    flex-flow: column;
    max-height: 300px;
}

table thead, table tfoot,
table tbody tr {
    display: table;
    table-layout: fixed;
}

tbody td,
thead th,
tfoot td{
    border-right: 1px solid transparent;
    vertical-align: middle;
    text-align: center;
    white-space: normal;
    word-wrap: break-word;
    text-wrap: normal;
}

table thead {
    /*flex: 0 0 auto;*/
    width: 100%;
}
table tfoot {
    /*flex: 0 0 auto;*/
    width: 100%;
}
table tbody {
    flex: 1 1 auto;
    display: block;
    overflow-y: auto;
}

table tbody tr {
    width: 100%;
}