html - How can I make horizontal scroll bar only code block in ?

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/

标签： htmlcsssass

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/