Item width increase dynamically according to the content in single row?

#1

Hello Sir,
I have used

 <div class="item row row-item acs-width" ng-repeat="x in 
accountStatmentList.accountStatementNodes ">
          div class="acs-col-left acs-slno">{{x.slNo}}
          div class="acs-col-left col-sep acs-date-amout">{{ x.transactionDate}}
          div class="acs-col-right col-sep acs-date-amout">{{x.debtAmount}}</div
          div class="acs-col-right col-sep acs-date-amout">{{ x.creditAmount }}</div
             div class="acs-col-right col-sep acs-date-amout">{{ x.balance  }}</div
               div class="acs-col-left col-sep acs-narration">{{ x.naration}}</div

/div>

****Css
My css:

.acs-width { width: 300%; }

.acs-slno{
    width: 10%;
}
.acs-date-amout{
    width: 35%;
}
.acs-narration{
width: 150%;
}
.acs-col-right {
  text-align: right;
  padding: 0px 0px 0px 0px !important;
}

.acs-col-sep {
  border-left: 1px solid lightgray;
}

.acs-col-left {
  padding: 0px 0px 0px 0px !important;
}

i want to show data in the column and increase column according to the content. That means if it content large its column will be large. it content small its column will be small
My data is showen like below. Its column width is not fit according to the content…

image
column.PNG985×71 1.25 KB

How to do it?
Please Help me…

#2

Can you please provide a codepen for this.

#3

Hello mhartington,
Thanks you for your reply. My project is database related. I need view data in a table. Table will be scroll vertical and horizontal. Table has at least 8 column and vertically infinite.

Can you please suggest me and give idea how to do it?

#4

Would you please provide a codepen with some mock data

#5

Hello Sir,
My github link:https://github.com/enamul95/tabledata.git
My codepage Link:http://codepen.io/enamul95/pen/jERqge

I did not understand codepane. I just copy my code my html to html, css to css, js to js.