Now there is a requirement for a table that ADAPTS to the appearance of a scroll bar. Let’s see what happens.

This is the default

The left and right are placeholders for the default widths, and the middle is the content area, the widths are adaptive.

Look at what happens when the slider scrolls.

Scrolling sliders occur because the table’s content area is compressed so that it does not have enough space to show all of the table’s content and does not allow table content to be wrapped.

The implementation code is as follows.

HTML part

<div class="layout">
    <div class="left">Left-400px</div>
    <div class="content">
        <div class="content-top">content-top</div>
        <div class="table-container">
            <table cellspacing="0" cellpadding="0">
                <thead>
                    <tr>
                        <th colspan="3">The table header</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>The table body</td>
                        <td>with two columns</td>
                        <td>some rest information</td>
                    </tr>
                    <tr>
                        <td>The table body</td>
                        <td>with two columns</td>
                        <td>less information</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="content-bottom">
            The scope attribute on header elements is redundant in simple
            contexts, because scope is inferred. However, some assistive
            technologies may fail to draw correct inferences, so specifying header
            scope may improve user experiences. In complex tables, scope can be
            specified so as to provide necessary information about the cells
            related to a header.
        </div>
    </div>
    <div class="right">Right-400px</div>
</div>
Copy the code

The CSS part

div.layout {
    display: flex;
}
div.left.div.right {
    flex: 1 0 400px;
    background-color: cyan;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

div.content {
    overflow-x: hidden;
    background-color: antiquewhite;
}
div.content div {
    margin: 10px;
    border: darkolivegreen 1px solid;
}

div.table-container {
    overflow-x: auto;
}
table {
    width: 100%;
}
table.td {
    border: 1px solid # 333;
}
table th {
    white-space: nowrap;
}
table td {
    white-space: nowrap;
}

thead.tfoot {
    background-color: # 333;
    color: #fff;
}
Copy the code

Here’s how it works.

The first is the middle content adaptive, here uses flex layout, do not understand ruan Yifeng flex, now adaptive basic either use this scheme, or use absolute positioning.

There are two ways to write it in Flex, one is to specify the width of both sides and then flex:1, and the other is this one, it doesn’t matter, it’s the same.

div.layout {
    display: flex;
}
div.left.div.right {
    flex: 1 0 400px;
}
Copy the code

And then the content part, because the content part has a lot of content, not just the table, and we don’t want the whole content part to have sliders, we just want the table to have sliders, so we have to do a little bit more complicated processing.

Since the contents of the table wrap automatically, to prevent this, we need to apply white-space: nowrap;

table th {
    white-space: nowrap;
}
table td {
    white-space: nowrap;
}
Copy the code

First we need to use the formdiv.table-continer(Unwrapping this layer can achieve a similar effect, but will cause trouble for subsequent CSS coding. Wrapping this layer is recommended here.div.contentPart of theoverflowSet tohiddenAnd thendiv.table-container 的 overflowSet toauto;

div.content {
    overflow-x: hidden;
}
div.table-container {
    overflow-x: auto;
}
Copy the code

At this point, the slider appears in the table, but the table does not automatically expand, so it is very simple

table {
    width: 100%;
}
Copy the code

At this point, all the requirements are met, and there are some style optimizations that need not be covered.