CSS Table: Scrollbar for first column and auto width for remaining column

Question

I am a beginner to CSS. I was trying to create a table in which the first column is of fixed width and must have a scrollbar with it. For the remaining column, I would like to them to spread evenly across the webpage.

I am able to create scrollbar for the first column, but it appears in every row, which is not what I want. I still want every first column to be scrollable, but the scroll bar should only appear once below the last row.

Anybody can help me on this?

#customers {
  font-size: 10px;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}

#customers td,
#customers th {
  border: 1px solid #ddd;
  padding: 8px;
  overflow-x: auto;
}

#customers tr:nth-child(even) {
  background-color: #f2f2f2;
}

#customers tr:hover {
  background-color: #ddd;
}

#customers th {
  padding-top: 6px;
  padding-bottom: 6px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}

.col {
  width: 3%;
}

<table id="customers">
  <colgroup>
    <col width=500px>
    <col width=5% span="11">
  </colgroup>
</table>

Simone S. · Accepted Answer · 2018-02-22 21:32:07Z

1

It's possible, but using a lot of tricks:

must change approach to table, using div with display: table; display: table-row; and display: table-cell;
all cell's white-space must is nowrap;
divided body in two macro cells;

Look like this demo : Here an extract of new html structure logic.

.div-cell.div-container-cell
{
  border: none;
  display: table-cell;
  padding: 0px;
}

.div-fixed-container-cell
{
  white-space: nowrap;
  max-width:200px;
  overflow-x:scroll;
}

.div-table
{
  display: table;
}

.div-row 
{
  display: table-row;
}

.div-cell
{
  display: table-cell;
  border: 2px solid #ddd;
  padding: 5px;
  white-space: nowrap;
}

<div class="div-table">
  <div class="div-container-cell div-fixed-container-cell">
    <div class="div-row">
      <div class="div-cell">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
    </div>
    <div class="div-row">
      <div class="div-cell">Lorem ipsum ...</div>
    </div>
    <div class="div-row">
      <div class="div-cell">Lorem ipsum ...</div>
    </div>
  </div>

  <div class="div-cell div-container-cell">
    <div class="div-row">
        <div class="div-cell">A1</div>
        <div class="div-cell">B1</div>
        <div class="div-cell">C1</div>
    </div>

    <div class="div-row">
        <div class="div-cell">A2</div>
        <div class="div-cell">B2</div>
        <div class="div-cell">C2</div>
    </div>  
    <div class="div-row">
       <div class="div-cell">A3</div>
       <div class="div-cell">B3</div>
       <div class="div-cell">C3</div>
    </div>  
  </div>
</div>

edited Feb 22, 2018 at 21:32

answered Feb 16, 2018 at 11:31

Simone S.

1,93618 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Simone S. Over a year ago

Thanks all, i revised my post.

qwertyuiop Over a year ago

Thanks a lot! It works perfectly. Anyway, how can I know when I am supposed to use table or display to protray it as table?

Simone S. Over a year ago

look this: stackoverflow.com/questions/29229523/…

Collectives™ on Stack Overflow

CSS Table: Scrollbar for first column and auto width for remaining column

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related