How to set horizontal scroll bar with fixed first left column and no vertical scroll bar with pure HTML/CSS

Question

I am generating my table like this:

<tr>
      <td valign="top" colspan="15">
      <table width="100%" style="display: block; overflow-x:scroll;overflow-y:hidden ;white-space: nowrap; height:440px">
        <tbody>
          <tr>
            <td style="height:20px;min-width:25%; font-weight:bolder; background-color:#E0E0E0; border-bottom:2px solid black; border-left:1px solid black;" colspan="2">
              <span style="font-size: 10pt; weight:bold; align:center;">Information</span>
            </td>
            <td align="center" style="height:20px; font-weight:bolder;background-color:#E0E0E0;border-left:1px solid black;border-bottom:2px solid black;" colspan="2">
              <span style="font-size: 10pt; weight:bold;">Horizontal header/span>
            </td>
            <td align="center" style="height:20px; font-weight:bolder;background-color:#E0E0E0;border-left:1px solid black;border-bottom:2px solid black;" colspan="2">
              <span style="font-size: 10pt; weight:bold;">Horizontal header2</span>
            </td>
            <td align="center" style="height:20px; font-weight:bolder;background-color:#E0E0E0;border-left:1px solid black;border-bottom:2px solid black;" colspan="2">
            <td align="center" style="height:20px; font-weight:bolder;background-color:#E0E0E0;border-left:1px solid black;border-bottom:2px solid black;" colspan="2">
            <td align="center" style="height:20px; font-weight:bolder;background-color:#E0E0E0;border-left:1px solid black;border-bottom:2px solid black;" colspan="2">
          </tr>
          <tr class="CSSClass">
            <td align="left" style="border-left:1px solid black;border-top:1px solid black;font-weight:bold" colspan="15">Left column 0</td>
          </tr>
          <tr class="CSSClass">
            <th align="left" style="min:width:25%;position: absolute; border-left:1px solid black;border-top:1px solid black;border-bottom:1px solid black;font-weight:normal" colspan="2">left column 1</th>
            <td align="center" style="border-top:1px solid black;border-bottom:1px solid black;border-left:1px solid black;" colspan="2">Name1</td>
            <td align="center" style="border-top:1px solid black;border-bottom:1px solid black;border-left:1px solid black;" colspan="2">Name2</td>
            <td align="center" style="border-top:1px solid black;border-bottom:1px solid black;border-left:1px solid black;" colspan="2">Name3</td>
            <td align="center" style="border-top:1px solid black;border-bottom:1px solid black;border-left:1px solid black;" colspan="2">Name4</td>
            <td align="center" style="border-top:1px solid black;border-bottom:1px solid black;border-left:1px solid black;" colspan="2">Name5</td>
          </tr>
          <tr class="CSSClass">
            <th align="left" style="min-width:25%;border-left:1px solid black;border-bottom:1px solid black;border-right:1px solid black;font-weight:normal;" colspan="2"> left column 3</th>
            <td align="center" style="border-style: none none solid none; border-width: thin;border-left:1px solid black;" colspan="2"></td>
            <td align="center" style="border-style: none none solid none; border-width: thin;border-left:1px solid black;border-left:1px solid black;" colspan="2"></td>
            <td align="center" style="border-style: none none solid none; border-width: thin;border-left:1px solid black;border-left:1px solid black;border-left:1px solid black;" colspan="2"></td>
            <td align="center" style="border-style: none none solid none; border-width: thin;border-left:1px solid black;border-left:1px solid black;border-left:1px solid black;border-left:1px solid black;" colspan="2"></td>
            <td align="center" style="border-style: none none solid none; border-width: thin;border-left:1px solid black;border-left:1px solid black;border-left:1px solid black;border-left:1px solid black;border-left:1px solid black;" colspan="2"></td>
          </tr>
          <tr class="CSSClass">
          <tr class="CSSClass">

        </tbody>
      </table>
    </td>
  </tr>

This is a table inside another bag of tables. Now is there a way to display only horizontal scroll bar with fixed first column in this case information,left column 0.1.2. I tried the above code and it's breaking rows if use position:absolutefor fixed headers. It's scrolling okay vertically,but I prefer horizontal scrolling and want to hide vertical scrolling. Any pure HTML/CSS solution would help.The CSSclass consists styling and nothing else and used for other tables in the group as well,so I prefer not to mess with that one .Any help is appreciated?

Your html is broken, first thing fix that. You need to make sure all your tags are closed properly. — ngearing, Jun 26 '18 at 08:23
Did you come across this post - https://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-fixed-frozen-left-column-and-scrollable-body — Rupesh Jain, Jun 26 '18 at 08:27
@RupeshJain as I said I don't want to mess with my css class — Sherlock.H, Jun 26 '18 at 08:29
@Sherlock.H I guess you can take inspiration from it and use the properties in your inline style. The solution is already available, you just need to use it the way you like. The inline style solution doesnt look neat, and I would suggest you get away with it if at all there is a way. — Rupesh Jain, Jun 26 '18 at 08:33
@RupeshJain well,That solution works fine for vertical scrolling .however when I try it for horizontal scrolling with fixed left column,it just breaks — Sherlock.H, Jun 26 '18 at 08:35
@AmranurRahman I did exactly that,as you can see the horizontal scroll bar is missing and it doesn't freeze the left column — Sherlock.H, Jun 26 '18 at 08:38

How to set horizontal scroll bar with fixed first left column and no vertical scroll bar with pure HTML/CSS

0 Answers0