Hide column in html table instead of showing a scollbar on x-axis?-CodePudding

I have an HTML table like this:

<div style="overflow: auto>
<table id="tableId">
    <thead>
        <tr><th>Header1</th></tr>
        <tr><th>Header2</th></tr>
        <tr><th>Header3</th></tr>
        <tr><th>Header4</th></tr>
    </thead>
    <tbody>
        <tr><td>Some text1</td></tr>
        <tr><td>Some text2</td></tr>
        <tr><td style="white-space: nowrap;">Some veryy very very very very very very very very very very very very very very very very very very very very very very very very very very very long text</td></tr>
        <tr><td>Some text4</td></tr>
    </tbody>
</table>
</div>

Currently, the table overflows if the content of the third column is too large. What I want to do instead is to hide the third column if it's so big that it causes an overflow (and thus shows a scrollbar) on the x-axis. I don't want to use media queries because overflow can happen on any display size.

How can I achieve this using Javascript and/or CSS? We're using Bootstrap, so if it can help that would also be a viable solution. Note that I would still need a scrollbar on the y-axis.

CodePudding user response：

You can use overflow-x property to that tr, and to enable overflow property, you need to pass minWidth to that element

<div style="overflow: auto>
<table id="tableId">
    <thead>
        <tr><th>Header1</th></tr>
        <tr><th>Header2</th></tr>
        <tr><th>Header3</th></tr>
        <tr><th>Header4</th></tr>
    </thead>
    <tbody>
        <tr><td>Some text1</td></tr>
        <tr><td>Some text2</td></tr>
        <tr><td style="white-space: nowrap; ">
                  <div style="width: 100px; overflow-x: auto;">
                     Some veryy very very very very very very very very very very very very very very very very very very very very very very very very very very very long text
                  </div>
               </td></tr>
    </tbody>
</table>
</div>

CodePudding user response：

Although this doesn't answer the question I do believe your HTML for a table should be more like this no?

Otherwise you have full width headers and columns that do not align vertically which is how I'm supposing most developers coding a table that's going to be displayed to human users would want to show it?

YOUR CODE

<div style="overflow: auto"> <!-- you have a typo here btw - missing " -->
<table id="tableId">
    <thead>
        <tr><th>Header1</th></tr>
        <tr><th>Header2</th></tr>
        <tr><th>Header3</th></tr>
        <tr><th>Header4</th></tr>
    </thead>
    <tbody>
        <tr><td>Some text1</td></tr>
        <tr><td>Some text2</td></tr>
        <tr><td style="white-space: nowrap;">Some veryy very very very very very very very very very very very very very very very very very very very very very very very very very very very long text</td></tr>
        <tr><td>Some text4</td></tr>
    </tbody>
</table>
</div>

MODIFIED BY REDUCING NUMBER OF TRs

    <div style="overflow: auto">
        <table id="tableId">
            <thead>
                <tr>
                    <th>Header1</th>
                    <th>Header2</th>
                    <th>Header3</th>
                    <th>Header4</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Some text1</td>
                    <td>Some text2</td>
                    <td style="white-space: nowrap;overflow: hidden;">Some veryy very very very very very very very
                        very
                        very very very very
                        very very very very very very very very very very very very very very very long text</td>
                    <td>Some text4</td>
                </tr>
            </tbody>
        </table>
    </div>