How can I make horizontal scroll bar only code block in <td>?

Question

I'm trying to make some custom table with HTML and SASS. I searched many questions on this site, but none of them works for my case.

the properties of the table are:

• table with 'width: 100%'
• responsive column width (according to contents)
  • first two columns are responsive with their contents and
  • third (the last) column width: 100% - width of (first + second) column
    • the third column has 'code' and this code display in a single line (line-breaking in the other blocks are ok)
    • If the 'code' goes too long, a horizontal scroll bar will show up. (the scroll bar only affects the 'code'. No scroll bar at 'td' but 'code'.)

I've already done with:

table-layout: fixed

: It works partially. But the column widths are divided equally across the table, regardless of content inside the cells. I need a responsive column. (If you activate the line 10 of SASS in my demo below, you can see what I said.)

overflow-x: scroll, auto, ...

: I succeeded to make scroll bar in the code block. But the width of the table exceeds the 'width: 100%'. In other words, the width of (which has the code block) stretches unlimitedly. (This is demonstrated in my the demo below.)

here is my demo: http://jsfiddle.net/purhvf0b/23/

Answer 1

add the below sass to td

 td
    border: 1px solid #444444
    width: 1px

also add the below sass to third column (I have added a class longtd to third td)

.longtd
  overflow: auto
  max-width: 0;
  width: auto;

forked fiddle http://jsfiddle.net/Soothran/n57m0f1b/

http://jsfiddle.net/lalji1051/ty4gof03/

Answer 2

try this

css

.width-100-border {
    width: 100%;
    border: 1px solid #00FF00;
    overflow-x: auto;
}
table td{
   border: 1px solid #444444;
   max-width: 600px;
}

Answer 3

您可以使用m-custom-scrollbar jQuery插件http://manos.malihu.gr/jquery-custom-content-scroller/