Как сохранить горизонтальную полосу прокрутки только для одной конкретной колонки в таблице?

Question

Допустим, у меня есть стол с тремя столбцами, я хочу сохранить горизонтальную полосу прокрутки только для третьего столбца. Является ли это возможным?

Answer 1

Для этого вы можете использовать overflow-x.

Как это:

table{ 
 
    border: 1px solid black; 
 
    table-layout: fixed; 
 
    width: 200px; 
 
} 
 

 
td { 
 
    border: 1px solid black; 
 
    overflow: hidden; 
 
    width: 100px; 
 
} 
 

 
td:nth-child(3) 
 
{ 
 
    overflow-x: scroll; 
 
}

<table> 
 
    <tr> 
 
    <td>aaaaaaaaaa</td> 
 
    <td>bbbbbbbbbb</td> 
 
    <td>cccccccccccccccccccccccccccccccccccccccccccccccc</td> 
 
    </tr> 
 
</table>

Answer 2

Да, с комбинацией CSS битов и качается ...

---

Именованные ячейки Только Scroll

<table class='a-table'> 
<tr><th>One</th><th>Two</th><th>Three</th></tr> 

<tr><td>One</td><td>Two</td><td class='different'>Three-million-one-hundred-and-sixty-eight sausages marched in unison</td></tr> 

</table> 

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

Я также установил фиксированную ширину для ячеек, просто чтобы сделать эту работу в примере, и добавил white-space: nowrap;, чтобы заставить содержимое расширяться горизонтально, а не по умолчанию поведение переноса на новую строку для предотвращения прокрутки

.a-table { 
    border: 1px solid #555; 
} 
.a-table td { 
    max-width: 100px; 
    border: 1px solid #ccc; 
} 

.different { 
    overflow-x: scroll; 
    white-space: nowrap; 
} 

Не стесняйтесь использовать overflow: auto вместо scroll, если вы хотите, чтобы показать полосу прокрутки если это требуется.

Следует отметить, что один из других ответов использует overflow: hidden, что, вероятно, проявит нежелательное поведение, если какая-либо из ваших других ячеек имеет содержимое, которое превышает установленную ширину, тогда как этот пример будет обертываться как обычно.

Фидл:

https://jsfiddle.net/xpfz8ho4/

---

Каждая ячейка в колонке с свитка

Для таблиц многорядные, это решение также будет обеспечивать поведение на весь столбец:

CSS:

.a-table { 
    border: 1px solid #555; 
} 
.a-table td { 
    max-width: 100px; 
    border: 1px solid #ccc; 
} 

.a-table td:nth-child(3) { 
    overflow-x: scroll; 
    white-space: nowrap; 
} 

HTML:

<table class='a-table'> 
<tr><th>One</th><th>Two</th><th>Three</th></tr> 

<tr><td>One</td><td>Two</td><td>Three-million-one-hundred-and-sixty-eight sausages marched in unison</td></tr> 
<tr><td>One</td><td>Two</td><td>Three-million-one-hundred-and-sixty-eight sausages marched in unison</td></tr> 

</table> 

Пример Fiddle этого: https://jsfiddle.net/w9a1kcmt/

---

Выделите весь столбец

Это возможно, но становится немного сложнее.

Для этого я приложил свой стол к div, который я звоню tableinside. Я также изложить свои фиксированные (без scolling) столбцы неподвижная

<div class='tableinside'> 
    <table class='a-table'> 
    <tr><th class='fixed'>One</th><th class='fixed'>Two</th><th>Three</th></tr> 

    <tr><td class='fixed'>One</td><td class='fixed'>Two</td><td>Three-million-one-hundred-and-sixty-eight sausages marched in unison</td></tr> 
    <tr><td class='fixed'>One</td><td class='fixed'>Two</td><td>Three-million-one-hundred-and-sixty-eight sausages marched in unison</td></tr> 
    </table> 
</div> 

Теперь, CSS приходит. На самом деле, мы собираемся перенести наши статические столбцы за пределами <div>, а это означает только всю треть столбец фактически расположен внутри div.

Это означает, что мы должны сделать div равным margin-left, равным сумме ширины всех статических столбцов, которая в этом случае равна 100px, с некоторой корректировкой, сделанной для полей 5px, поэтому общее значение 110px. Тогда мы будем делать те же корректировки для каждого из статических столбцов:

.a-table td, th { 
      border: 1px solid #ccc; 
      white-space: nowrap; 
} 
.tableinside { 
      width: 300px; 
      overflow-x:scroll; 
      margin-left:110px; 
} 
.fixed { 
     position:absolute; 
     width:50px; 
     left:10px; 
     top:auto; 
     } 
.fixed:nth-child(2) { 
      margin-left: 55px; 
} 

И все это вместе, как этот https://jsfiddle.net/ruttgj79/

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