css3 - bootstrap4's table-responsive only works for a limited width and is disabled on smartphones

Home>2019-12-08 17:02

css3 - bootstrap4's table-responsive only works for a limited width and is disabled on smartphones

Using Bootstrap4's table-responsive,
I want to scroll the table horizontally when the window width is narrower than the table.
When described as follows,
Horizontal scrolling appears on the table between 576px and 991px,
When it becomes 575px or less, it is canceled, and the horizontal scroll appears at the bottom of the screen, and the entire table width appears.

item01.html

<! DOCTYPE html>
<html>
<head prefix = "og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<meta charset = "UTF-8">
<title>ITEM01</title>
<meta name = "description" content = "">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "icon" href = "../../ img/favicon.ico">
<link rel = "canonical" href = "">
<!-Style sheet here->
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" mous
<link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity = "sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt + Y8vEf7N7fWony" mous
<link rel = "stylesheet" href = "../../ css/slick-theme.css" />
<link rel = "stylesheet" href = "../../ css/slick.css" />
<link rel = "stylesheet" href = "../../ css/item01.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type = "text/javascript" src = "../../ js/load.js"></script>
</head>
<body data-spy = "scroll" data-target = "# navbar">
    <!-******************** HEADER ********************->
        ...
    <!-******************** HEADER ********************->
    <!-******************** BREADCRUMB ********************->
    
        
            <nav aria-label = "Breadcrumb list">
                <ol>
                    ...
                </ol>
            </nav>
        
    <!-******************** BREADCRUMB ********************->
    <!-******************** MAIN ********************->
    <main>
        
            <!-***** Main content ****->
            
                <section>
                    
                        <table>
                            <tr>
                                <th>●●</th>
                                <th>●●●●●●●</th>
                                <th>●●●●●●●●</th>
                                <th>●●●●</th>
                                <th>●●●●●●●●●</th>
                                <th>●●●</th>
                                <th>●●●●●●</th>
                            </tr>
                            <tr>
                                <td>
                                    AAAAAAAA
                                </td>
                                <td>BBBBBBBBBBBBBB</td>
                                <td>CCC</td>
                                <td>DDDDDDDDD</td>
                                <td>EEE</td>
                                <td>&# x25CE;</td>
                                <td>
                                    
                                        Here
                                    
                                </td>
                            </tr>
                            <tr>
                                <td colspan = "7">
                                    <p>[FFFFF]<br>
                                        &# x25CE;: GGGGGGGGGGGGGGGGGGGG<br>
                                        &# x25CB ;: HHHHHHHHHHHHHHHHHHHHHHHHHHHHH<br>
                                        &# x25B3 ;: IIIIIIIIIIIIIIIIII<br>
                                        &# x00D7 ;: JJJJJJJJJJJJJJJJJJJJ
                                    </p>
                                </td>
                            </tr>
                        </table>
                    
                </section>
            <!-div->
        <!-/. row->
    </main>
    <!-******************** FOOTER ********************->
    <script type = "text/javascript">// Load footer
        includeHTML ("inc/footer.html", "../../");
    </script>
    <!-******************** FOOTER ********************->
    <!-******************** JAVASCRIPT ********************->
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity = "sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQn4" F86dIHz0 = " script>
    <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity = "sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM + B07jRM" crossorigin = ""
    <script type = "text/javascript" src = "js/slick.min.js"></script>
    <script type = "text/javascript" src = "js/script.js"></script>
    <!-******************** JAVASCRIPT ********************->
</body>
</html>

item01.css

@charset "utf-8";
main {
    display: block;
}
main.container {
    padding-top: 15px;
}

Answer # 1
Theoverflow-xproperty is not working as expected because the
max-widthproperty is not applied below576pxIs the cause. By settingwidthproperty for.main-contentclass, I think that the problem that the table protrudes with a narrow screen width can be solved. Link).
```
. main-content {
  width: 100%;
}
```

TutorialFor

css3 - bootstrap4's table-responsive only works for a limited width and is disabled on smartphones

Related articles