2

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>

enter image description here

omukiguy
  • 1,401
  • 3
  • 17
  • 36
qwertyuiop
  • 47
  • 6

1 Answers1

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>
Simone S.
  • 1,756
  • 17
  • 18